Расширение Claude Code
VS Code стоит. Теперь добавим в него расширение Claude Code, которое превращает обычный редактор в AI-помощника. Установим, разберём интерфейс и научимся правильно общаться с Claude.
[ ШАГ 1: ОТКРЫТЬ МАГАЗИН РАСШИРЕНИЙ ]
- Открой VS Code
- Слева найди иконку с четырьмя квадратиками — Extensions (Расширения)
- Кликни на неё
Откроется панель поиска расширений.
Mac: Cmd + Shift + X
Windows: Ctrl + Shift + X
[ ШАГ 2: НАЙТИ И УСТАНОВИТЬ ]
- В поле поиска напиши Claude Code
- Найди расширение от Anthropic (официальное)
- Нажми синюю кнопку Install.
Установка займет несколько секунд. После этого появится иконка Claude — оранжевый логотип. Она может быть слева в боковой панели или справа вверху.
Убедись что устанавливаешь именно от Anthropic. Есть подделки с похожими названиями. Смотри на издателя, должно быть написано "Anthropic".
[ ШАГ 3: АВТОРИЗАЦИЯ ]
После установки нужно войти в свой аккаунт Anthropic. Заранее зарегистрируй его и оплати подписку.
и наш ассистент объяснит что делать
и оплатить подписку Anthropic из России
Как открыть панель Claude Code
Способ 1 — через Command Palette (рекомендую):
- Нажми
Cmd + Shift + P(Mac) илиCtrl + Shift + P(Windows) - Напиши: Claude Code: Open in Side Bar
- Нажми Enter — панель откроется справа
Способ 2 — через иконку:
- Найди иконку Claude (оранжевый логотип), она может быть в боковой панели слева или справа
- Напиши
/login.
Авторизация:
- В открывшейся панели нажми кнопку Sign In
- Откроется браузер — войди в свой аккаунт Anthropic (или создай новый)
- Подтверди доступ для VS Code
После этого вернись в VS Code — ты авторизован.
Если иконка Claude пропала или ты не можешь её найти, используй Command Palette (Cmd/Ctrl + Shift + P → "Claude Code: Open in sidebar").
Либо есть комбинация клавиш, на маке это:
Shift + Command + Escape
[ ШАГ 4: ПРОВЕРКА ]
Убедимся что всё работает:
- Открой панель Claude Code (иконка с оранжевым логотипом)
- Справа откроется чат, внизу поле для ввода текста
- Напиши: Привет
- Нажми Enter
Если Claude ответил — поздравляю, установка завершена!
[ ЕСЛИ ЧТО-ТО НЕ РАБОТАЕТ ]
Проблема: Claude не отвечает или показывает ошибку
- Проверь интернет — открой google.com. Если не грузится — проблема с сетью
- Проверь подписку — зайди на claude.ai, посмотри активна ли подписка Pro/Max
- Перезапусти VS Code — закрой полностью и открой заново
- Переустанови расширение — удали Claude Code и установи заново
Проблема: Кнопка Sign In не появляется
- Закрой VS Code полностью
- Открой заново
- Проверь качество сети и доступ к зарубежным сервисам
Проблема: браузер открылся, но авторизация не работает
- Убедись что входишь в тот же аккаунт Anthropic где есть подписка
- Если есть несколько аккаунтов — выйди из всех и войди в нужный
- Попробуй другой браузер
Если что-то пошло не так — не паникуй. РЕШАЕТСЯ ВСЁ. Если не получается, открой ChatGPT или Gemini, опиши проблему, скинь скриншотики. Когда голова закипит, перекури, или чайку попей. И опять за дело. Если дело в блокировках, уточни у ассистента что делать.
[ ЭЛЕМЕНТЫ ПАНЕЛИ ]
Сверху:
- Название текущего чата (появляется автоматически после первого сообщения)
В центре:
- Переписка с Claude
- Твои сообщения и его ответы
Внизу:
- Поле ввода — сюда пишешь запросы
- Индикатор контекста — показывает "XX% used" (сколько памяти разговора занято)
- Кнопка отправки (или просто Enter)
Напиши / в поле ввода — откроется меню со всеми действиями:
Conversations: новый чат, продолжить старый, очистить.
Manage Context: прикрепить файл, упомянуть файл
Settings: настройки, логин, статус
Это быстрый способ делать что угодно в Claude Code.
[ ТИПЫ ОТВЕТОВ CLAUDE ]
Claude отвечает по-разному в зависимости от того, что ты попросил:
Текстовый ответ
Просто текст. Объяснение, ответ на вопрос, совет.
Claude объясняет. Никаких файлов не меняется.
Создание файла
Claude показывает какой файл хочет создать и его содержимое.
Появится блок с зелёным фоном — это новый файл. Нужно подтвердить.
Изменение файла
Claude показывает diff: что было и что станет.
Появится блок где красным показано что удаляется, зелёным — что добавляется.
[ ПОДТВЕРЖДЕНИЕ ДЕЙСТВИЙ ]
Когда Claude хочет изменить файлы, он спрашивает разрешения. Появится диалоговое окно с вариантами:
Варианты ответа:
- Yes, and don't ask again — принять и автоматически принимать похожие действия
- Yes — принять, но спрашивать каждый раз
- No (keep planning) — отклонить и остановить процесс
Ещё внизу есть поле "Tell Claude what to do instead" — это чтобы вмешаться, не останавливая процесс (он сразу получит ответ и будет думать).
Всегда читай что Claude предлагает ПЕРЕД тем как подтвердить. Особенно первое время. Он иногда понимает не так, и лучше увидеть это сразу.
[ ИСТОРИЯ ЧАТОВ ]
Каждый разговор с Claude сохраняется.
Посмотреть историю:
- Напиши
/в поле ввода - Выбери "Resume conversation"
- Увидишь список прошлых разговоров (это можно сделать через меню наверху)
Когда начинать новый чат:
- Новая тема / новая задача
- Чат стал слишком длинным (Claude начинает "забывать")
- Хочешь начать с чистого листа
Напиши / → выбери "New conversation". Или через Command Palette: Cmd/Ctrl + Shift + P → "Claude Code: New Conversation".
[ SLASH-КОМАНДЫ ]
В поле ввода можно писать специальные команды, которые начинаются с /.
/clear — очистить контекст чата. Claude забудет всё что было раньше.
/compact — сжать историю чата вручную. Полезно перед важной задачей.
/attach — прикрепить файл к разговору. Claude увидит содержимое файла.
Внизу панели видно "XX% used" — это сколько памяти разговора занято. Когда доходит до ~95-100%, Claude автоматически сжимает историю. Но можно сделать это раньше самому через /compact.
[ КАК РАЗГОВАРИВАТЬ С CLAUDE ]
Чем конкретнее запрос — тем лучше результат.
Размыто:
Claude: "Какую страницу? О чём? Какой дизайн?"
Конкретно:
Claude делает именно это.
Ещё конкретнее:
Claude делает с точными параметрами.
[ ИТЕРАЦИИ ]
Не пытайся сделать идеально с первого раза. Это нормально — уточнять.
Пример разговора:
- Ты: Сделай кнопку "Отправить"
- Claude: делает кнопку
- Ты: Сделай её синей
- Claude: перекрашивает
- Ты: Добавь тень при наведении
- Claude: добавляет
Каждое сообщение уточняет предыдущее. Claude помнит весь разговор и понимает контекст.
Не начинай новый чат для каждого уточнения. Продолжай в том же. Иначе Claude потеряет контекст и придётся объяснять заново.
[ ЧЕГО ИЗБЕГАТЬ ]
Слишком общие запросы
Сделай сайт
Claude не знает какой. Лендинг? Магазин? Блог?
Много задач сразу
Сделай форму, добавь валидацию, подключи отправку и сделай анимацию
Лучше по одной. Так проще контролировать результат.
Предположения что Claude "сам поймёт"
Он поймёт по-своему. Это может не совпасть с тем, что ты имел в виду.
[ КОНТЕКСТ ]
Claude видит файлы в твоём проекте. Используй это.
Без контекста:
Добавь кнопку
Claude: "Куда? В какой файл? Какую кнопку?"
С контекстом:
Посмотри файл index.html и добавь туда кнопку "Подписаться"
Claude точно знает что делать.
[ ПРАКТИКА ]
Попробуй прямо сейчас:
1. Напиши Claude: Создай файл hello.html с заголовком "Привет!"
- Посмотри как выглядит предложение создать файл (зелёный блок). Нажми Accept.
2. Напиши: Добавь туда абзац с текстом "Это моя первая страница"
- Посмотри как Claude добавляет в существующий файл
3. Напиши: Сделай заголовок красным
- Посмотри как Claude понимает контекст
4. Напиши: Удали файл hello.html
- Подтверди удаление — нажми Accept
Четыре простых запроса — и ты уже чувствуешь как это работает.
[ ПРОВЕРКА ]
- Расширение Claude Code установлено и авторизовано
- Знаю где панель и как её открыть
- Понимаю систему подтверждений
- Знаю про историю чатов и slash-команды
- Понимаю что конкретные запросы лучше размытых
- Пробовал создать файл и изменить его
Всё так? → Переходи к следующему уроку.
Я не формулирую идеальные запросы. Никто не формулирует. Пишу как думаю, потом уточняю. Три коротких уточнения обычно быстрее чем один "идеальный" запрос который формулируешь 10 минут. Просто начни — дальше разберёшься.