VS Code + Claude: как собрать рабочее место вайбкодера
Claude Code отлично работает как отдельный терминальный инструмент, но у многих новичков есть привычная точка входа — VS Code. Хорошая новость: их можно и нужно использовать вместе. Показываю, как я собрал своё рабочее место, чтобы видеть код, файлы и общение с ИИ в одном окне, без переключения между десятком вкладок.
Зачем совмещать VS Code и Claude Code
Claude Code сам по себе работает в терминале — этого достаточно для многих задач. Но когда проект вырастает до десятков файлов, удобнее видеть структуру папок, открывать файлы одним кликом и следить за изменениями визуально. VS Code даёт это «зрение», а Claude Code — руки, которые пишут код. Вместе получается связка, где ты видишь весь проект и одновременно управляешь ИИ через простой текстовый диалог.
Шаг 1. Установи VS Code
Если у тебя его ещё нет — скачай с официального сайта code.visualstudio.com, установи как обычную программу. Никаких настроек на этом шаге не требуется, всё по умолчанию подходит для старта.
Шаг 2. Открой встроенный терминал
Всё взаимодействие с Claude Code происходит через терминал — и в VS Code он встроен прямо в окно редактора, не нужно открывать отдельное приложение.
⌨️ Как открыть терминал в VS Code:
- Сочетание клавиш
Ctrl + `(илиCmd + `на Mac) - Или через меню: Terminal → New Terminal
- Терминал появится внизу окна, рядом с файлами проекта
Шаг 3. Запусти Claude Code внутри этого терминала
Если Claude Code уже установлен (я разбирал установку в статье «Как установить Claude Code за 15 минут») — просто перейди в папку проекта и запусти его прямо во встроенном терминале VS Code. Дальше всё работает так же, как в обычном терминале, только файлы, которые правит ИИ, сразу видно и можно открыть рядом.
Шаг 4. Настрой удобный вид: файлы слева, терминал внизу
Стандартная раскладка VS Code уже подходит для этого: слева — дерево файлов проекта, снизу — терминал с диалогом с ИИ, в центре — открытый файл, который сейчас редактируется. Когда Claude Code меняет файл, VS Code автоматически подсвечивает изменения — это удобно, чтобы визуально видеть, что именно поменялось, без чтения диффов в терминале.
Таблица: что делает VS Code, а что — Claude Code
| Задача | Кто отвечает |
|---|---|
| Написание и правка кода | Claude Code (по твоим промптам) |
| Просмотр структуры проекта | VS Code (дерево файлов) |
| Просмотр изменений построчно | VS Code (подсветка и Git diff) |
| Запуск и тестирование проекта | Встроенный терминал (через команды) |
| Общение с ИИ на человеческом языке | Claude Code (в терминале) |
Полезные мелочи, которые упрощают жизнь
1. Расширение для подсветки синтаксиса под язык твоего проекта — VS Code предложит установить его автоматически, когда откроешь файл нужного типа.
2. Встроенный Git — VS Code показывает изменённые файлы отдельной вкладкой, это удобно, чтобы не терять контроль над тем, что правит ИИ.
3. Несколько терминалов одновременно — можно держать один терминал для Claude Code, другой для запуска проекта, переключаясь между вкладками.
💡 Совет для новичка
Не пытайся сразу разобраться со всеми функциями VS Code. Тебе на старте нужны только три вещи: дерево файлов слева, открытый файл в центре и терминал снизу. Остальное осваивается по мере необходимости.
Итог
VS Code и Claude Code не конкурируют, а дополняют друг друга: один даёт визуальный контроль над проектом, второй — делает саму работу по твоим командам. Связка занимает пять минут на настройку и сильно упрощает жизнь, особенно когда проект перестаёт быть однофайловым. Это именно то рабочее место, за которым я сам собираю свои проекты каждый день.
Хочешь разобраться с настройкой своего рабочего места пошагово?
→ Гайд «Сделай под себя» — пошаговая инструкция
→ Живые примеры, разборы и ответы на вопросы — в Telegram-канале: t.me/fizrukvibecode