Инструменты

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 build

npm run build уместна для проекта, где такой скрипт существует. В Python-проекте набор проверок будет другим. Перед запуском посмотрите инструкции репозитория. Если проверка упала, сохраните точное сообщение и попросите агента объяснить причину. Не принимайте исправление, которое просто отключило проверку. После работы ещё раз просмотрите полный diff, включая конфигурацию и тексты.

Когда использовать панель, а когда терминал

Панель удобна, когда вы читаете конкретный файл и хотите видеть предлагаемые изменения рядом с ним. Терминал лучше подходит для команд проекта, поиска и диагностики. Оба пути могут участвовать в одном цикле: задача в панели, проверка в терминале, просмотр diff в редакторе. Не имеет значения, где набран запрос, если у вас есть понятная папка и объективная проверка.

Выбирайте интерфейс под действие:

  • Откройте панель для правки видимого файла.
  • Запустите терминал для команды проекта.
  • Сравните результат в Source Control.
  • Сохраните правило в репозитории.

Официальное руководство предупреждает: расширение само по себе не добавляет claude в PATH. Если хотите запускать CLI во встроенном терминале, установите его отдельно по документации и убедитесь, что команда доступна после перезапуска окна. Если терминал работает, но панель не открывается, проверьте расширение и вход. Исходники проекта здесь ни при чём. Разделяйте эти проверки.

Что сохранить для следующей сессии

Запишите в проекте одну короткую инструкцию: команды запуска, папки основных компонентов, источник данных и правила проверки. Когда заканчиваете изменение, зафиксируйте, какой экран был проверен и что осталось открытым. Это помогает продолжить работу после перерыва и не просить агента заново угадывать контекст. Я строю обучение на собственном проекте вокруг этого цикла: постановка задачи, поиск связей, правка, diff, проверка.

Если работа связана с числами или правами доступа, добавьте тестовый пример. Для CRM это может быть сделка с известной площадью и ценой, для клиники запись в определённый час. Тогда ошибка станет заметна до публикации. Не отдавайте инструменту решение о деплое только потому, что файл выглядит аккуратно в редакторе.

Частые вопросы

Достаточно ли установить расширение для команды claude?

Нет. Панель использует встроенную часть, а терминальной команде нужна отдельная установка CLI. Это указано в документации Anthropic.

Видит ли агент весь компьютер?

Рабочий доступ зависит от настроек и разрешений. Открывайте только нужный проект, проверяйте запросы на доступ и не держите ключи в его папке.

Можно ли принять правку без сборки?

Для мелкого текста иногда хватает локального просмотра, но сначала узнайте правила конкретного репозитория. Изменения данных и поведения требуют соответствующих проверок.

Где лучше смотреть результат?

В diff и на работающей странице. Ответ агента объясняет его намерение, а фактический результат виден в файлах и интерфейсе.

Если редактор уже открыт и нужна первая контролируемая правка, приходите с конкретной задачей. Разберём путь от запроса до проверенного экрана.