Вайб-кодинг с нуля

Appearance

Установка рабочего места ​

В этой главе мы установим всё необходимое для полноценного вайб-кодинга. Если ты уже прошёл «Самый быстрый старт» и поставил VS Code + Node.js — часть шагов можешь пропустить.

VS Code — среда разработки ​

Установка ​

  1. Перейди на code.visualstudio.com
  2. Нажми кнопку Download — сайт определит твою систему автоматически
  3. Запусти скачанный файл
  4. Важно: на шаге «Дополнительные задачи» поставь все галочки:
    • ✅ Добавить действие «Открыть с помощью Code» в контекстное меню
    • ✅ Добавить в PATH
    • ✅ Зарегистрировать как редактор по умолчанию
  5. Нажми «Установить» → «Готово»

Первый запуск ​

Открой VS Code. Ты увидишь приветственную вкладку. Закрой её — она больше не нужна.

Запомни три зоны:

  • Левая панель — тут видны файлы твоего проекта (Explorer)
  • Центр — тут открываются и редактируются файлы
  • Нижняя панель — тут терминал (если не видно — нажми Ctrl+`)

Русификация (по желанию) ​

  1. Нажми Ctrl+Shift+X (расширения)
  2. В поиске напиши Russian Language Pack
  3. Установи первый результат от Microsoft
  4. Перезапусти VS Code — интерфейс станет на русском

Полезные расширения ​

Вот минимальный набор расширений, который стоит поставить сразу:

РасширениеЗачем
Live ServerМгновенный просмотр HTML-сайтов в браузере — правишь файл, страница обновляется сама
PrettierАвтоформатирование кода — делает код красивым одной кнопкой
Material Icon ThemeКрасивые иконки для файлов — легче ориентироваться в проекте

Установка: Ctrl+Shift+X → ввести название → Install.

Node.js — среда выполнения JavaScript ​

Зачем нужен ​

Node.js — это то, что позволяет запускать JavaScript-программы на компьютере (а не только в браузере). Claude Code, Qwen Code и множество инструментов написаны на JavaScript и требуют Node.js для работы.

Проще говоря

Если JavaScript — это язык, то Node.js — это переводчик, который позволяет компьютеру его понимать. Без переводчика компьютер просто не поймёт, что ему говорят.

Установка ​

  1. Перейди на nodejs.org
  2. Скачай версию LTS (Long Term Support) — она слева с зелёной кнопкой
  3. Запусти установщик
  4. Нажимай «Next» на всех шагах, ничего не меняя
  5. На шаге «Tools for Native Modules» — можно не ставить галочку (она не нужна для вайб-кодинга)
  6. Нажми «Install» → «Finish»
  7. Перезапусти VS Code (закрой и открой заново)

Почему перезапуск важен

VS Code запоминает PATH при запуске. Если ты установил Node.js, но не перезапустил VS Code — терминал внутри VS Code не увидит Node.js. Просто закрой VS Code и открой заново.

Проверка ​

Открой терминал в VS Code (Ctrl+`) и введи:

bash
node -v

Ожидаемый результат — номер версии:

v22.14.0

Также проверь npm (менеджер пакетов, устанавливается вместе с Node.js):

bash
npm -v

Ожидаемый результат:

10.9.2

Если обе команды показали версии — всё работает.

Git — контроль версий ​

Зачем нужен ​

Git запоминает каждое изменение в файлах проекта. Если ты (или ИИ) что-то сломал — можно откатиться к рабочей версии. Также Git нужен для:

  • Загрузки проекта на GitHub
  • Деплоя на Vercel (Vercel берёт проект из GitHub)
  • Работы в команде

Установка ​

  1. Перейди на git-scm.com
  2. Нажми Download for Windows (или Mac)
  3. Запусти установщик
  4. На всех шагах можно оставить настройки по умолчанию — просто нажимай Next
  5. Единственный момент: на шаге «Choosing the default editor» можешь выбрать Visual Studio Code вместо Vim
  6. Нажми Install → Finish
  7. Перезапусти VS Code

Проверка ​

bash
git --version

Ожидаемый результат:

git version 2.47.1.windows.1

Первоначальная настройка ​

Git нужно один раз представиться — сказать своё имя и email. Это нужно для подписи изменений:

bash
git config --global user.name "Твоё Имя"
git config --global user.email "твой@email.com"

Например:

bash
git config --global user.name "Andrey"
git config --global user.email "andrey@example.com"

Это делается один раз и работает для всех проектов.

Python — для ботов и скриптов ​

Зачем нужен ​

Python нужен, если ты планируешь:

  • Создавать Telegram-ботов
  • Писать скрипты автоматизации
  • Работать с данными, парсерами, API

Если пока планируешь делать только сайты — Python можно поставить позже.

Установка ​

  1. Перейди на python.org/downloads
  2. Нажми жёлтую кнопку Download Python 3.x.x
  3. Запусти установщик
  4. ОБЯЗАТЕЛЬНО поставь галочку «Add Python to PATH» — она внизу окна установщика
  5. Нажми Install Now

Главная ошибка новичков

Если не поставить галочку «Add Python to PATH» — Python установится, но терминал его не найдёт. Придётся переустанавливать. Эту галочку очень легко пропустить — она маленькая и внизу экрана. Обязательно поставь!

Проверка ​

bash
python --version

Ожидаемый результат:

Python 3.13.2

Также проверь pip (менеджер пакетов для Python):

bash
pip --version

Если обе команды работают — Python готов.

Создание рабочей структуры ​

Теперь организуем папки. Открой терминал и создай структуру:

Windows:

bash
mkdir C:\Projects

Mac / Linux:

bash
mkdir ~/Projects

Все твои проекты будут жить здесь. Каждый новый проект — отдельная папка внутри:

📁 Projects/
  📁 my-first-site/       ← первый сайт
  📁 telegram-bot/        ← бот
  📁 landing-page/        ← лендинг для клиента

Правило

Никогда не создавай проект на рабочем столе или в папке «Загрузки». Всегда — в Projects/, в своей папке. Так ничего не потеряется.

Чеклист ​

После выполнения этой главы у тебя должно работать:

  • [ ] VS Code открывается
  • [ ] Терминал в VS Code работает (Ctrl+`)
  • [ ] node -v показывает версию
  • [ ] npm -v показывает версию
  • [ ] git --version показывает версию
  • [ ] python --version показывает версию (опционально)
  • [ ] Папка Projects/ создана

Что дальше?

Рабочее место готово! В следующей главе установим Claude Code — самый мощный ИИ-помощник для вайб-кодинга.