Claude Code в VS Code — Быстрый старт для новичков

Перед тем как авторизоваться в VS Code, нужен аккаунт Anthropic.

1. Зайди на https://claude.ai → нажми Sign up
2. Регистрируйся на Gmail-аккаунт (не на Яндекс/Mail.ru — с ними иногда ловят блокировки)
3. Подтверди почту

Если запросит номер телефона

Российские и белорусские номера Anthropic не принимает. Решение — купить одноразовый номер для активации через сервис hero-sms.com ← (кликни — откроется в браузере):

1. Зарегистрируйся на hero-sms.com, пополни баланс (минимум 50 ₽)
2. Выбери страну (обычно Англия, Польша или Индонезия — дешевле всего, ~10–30 ₽ за номер)
3. Выбери сервис Claude (или OpenAI, если Claude не ищется — номера универсальные)
4. Скопируй полученный номер → вставь на claude.ai
5. Через 10–60 секунд в личном кабинете hero-sms.com придёт код → введи на claude.ai

Аккаунт готов. Запомни почту и пароль — они же понадобятся для входа в VS Code.

Шаг 4. Оплата подписки

ВАЖНО: для работы Claude Code нужна подписка, не API-ключ.

Почему НЕ API-ключ

API-ключ — это оплата по факту за каждый токен. На реальной разработке (код читается, генерируется, переписывается сотни раз в день) это превращается в $300–500 в месяц и больше. Плюс надо следить за балансом, бюджетами, лимитами.

С подпиской всё предсказуемо — фиксированная сумма, лимит считается по сообщениям, не по токенам.

Какую подписку брать

Рекомендация: начни с Max $100 — это золотая середина. $20 Pro закончится за пару часов плотной работы.

Как оплатить, если нет иностранной карты

Anthropic принимает оплату только зарубежными картами (Visa/Mastercard, выпущенными вне РФ/РБ). Самый простой способ получить такую карту — виртуальная карта через сервис platipomiru.com ← (кликни — откроется в браузере):

1. Зарегистрируйся на platipomiru.com
2. Пополни баланс рублями через СБП
3. Выпусти виртуальную карту (Visa/Mastercard, выпуск ~5 минут)
4. Скопируй данные карты → на claude.ai в настройках Upgrade → Subscribe введи её
5. Положи на карту хотя бы $105 (подписка + запас на комиссию) → оплати

После оплаты доступ к Max-лимитам активируется мгновенно.

Шаг 5. Авторизация Claude Code в VS Code через OAuth

Теперь связываем расширение с твоим Claude-аккаунтом.

5.1. Открой панель Claude

Нажми иконку ✱ (Spark) в правом верхнем углу редактора (откроется панель Claude справа). Если иконки нет — открой любой файл, она появится только при открытом файле.

Альтернативно: нажми ✱ Claude Code в правом нижнем углу VS Code (статус-бар) — работает даже без открытого файла.

5.2. Нажми «Sign in»

В открывшейся панели появится экран входа — нажми кнопку Sign in.

5.3. Залогинься в браузере

VS Code откроет браузер на странице Anthropic. Залогинься тем же Gmail-аккаунтом, который регистрировал на Шаге 3.

5.4. Подтверди доступ

Anthropic спросит разрешение связать аккаунт с VS Code — нажми Allow (или Authorize).

5.5. Вернись в VS Code

Браузер покажет «Authentication successful, you can close this tab» → закрой вкладку. Вернись в VS Code → панель Claude теперь активна, видно поле ввода.

Если что-то пошло не так

• «Not logged in · Please run /login» — закрой и заново открой панель, логин-экран появится снова
• Окно логина не открылось — Command Palette (Ctrl+Shift+P) → Developer: Reload Window
• VS Code не видит подписку — в настройках расширения убедись что Disable Login Prompt выключен, и что ты залогинен под тем же email, что и на claude.ai
• Если ты раньше ставил переменную ANTHROPIC_API_KEY — убери её из окружения (иначе Claude Code будет пытаться использовать API-ключ вместо подписки). Запусти VS Code командой code . из чистого терминала.

Шаг 6. Первый запуск

1. Открой папку проекта: File → Open Folder (или создай новую папку)
2. Нажми иконку ✱ — откроется панель Claude
3. Внизу панели — поле для ввода. Пиши задачу прямо туда

Панель Claude можно перетащить куда удобно: в правый сайдбар, в левый, или открыть как отдельную вкладку.

Шаг 7. Как общаться с Claude

Просто пиши задачу словами в поле ввода:

Создай простой сайт-визитку на HTML и CSS с тёмной темой

Добавь форму обратной связи с валидацией

Этот код не работает, почему?

Ссылки на файлы через @

Набери @ и начни вводить имя файла — Claude подтянет его содержимое:

Объясни логику в @auth.js
Что делает функция на строке 42 в @src/api.ts

Выделенный код

Выдели текст в редакторе → Claude автоматически увидит выделенный фрагмент. Нажми Alt+K (Windows/Linux) или Option+K (Mac) чтобы вставить ссылку на выделение.

Шаг 8. Три режима работы

Режим переключается кнопкой внизу поля ввода:

Edit Mode (по умолчанию) Claude предлагает изменения → показывает diff (было/стало) → ты одобряешь или отклоняешь каждое изменение.

Plan Mode Claude только анализирует и составляет план. Ничего не меняет в коде, пока ты не одобришь. Безопасно для исследования.

Auto-Accept Mode Claude вносит изменения сразу, без запроса. Удобно для прототипирования, но будь внимателен.

Шаг 9. Как ставить задачи (промпты)

Плохо

сделай сайт

Хорошо

Создай лендинг для магазина кроссовок.
Стек: HTML + Tailwind CSS.
Секции: шапка с логотипом, баннер с CTA-кнопкой, каталог из 6 карточек товаров, футер.
Тёмная тема, адаптив под мобилку.

Принципы хорошего промпта:

1. Конкретика — описывай что именно хочешь (стек, структура, стиль)
2. Контекст — Claude сам видит файлы проекта, но можно указать @файл
3. Поэтапность — лучше несколько маленьких задач, чем одна огромная
4. Итерации — получил результат → попросил доработать

Шаг 10. Слэш-команды и горячие клавиши

Слэш-команды (набери / в поле ввода):

• /help — справка
• /clear — начать новый разговор (очистить контекст)
• /compact — сжать контекст (когда диалог стал длинным)
• /usage — сколько потрачено за сессию
• /mcp — управление подключёнными серверами

Горячие клавиши:

• Ctrl+Esc / Cmd+Esc — переключить фокус между редактором и Claude
• Ctrl+Shift+Esc / Cmd+Shift+Esc — открыть новый разговор во вкладке
• Alt+K / Option+K — вставить ссылку на файл/выделение
• Shift+Enter — новая строка (без отправки)
• Esc Esc (двойной) — откатить последние изменения Claude

Шаг 11. Файл CLAUDE.md — настройка контекста

Создай в корне проекта файл CLAUDE.md — Claude прочитает его при каждом запуске:

# Мой проект

Это интернет-магазин кроссовок.
Стек: Vue 3 + Node.js + PostgreSQL.

## Правила
- Пиши код на TypeScript
- Используй Composition API
- Комментарии на русском
- Стиль: Tailwind CSS

Это как инструкция для ассистента — чем точнее опишешь, тем лучше результат.

Шаг 12. Работа с git

Claude умеет работать с git прямо из VS Code:

Посмотри что я изменил

Закоммить изменения с понятным сообщением

Создай PR для этой фичи

Контрольные точки (Checkpoints)

Claude автоматически создаёт снимки перед каждым изменением. Наведи на любое сообщение в истории — появится кнопка отката. Три варианта:

• Fork conversation — новая ветка диалога, код остаётся
• Rewind code — откатить файлы, диалог остаётся
• Fork + Rewind — откатить и файлы, и ветку диалога

Шаг 13. Типичные сценарии для новичка

Создать проект с нуля:

Создай REST API на Node.js + Express для списка задач (todo).
Эндпоинты: GET /tasks, POST /tasks, PUT /tasks/:id, DELETE /tasks/:id.
Данные хранить в JSON-файле.

Разобраться в чужом коде:

Объясни что делает этот проект, как он устроен, какие технологии использует

Исправить баг:

При нажатии на кнопку "Купить" ничего не происходит. Найди и исправь проблему.

Добавить фичу:

Добавь поиск по товарам с фильтрацией по цене и категории

Сделать деплой:

Подготовь этот проект к деплою на VPS с nginx. Создай Dockerfile и docker-compose.yml

Советы

1. Не бойся экспериментировать — Claude работает с файлами локально, а checkpoints позволяют откатить любое изменение
2. Используй Plan Mode — когда не уверен, сначала попроси план, потом одобри выполнение
3. Проверяй результат — запускай код, смотри в браузере, тестируй. Потом говори что не так
4. @-упоминания — ссылайся на конкретные файлы через @, чтобы Claude понимал контекст
5. Выделяй код — перед вопросом выдели проблемный фрагмент в редакторе
6. /compact — если диалог стал длинным и Claude начал «забывать», используй эту команду
7. Несколько вкладок — открой несколько разговоров (Ctrl+Shift+Esc) для параллельных задач

Рекомендуемые настройки VS Code

Открой настройки: Ctrl+, (Windows/Linux) или Cmd+, (Mac), добавь:

{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "diffEditor.renderSideBySide": true,
  "terminal.integrated.scrollback": 10000
}

Настройки расширения Claude Code: Extensions → Claude Code:

• Initial Permission Mode — режим по умолчанию (default / plan / acceptEdits)
• Preferred Location — где открывать панель (sidebar / panel)
• Autosave — автосохранение файлов перед чтением

Что дальше

1. Начни с маленького проекта — сайт-визитка, бот, простое API
2. Наращивай сложность — добавляй базу данных, авторизацию, деплой
3. Изучай что генерирует Claude — это лучший способ учить программирование
4. Читай код, задавай вопросы: "Почему ты выбрал такой подход?"
5. Попробуй подключить MCP-серверы для работы с GitHub, базами данных, браузером