NagibakaFrontend, боты, автоматизация

Урок

2.2 ACP-режим IDE. Интеграция Claude Code в VS Code, Webstorm(PyCharm и другие продукты Jetbrains), Zed

Написано человеком0% LLM

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

В-целом, вы можете запускать Claude Code прямо там, но это не всегда лучший способ интеграции. Обычно для всех IDE есть плагины или расширения, для более тесной интеграции, которая дает больше возможностей. Для подключения кодовых агентов существует специальный универсальный протокол ACP.

Сегодня мы рассмотрим подключение ИИ-агента в популярные среды для разработки.

Какую проблему решает ACP-протокол?

ACP(Agent Communication/Client Protocol) - это универсальный протокол общения ИИ-агента со средой разработки(IDE) или клиентским приложением.

00230-529666676.png

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

Сейчас, если IDE поддерживает ACP. -то вы можете туда интегрировать и Claude Code, и Codex, и OhMyPi, и OpenCode абсолютно одинаковым способом.

В идеале, вам нужно найти расширение для вашей IDE с реализацией протокола ACP, если он не поддерживается из коробки.

Подключение Claude Code к VS Code

Тут все просто. Официальное расширение работает и с подпиской и с нашими локальными моделями.

Первый вариант: только под Claude Code

  1. Заходим сюда https://code.claude.com/docs/en/vs-code

  2. Нажимаем Install for VS Code

  3. После нажатия у нас открывается VS Code и жмякаем кнопку Install

image.png

Вуаля! В правой боковой панели у нас появляется новый таб с Claude Code, в котором мы можем писать свои промты.

image.png

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

image.png

Готово! Можно кодить!

Второй вариант: универсальный для популярных агентов через ACP

Для этого варианта вам необходимо скачать расширенние VSCode ACP от Omer C

image.png

Слева появится иконка расширения внизу и по нажатию на нее появится панель агента слева, где можно выбрать ИИ-агента и начать диалог.

image.png

Этот ACP поддерживает следующих агентов:

image.png

Подключение Claude Code к Webstorm(PyCharm и другие продукты Jetbrains)

У компании JetBrains есть целый зоопарк редакторов кода под разные языки и платформы. Прелесть в том, что расширения для них совместимы для разных редакторов кода. Поэтому вы можете использовать одно и то же расширение для Webstorm и PyCharm ,например.

Claude Code plugin работает со следующими продуктами JetBrains IDE:

  • IntelliJ IDEA

  • PyCharm

  • Android Studio

  • WebStorm

  • PhpStorm

  • GoLand

На официальном сайте есть инструкция https://code.claude.com/docs/en/jetbrains

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

Заходим в настройки в раздел Plugins. Официальный плагин Claude Code(Beta) с 4 млн скачиваний обновлялся год назад и есть более свежий и популярный Claude Code with GUI от yhk1038

Давайте установим его.

Жмем Install-Apply-Ok.

image.png

Вот так он выглядит и активируется в правой боковой панели. А из левой доступны сессии.

image.png

Теперь перейдем к последнему редактору.

Подключение Claude Code к редактору Zed через ACP

Zed - это относительно новая и очень быстрая IDE, написанная на быстром языке Rust, нацеленная на разработку при помощи ИИ-агентов. В этом редакторе, интеграция с ИИ наиболее глубокая.

Сейчас, это мой основной инструмент. В нем удобно одновременно работать сразу с несколькими проектами и сессиями. Также есть крутая фича - добавить в проект два разных репозитория и делать в них правки одновременно. Это может быть полезно для фронта и бэка, если они находятся в разных репозиториях.

Заходим в настройки.

Можно подключить агентов через API-ключи, но нас интересует подключение именно Claude Code с его обвязкой для работы с кодом.

Для этого находим раздел AI в настройках и жмем External Agents

image.png

У меня уже подключены 3 агента, а вам нужно нажать Add agent -> Install from registry

image.png

В поиск вбиваете "claude" и жмете Install. Готово.

image.png

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

Важное примечание:

В настройках еще найдите пункт Restore on startup, чтобы у вас настройки не слетали. И из приложения нужно выходить через Cmd+Q, иначе настройки также могут слететь,

image.png

У меня это выглядит так - справа проекты(сессии)+чат, слева - дерево файлов и окно редактирования файла.

image.png

На этом всё!