VS Code Claude: как работать с Claude Code в редакторе
Тому, кто ведёт сайт или бота в VS Code и хочет проверять правки агента
Настроите редактор и проведёте одну контролируемую правку
7 мин
Открыт редактор, но неясно, что именно видит агент и какие файлы он поменял
Рабочая папка определена, изменения показаны в diff и подтверждены проверкой
Настройка Claude Code в VS Code и первый цикл работы: папка проекта, запрос, просмотр изменений и проверка сборки.
В VS Code с Claude Code работают через отдельную панель или команду claude во встроенном терминале. Начните с выбора удобного для вашей задачи способа.
Они связаны с одним инструментом, но устанавливаются по‑разному. В документации Anthropic для VS Code, проверенной 25 октября 2026 года, сказано, что расширение содержит собственную копию CLI для панели, а запуск команды в терминале требует отдельной установки. Здесь речь об организации работы в редакторе; общие возможности агента разобраны в основной статье.
Что открыть до разговора с агентом
Откройте корневую папку проекта целиком. Проверьте, что в ней есть package.json или другой признак нужного приложения, а терминал показывает тот же путь. Затем запустите git status --short. Если уже есть незавершённые правки, запишите их список. Иначе после ответа агента будет трудно понять, что он создал, а что оставалось с прошлого дня. Секреты и архивы с доступами не должны лежать в открытом репозитории.
Сам редактор не заменяет понимание структуры. Для изменения одной формы найдите компонент, обработчик отправки и тип данных, который они используют. Попросите агента показать связи до редактирования. На моих клиентских сайтах поле, отображённое на странице, часто участвует и в административной карточке, и в отчёте. Локальная правка текста может быть безопасной, а переименование поля требует проверки всех мест использования.
Перед первым запросом в панели:
- Откройте корень нужного проекта.
- Найдите файл экрана и общий компонент.
- Проверьте исходный сценарий.
- Назовите файлы, которые агенту можно менять.
| Перед началом | Зачем | Проверка |
|---|---|---|
| Корень репозитория | Агент видит правильный проект | Путь в терминале и проводнике |
| Состояние Git | Видно чужие незавершённые правки | git status --short |
| Команда сборки | Есть объективная проверка | Скрипты в package.json |
| Источник данных | Изменение попадёт во все экраны | Поиск по имени поля |
Как поставить расширение
Откройте раздел Extensions в VS Code, найдите «Claude Code» от Anthropic и установите его по официальной инструкции. Документация на дату проверки требует VS Code 1.94.0 или новее и платный план Claude либо аккаунт Console. Если значок панели не появился, перезагрузите окно редактора через командную палитру. Перед вводом клиентских данных прочитайте условия доступа и использования сервиса. Официально Россия не в списке поддерживаемых стран; как это решают на практике, разбираю на встрече.
Не путайте расширение с похожими предложениями в магазине. Проверьте издателя и ссылку на документацию. При первом входе редактор попросит авторизацию; не копируйте ключ в файл проекта или в сообщение агенту. Если у вас уже есть терминальная установка, можете открыть встроенный терминал и проверить отдельную команду. Работа панели возможна и без терминальной команды, если выполнены условия доступа.
pwd
git status --short
rg --files | headПоследняя команда показывает первые файлы проекта в Bash или Zsh. В PowerShell используйте Get‑ChildItem, если rg не установлен. Пример проверяет рабочую папку; массовую обработку файлов он не выполняет. Если вывод не похож на нужный проект, остановитесь и откройте правильный каталог.
Режимы разрешений и просмотр плана
Индикатор режима находится под полем запроса. В режиме Plan агент изучает проект и предлагает шаги без правки файлов. В Manual он спрашивает разрешение на рискованные действия. В Edit automatically изменения большинства файлов применяются без отдельного вопроса; режим Auto проверяет большинство действий автоматически. Перед рабочей задачей посмотрите, какой режим выбран, и откройте план для чтения или правки до выполнения. Документация расширения описывает доступные режимы и показывает, где переключать их.
Чтобы указать точный контекст, добавьте файл через @: например, @src/form.tsx. Можно выделить строки в редакторе и нажать Alt+K на Windows или Option+K на Mac, чтобы вставить упоминание с диапазоном. Это лучше, чем просить агента угадать, какую форму вы имели в виду. При этом упоминание файла не заменяет поиск связанных обработчиков и типов.
После предложения агента:
- Откройте список изменённых файлов.
- Прочитайте diff каждого файла.
- Запустите проверку проекта.
- Пройдите сценарий на телефоне.
Как сформулировать первую задачу
Просьба «переделай сайт» слишком широка. Выберите одну измеримую правку, например исправить подпись поля в карточке сделки. Укажите текущее поведение, ожидаемое поведение и страницу проверки. Попросите сначала найти файл и связанные места. Затем согласуйте область изменений. После выполнения откройте diff прямо в редакторе: вы должны понимать каждую строку, даже если не писали её сами.
Если правите карточку сделки, назовите конкретную роль и ситуацию: «На мобильном экране менеджер должен видеть срок следующего действия; найди компонент и покажи, где поле сохраняется». Так агенту проще найти связанные файлы до изменения интерфейса. Полный цикл первой задачи, включая diff и инструкции проекта, разобран в основной статье о Claude Code.
| Формулировка | Возможная проблема | Более проверяемый запрос |
|---|---|---|
| «Исправь CRM» | Неясна область | «Найди сохранение срока в карточке» |
| «Сделай удобно» | Нет критерия | «Покажи срок без горизонтальной прокрутки на 390 px» |
| «Ускорь сайт» | Непонятна метрика | «Найди внешние ресурсы в первом экране» |
| «Обнови всё» | Много рискованных правок | «Предложи список зависимостей до установки» |
Как проверить предложенную правку
Просмотрите файлы в панели Source Control, затем diff. Убедитесь, что агент не удалил соседнюю логику и не изменил конфигурацию ради небольшой задачи. Запустите существующие проверки: сборку, тесты или локальный просмотр страницы. Отдельно откройте нужный экран на узкой ширине. Проходящая сборка не гарантирует, что подпись видна клиенту или что кнопка ведёт туда, куда должна.
git diff --stat
npm run buildnpm run build уместна для проекта, где такой скрипт существует. В Python-проекте набор проверок будет другим. Перед запуском посмотрите инструкции репозитория. Если проверка упала, сохраните точное сообщение и попросите агента объяснить причину. Не принимайте исправление, которое просто отключило проверку. После работы ещё раз просмотрите полный diff, включая конфигурацию и тексты.
Когда использовать панель, а когда терминал
Панель удобна, когда вы читаете конкретный файл и хотите видеть предлагаемые изменения рядом с ним. Терминал лучше подходит для команд проекта, поиска и диагностики. Оба пути могут участвовать в одном цикле: задача в панели, проверка в терминале, просмотр diff в редакторе. Не имеет значения, где набран запрос, если у вас есть понятная папка и объективная проверка.
Выбирайте интерфейс под действие:
- Откройте панель для правки видимого файла.
- Запустите терминал для команды проекта.
- Сравните результат в Source Control.
- Сохраните правило в репозитории.
Официальное руководство предупреждает: расширение само по себе не добавляет claude в PATH. Если хотите запускать CLI во встроенном терминале, установите его отдельно по документации и убедитесь, что команда доступна после перезапуска окна. Если терминал работает, но панель не открывается, проверьте расширение и вход. Исходники проекта здесь ни при чём. Разделяйте эти проверки.
Что сохранить для следующей сессии
Запишите в проекте одну короткую инструкцию: команды запуска, папки основных компонентов, источник данных и правила проверки. Когда заканчиваете изменение, зафиксируйте, какой экран был проверен и что осталось открытым. Это помогает продолжить работу после перерыва и не просить агента заново угадывать контекст. Я строю обучение на собственном проекте вокруг этого цикла: постановка задачи, поиск связей, правка, diff, проверка.
Если работа связана с числами или правами доступа, добавьте тестовый пример. Для CRM это может быть сделка с известной площадью и ценой, для клиники запись в определённый час. Тогда ошибка станет заметна до публикации. Не отдавайте инструменту решение о деплое только потому, что файл выглядит аккуратно в редакторе.
Частые вопросы
Достаточно ли установить расширение для команды claude?
Нет. Панель использует встроенную часть, а терминальной команде нужна отдельная установка CLI. Это указано в документации Anthropic.
Видит ли агент весь компьютер?
Рабочий доступ зависит от настроек и разрешений. Открывайте только нужный проект, проверяйте запросы на доступ и не держите ключи в его папке.
Можно ли принять правку без сборки?
Для мелкого текста иногда хватает локального просмотра, но сначала узнайте правила конкретного репозитория. Изменения данных и поведения требуют соответствующих проверок.
Где лучше смотреть результат?
В diff и на работающей странице. Ответ агента объясняет его намерение, а фактический результат виден в файлах и интерфейсе.
Если редактор уже открыт и нужна первая контролируемая правка, приходите с конкретной задачей. Разберём путь от запроса до проверенного экрана.