Интеграция с VS Code

📚 Навигация по серии: В предыдущей статье 07 · Первый запуск мы успешно выполнили первый пример в терминале. В этой статье мы перенесем Claude Code в VS Code — всё те же возможности, но уже в графическом интерфейсе.

Когда я только перешел на расширение для VS Code, я совершил довольно глупую ошибку.

В терминале claude работал отлично. Я установил расширение, чтобы попробовать графический интерфейс, открыл пустую папку и искал официальный «значок Spark» (иконку в виде искры на панели инструментов, которая служит входом в Claude Code в IDE). Я думал, что что-то сломалось, удалял, переустанавливал, перезапускал, чистил кэш, потратил минут двадцать. И только прочитав документацию, я понял — этот значок появляется только тогда, когда у вас открыт конкретный файл, просто открыть папку недостаточно. Искать значок в пустом рабочем пространстве можно целую вечность.

Проще говоря, интеграция с VS Code не сложная, но её логика взаимодействия отличается от терминала, и некоторые «очевидные» вещи могут застопорить вас в самом начале. В этой статье мы заранее отметим все эти подводные камни.

Прочитав эту статью, вы получите:

• Полные шаги по установке расширения Claude Code в VS Code (включая форки типа Cursor) и список действий для решения проблемы «не могу найти значок».
• Понимание трех главных преимуществ графического интерфейса: side-by-side diff (построчный просмотр изменений), упоминания через @ и утверждение плана.
• Сравнительную таблицу «Расширение vs CLI» и набор полезных горячих клавиш.

---

01 Для начала: Как соотносятся Расширение и CLI

«Я уже умею пользоваться claude в терминале, нужно ли мне устанавливать расширение?» Короткий ответ: Расширение не заменяет CLI, оно просто добавляет к нему графический интерфейс. При установке расширения автоматически устанавливается и CLI. Они используют один и тот же файл конфигурации ~/.claude/settings.json; история диалогов сохраняется, хотя и не синхронизируется в реальном времени — если вы начали разговор в расширении, вы можете продолжить его в терминале с помощью claude --resume.

Аналогия: Одна и та же кухня, два окна выдачи. CLI — это заказ прямо на кухню: быстро, есть всё меню, любые возможности. Расширение — это официант в зале: он приносит вам красивое меню с картинками, наглядно показывает процесс, но некоторые «секретные блюда» доступны только на кухне. Кухня одна, блюда одни и те же.

Когда какой инструмент использовать? Официальная документация предоставляет следующее сравнение возможностей:

Функция	CLI (Терминал)	Расширение для VS Code
Команды и навыки (skills)	Все	Подмножество (введите /, чтобы увидеть доступные)
Конфигурация MCP серверов	Полная	Частичная (добавляются через CLI, управляются через /mcp в панели)
Контрольные точки (Checkpoints)	Поддерживаются	Поддерживаются
Bash-команды через !	Поддерживаются	Не поддерживаются
Автодополнение Tab	Поддерживается	Не поддерживается
Side-by-side diff, выделение кода как контекст	Требует подключения к IDE	Встроенная функция, работает сразу

Одним предложением: Для работы с кодом и проверки изменений (работа с файлами) расширение гораздо удобнее; а вот запуск bash-команд (например, !ls) и автодополнение по Tab есть только в CLI. Обычно основная работа ведется в расширении, а если нужно выполнить пачку команд или использовать специфичные команды CLI — просто откройте встроенный терминал и наберите claude. История сохраняется, переход бесшовный.

💡 Краткий итог: Расширение и CLI — это два интерфейса одного движка, они разделяют историю и настройки; переключайтесь между ними по ситуации, не нужно выбирать что-то одно.

---

02 Установка: Три способа и решение проблемы с пропавшим значком

Перед установкой: проверьте версию

Официальное строгое требование: VS Code версии 1.98.0 или выше. Если версия ниже, расширение либо не установится, либо не будет работать (посмотреть версию можно в меню «Справка → О программе»). При первом запуске расширения потребуется войти в аккаунт Anthropic; если ваша компания использует сторонних провайдеров, таких как Bedrock или Vertex AI, способ конфигурации будет другим (об этом в конце статьи).

Три способа установки

Способ первый: Поиск в маркетплейсе (Самый надежный, рекомендуется новичкам)

В VS Code нажмите Cmd+Shift+X (на Mac) или Ctrl+Shift+X (на Windows/Linux), чтобы открыть панель расширений. Введите в поиске Claude Code и нажмите Установить.

На картинке выше показано, как выглядит поиск Claude Code в панели расширений: выделенная красной рамкой строка «Claude Code for VS Code» с синей галочкой от Anthropic — это официальное расширение. Устанавливайте именно его.

Здесь кроется самая частая ловушка для новичков: по запросу Claude Code появится куча расширений с похожими названиями. Обязательно проверьте, что разработчик — Anthropic, не установите подделку.

Способ второй: Установка по прямой ссылке

Если у вас открыт VS Code, клик по ссылке vscode:extension/anthropic.claude-code сразу откроет страницу установки (для Cursor замените vscode: на cursor:).

Способ третий: Нестандартные редакторы / Если не устанавливается

Расширение можно установить и в форках VS Code (например, Cursor, Devin Desktop, Kiro) — ищите Claude Code в их панелях расширений или устанавливайте из реестра Open VSX. Если расширение упорно не хочет устанавливаться, не отчаивайтесь — официальный запасной план — просто запускать claude во встроенном терминале.

Для пользователей из некоторых стран (например, Китая или России): установка, авторизация и дальнейшая работа требуют соединения с серверами Anthropic, для чего понадобится VPN (магия), точно так же, как и для терминальной версии.

Установили, но не можете найти значок? Вот чек-лист

Это тот самый подводный камень из начала статьи. После установки расширение не открывает окно само по себе, панель нужно вызвать. Самый быстрый способ: сначала откройте любой файл, а затем нажмите на значок Spark (иконка искры) в правом верхнем углу редактора на панели инструментов.

На картинке выше отмечены все три способа вызова: значок Spark в правом верхнем углу (②, самый быстрый, но виден только при открытом файле), значок Spark на боковой панели активности (①, есть всегда), и надпись ✱ Claude Code в строке состояния внизу (③, доступно и без открытых файлов).

Главное правило: значок Spark в углу появляется ТОЛЬКО когда открыт файл, просто открыть папку недостаточно. Если вы всё равно не видите его, проверьте по списку:

Проблема	Что делать
Нет значка в правом верхнем углу	Сначала откройте файл (не просто папку)
Файл открыт, но значка нет	Убедитесь, что версия VS Code ≥ 1.98.0 (Справка → О программе)
Версия подходит	В палитре команд выполните Developer: Reload Window (Перезагрузить окно)
Перезагрузка не помогла	Временно отключите другие ИИ-расширения (Cline, Continue и т.д.), возможен конфликт
Рабочее пространство в «Ограниченном режиме»	Расширение не работает в ограниченном режиме, разрешите доверие к рабочему пространству

Если значок Spark так и не нашелся, есть еще два запасных входа:

• Панель активности (вертикальный ряд иконок слева) — значок Spark там есть всегда, при нажатии открывается список диалогов.
• Строка состояния (в правом нижнем углу окна) — надпись ✱ Claude Code, ее можно нажать даже без открытых файлов, и лично мне этот способ кажется самым удобным, не нужно думать, открыт файл или нет. Также можно воспользоваться палитрой команд (Cmd+Shift+P / Ctrl+Shift+P) и набрать Claude Code.

При первом открытии панели появится экран входа. Нажмите Log in, пройдите авторизацию в браузере, и готово. (Если вы настроили ANTHROPIC_API_KEY, но вас всё равно просят войти, скорее всего, VS Code не подхватил переменные окружения терминала. Официальное решение — запускать VS Code из терминала командой code ., чтобы переменные передались).

💡 Краткий итог: При установке ищите разработчика Anthropic. Значок Spark в углу появляется только при открытом файле — если его нет, откройте файл или используйте вход через строку состояния в правом нижнем углу.

---

03 Вид diff: Сравнивайте изменения лицом к лицу, прежде чем соглашаться

Это функция, из-за которой многие и влюбляются в расширение. В терминале при изменении файлов diff (различия) рисуется текстовыми символами, и если изменений много, это трудно читать. В расширении используется встроенный инструмент сравнения (diff view) VS Code — с красным и зеленым выделением удалений и добавлений, всё выглядит так же привычно, как при просмотре Git diff.

Аналогия: Согласование контракта в режиме правок. Другая сторона возвращает вам отредактированный контракт: слева оригинал, справа измененная версия, все правки четко выделены. Вы не подписываете вслепую, а проверяете каждый пункт. Claude точно так же показывает изменения кода и просит разрешения; у вас есть три варианта: Принять, Отклонить, или сразу объяснить, как нужно переделать.

Есть еще одна полезная деталь, которую начинаешь замечать только со временем: перед тем как нажать «Принять», вы можете вручную отредактировать предложенный Claude код прямо в правой части окна diff. Если вы попросили переписать функцию на 200 строк, и Claude внес 7-8 изменений, но вы заметили, что в одном месте он ошибся со знаком в условии, вы можете тут же поправить это справа и принять — это сэкономит целый цикл диалога.

💡 Краткий итог: Окно diff показывает каждое изменение. Внимательно смотрите, исправляйте ошибки на месте и только потом принимайте — это намного безопаснее, чем текстовый diff в терминале.

---

04 Упоминания через @ и выделение кода: Скармливаем точный контекст

Самая большая потеря времени при работе с Claude — это когда он «не понимает, о каком коде вы говорите» и начинает гадать. Расширение предлагает два способа передать контекст быстро и точно.

Способ первый: Упоминание файлов и папок через @

В поле ввода напечатайте @, а затем имя файла или папки. Claude прочитает именно этот материал. Поддерживается нечеткий поиск (fuzzy match), не обязательно писать имя целиком:

> Объясни логику в @auth (автоматически найдет auth.js, AuthService.ts и т.д.)
> Что находится в папке @src/components/? (для папок обязательно добавляйте слэш / в конце)

Аналогия: Отправка нужных документов в чат перед совещанием. Вместо того чтобы описывать словами «ну тот файл, который отвечает за вход», вы просто скидываете ссылку на него через @. Это убережет Claude от долгого поиска по всему проекту. Для огромных PDF-файлов можно даже указать диапазон страниц (например, страницы 1-10), чтобы не скармливать всю книгу.

Способ второй: Выделение кода — Claude видит автоматически

Этот способ еще проще, чем @: вы просто выделяете участок кода в редакторе, и Claude немедленно получает его как контекст. Под полем ввода появится надпись «Выбрано XX строк» (Selected XX lines). Теперь вы можете просто спросить «Почему здесь возникает ошибка?», и он поймет, о чем речь.

Несколько полезных фишек:

• Вставка ссылки с номерами строк: Нажмите Option+K / Alt+K, и в поле ввода автоматически вставится ссылка вроде @app.ts#5-10 с точным путем и номерами строк (фокус должен быть в редакторе).
• Временно скрыть выделенное от Claude: Нажмите на значок «индикатора выбора» под полем ввода. Когда появится иконка перечеркнутого глаза, это будет означать, что выделенный текст скрыт от Claude — полезно, если вы выделяете текст просто чтобы скопировать его.
• Прикрепление файлов перетаскиванием: Удерживая Shift, перетащите файл в поле ввода; чтобы удалить вложение, нажмите крестик ×.

Например, вы ищете баг со стилями, где CSS вложен на пять уровней. Просто выделите подозрительный блок и напишите «Почему это не работает?». Буквально за пару итераций Claude поймет, что виновато свойство overflow: hidden у родителя, которое обрезает ребенка. Описывать такую вложенность словами пришлось бы очень долго.

⚠️ По умолчанию выделенный текст и открытый файл отправляются Claude как контекст. Для конфиденциальных файлов (например, .env) официальная документация рекомендует добавить правило запрета Read — если файл попадает под правило, он не будет отправлен Claude (см. официальную документацию для подробностей).

💡 Краткий итог: Используйте @ для ссылок на файлы и выделение кода для быстрого контекста — устраните главную проблему «он не понял, где именно».

---

05 Утверждение плана: Пусть он сначала напишет план, а вы его согласуете

Эта функция, пожалуй, дает самый большой прирост к удобству по сравнению с терминалом. Начнем с режимов доступа: нажмите на индикатор режима под полем ввода, чтобы переключить его. В Claude Code есть несколько уровней:

Режим	Поведение Claude	Когда использовать
Обычный (Normal) (По умолчанию)	Спрашивает разрешение перед каждым действием	Незнакомая задача, нужен полный контроль
Режим планирования (Plan Mode)	Сначала описывает, что собирается делать, и ждет вашего одобрения	Большие изменения, множество файлов, нужно оценить концепцию
Автоматический (Auto-accept)	Вносит изменения без спроса	Доверенные, рутинные массовые правки

Также есть четвертый режим bypassPermissions (Обход всех разрешений), который включается в настройках параметром allowDangerouslySkipPermissions. Он предназначен только для изолированных песочниц, использовать его в повседневной работе не рекомендуется.

Аналогия: Как стажер задает вопросы. Обычный режим — это «спрашивать перед каждым шагом», автоматический — «дать полную свободу». Режим планирования — самый интересный, стажер приносит вам план «я собираюсь сделать вот так», и только после вашего кивка приступает к работе.

В VS Code режим планирования дает то, чего нет в терминале: Claude автоматически откроет свой план как Markdown-документ, и вы сможете оставлять комментарии (inline annotations) прямо в нем. Вам не нужно писать в чат размытое «Второй шаг неправильный», вы можете прямо в документе плана напротив «Шаг 2» написать: «Не трогай базу данных, сначала добавь кэширование». Claude учтет это замечание перед тем, как начнет работу. Это гораздо точнее устных замечаний.

На картинке выше показан Markdown-документ плана: Claude расписывает каждый шаг, вы добавляете к «Шагу 2» комментарий (например, «Не трогай базу данных, сначала добавь кэширование в памяти»), и Claude интегрирует это замечание в план до того, как начнет писать код.

Хотите сделать его режимом по умолчанию? Измените параметр claudeCode.initialPermissionMode в настройках на plan. Хорошая привычка — если предстоят изменения в нескольких файлах на 50 и более строк, всегда переключайтесь в режим планирования. Частая ошибка: включить авто-режим для скорости, попросить добавить логирование в один модуль, а Claude заодно «оптимизирует» импорты в пяти других файлах, и потом вам придется потратить десять минут, разбираясь, что именно он натворил. Крупные изменения всегда сначала просматривайте в виде плана — пресечь ошибки на этапе проектирования гораздо проще, чем разгребать последствия.

💡 Краткий итог: Режим планирования = сначала план, потом дело. Вы можете комментировать шаги прямо в Markdown-документе — используйте его перед большими многофайловыми изменениями, это спасет вас от необходимости всё переделывать.

---

06 Практика: 10 минут на прохождение полного цикла в GUI

Давайте пройдем весь процесс с нуля. Следуйте каждому шагу, чтобы проверить, правильно ли всё установлено и поняли ли вы суть.

Шаг 0: Создадим минимальный проект для тренировки

Не используйте рабочий проект, достаточно пустой папки с одним файлом. Запустите в терминале:

mkdir vscode-claude-demo && cd vscode-claude-demo
printf 'def greet(name):\n    return "Hello " + name\n\nprint(greet("world"))\n' > demo.py
code .

Ожидаемый результат: VS Code откроет эту папку, и в проводнике слева вы увидите файл demo.py. (Если у вас не установлена команда code, просто откройте эту папку в VS Code вручную).

Шаг 1: Откройте панель Claude и войдите в аккаунт

Откройте файл demo.py (запомните, нужно обязательно открыть файл), нажмите на иконку Spark в правом верхнем углу. Если появится окно авторизации, нажмите Log in и пройдите процесс в браузере.

Ожидаемый результат: Справа появится панель чата Claude Code, и сообщение о том, что вы не вошли в систему, пропадет.

Шаг 2: Выделите код + попросите изменить, посмотрите inline diff

Выделите две строки функции greet в файле demo.py. Под полем ввода должно появиться сообщение «Выбрано 2 строки». Теперь введите:

Переделай с использованием f-string и добавь аннотации типов.

Ожидаемый результат: Claude не станет спрашивать «какую функцию» (потому что получил контекст из выделения). Он сразу покажет side-by-side diff: справа return "Hello " + name изменится на return f"Hello {name}", добавятся типы. Внизу появится диалог Принять / Отклонить (Accept / Reject). Внимательно просмотрите изменения и нажмите Accept.

Шаг 3: Попробуйте режим планирования (Plan Mode)

Переключите режим на Plan Mode в нижней части поля ввода и отправьте более объемный запрос:

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

Ожидаемый результат: Claude не станет сразу править файл. Он откроет Markdown-документ с планом (например, предложение импортировать argparse). Вы можете одобрить его или оставить комментарий прямо в документе, и только после этого он приступит к выполнению. Если вы дошли до этого шага — вы успешно опробовали три главные фишки: side-by-side diff, передачу контекста и режим планирования.

---

07 Полезное: Горячие клавиши и «Переход в CLI»

Набор популярных горячих клавиш (от разработчиков, с учетом платформ):

Действие	Горячая клавиша	Описание
Переключение фокуса (Редактор ↔ Claude)	Cmd+Esc / Ctrl+Esc	Применяется туда, где сейчас фокус
Открыть диалог в новой вкладке	Cmd+Shift+Esc / Ctrl+Shift+Esc	Удобно для параллельной работы
Вставить ссылку через @	Option+K / Alt+K	Фокус должен быть в редакторе
Восстановить закрытый сеанс	Cmd+Shift+T / Ctrl+Shift+T	Включено по умолчанию
Начать новый диалог	Cmd+N / Ctrl+N	Отключено по умолчанию, нужно включить enableNewConversationShortcut в настройках

В macOS Tahoe+ есть проблема: системный «Игровой оверлей» перехватывает Cmd+Esc. Зайдите в «Системные настройки → Клавиатура → Сочетания клавиш → Игровой контроллер» и снимите галочку, или переназначьте шорткат «Claude Code: Focus input» на другую комбинацию.

Хотите вернуться к классическому CLI? Откройте встроенный терминал (Cmd+` / Ctrl+`) и запустите claude — CLI автоматически подключится к VS Code, и вы всё равно сможете использовать встроенный diff (внешний терминал подключается вручную через /ide). Либо в настройках поставьте галочку Use Terminal (useTerminal), чтобы расширение изначально запускалось в режиме терминала.

Для корпоративных пользователей (Bedrock / Vertex AI / Foundry): Сначала включите настройку Отключить запрос авторизации (disableLoginPrompt), затем настройте ~/.claude/settings.json согласно инструкциям провайдера (обращайтесь к официальной документации).

💡 Краткий итог: Cmd+Esc для переключения фокуса — самая частая комбинация, Option+K для ссылок; соскучились по терминалу — просто введите claude или поставьте галочку useTerminal. Выбор между графикой и командной строкой всегда за вами.

---

08 Заключение

В этой статье мы перенесли Claude Code из терминала в VS Code. Основные выводы:

• Расширение ≠ замена CLI: Это два интерфейса одного движка, которые делят общую историю и настройки. Пишите код в расширении, а если нужны эксклюзивные фишки терминала — переключайтесь туда.
• Главная проблема при старте — найти значок: Ищите разработчика Anthropic. Значок Spark появится, только если открыть файл. Если не нашли — используйте строку состояния внизу.
• Три преимущества графического интерфейса: Side-by-side diff (нагляднее и можно править на месте), упоминания @ / выделение (точный контекст), и режим планирования (сначала план с возможностью комментирования, потом выполнение).

Теперь вы можете самостоятельно установить расширение, проверять изменения через удобный diff, указывать контекст через выделение и @, а для крупных переделок использовать Plan Mode. Когда этот процесс станет привычным, Claude Code станет надежным помощником в вашем повседневном написании кода.

---

В следующей статье 09 · Интеграция с JetBrains мы обратимся к тем, чьим основным инструментом является IntelliJ IDEA, PyCharm или другая IDE от JetBrains. Там тоже есть нативный плагин. Посмотрим, чем он похож на расширение для VS Code, чем отличается, и разберем специфичные настройки для пользователей JetBrains.

---

Рекомендуется к прочтению

• Голосовой режим (Voice): проговаривайте промпты, а не печатайте
• Веб-версия и облако: Claude Code в браузере и телефоне
• Изображения и мультимодальность: прикрепите скриншот, и он всё поймет