Пошаговый разбор со скриншотами
Claude Code в VS Code: от установки до запущенного приложения
Иллюстрированный разбор официального расширения Claude Code для VS Code по реальной сессии — установка CLI, первичная настройка, расширение из маркетплейса и сборка полноценного CRUD-приложения.
5 мин чтения · 14 шагов со скриншотами
Коротко
Установите Claude Code CLI одной командой curl, один раз запустите claude, чтобы выбрать тему и доверять папке проекта, затем поставьте опубликованное Anthropic расширение Claude Code for VS Code из маркетплейса. Расширение добавляет боковую панель Claude, которая читает рабочее пространство, отвечает на вопросы по коду и создаёт файлы с подтверждением каждой записи. Разбор ниже повторяет реальную сессию от начала до конца: установка, проверка вопросом о железе, добавление расширения и готовое мини-приложение Express CRUD.
Исходное видео
Каждый кадр на этой странице взят из записи экрана ProgrammingKnowledge — сессия Claude Code 2.1.86 на Ubuntu 24.04, записана в апреле 2026 года.
Кадры используются с указанием авторства, каждый шаг ссылается на точную секунду видео. Закадровый текст не цитируется — текст выше написан по содержимому экрана и сверен с code.claude.com/docs.
Часть 1 · Устанавливаем Claude Code CLI
Расширение запускает тот же бинарник Claude Code, поэтому сначала ставим терминальную версию. Шаги выполнены на Ubuntu 24.04; та же страница документации приводит команды для macOS, Homebrew и Windows.
- 1
Откройте официальный quickstart
Найдите "claude code install" и откройте ссылку code.claude.com/docs/quickstart. Шаг 1 перечисляет команды установки для каждой ОС — однострочник curl для macOS/Linux, Homebrew и отдельные блоки Windows PowerShell и Windows CMD.
Страница quickstart группирует команды установки по операционным системам.Видео на 0:30 - 2
Запустите установочный скрипт curl
Вставьте curl -fsSL https://claude.ai/install.sh | bash в терминал. В конце появится баннер со скриншота: Claude Code successfully installed, версия 2.1.86 в ~/.local/bin/claude и подсказка запустить claude --help.
При успехе установщик печатает версию и расположение бинарника.Видео на 1:05 - 3
Выберите стиль текста при первом запуске
Запустите claude — первый экран спросит, какой стиль текста лучше смотрится в вашем терминале. По умолчанию Dark mode, его же оставляет запись. Шесть вариантов покрывают светлые, адаптированные для дальтоников и ANSI-ограниченные терминалы.
Выбор темы работает и как живой предпросмотр с крошечной программой Hello World.Видео на 1:28 - 4
Доверяйте папке, в которой работаете
Перед любым чтением Claude показывает проверку Accessing workspace: путь к папке, пометку, что Claude Code сможет читать, изменять и запускать файлы, и ссылку на руководство по безопасности. Для своего проекта выберите 1. Yes, I trust this folder.
В приглашении назван точный путь — здесь /home/yoogeshpatel.Видео на 2:38
Часть 2 · Проверяем, что установка работает
До VS Code — один вопрос и одна слэш-команда показывают, как CLI запрашивает разрешения и где что хранит.
- 5
Одобрите первую команду оболочки
Спросите "what are the specs of this computer?" — Claude предложит команды: lscpu, free -h, nproc, lspci. В диалоге три варианта: 1. Yes — один раз, 2. Yes and don't ask again — не спрашивать снова для этой команды, 3. No.
Диалог разрешения показывает полную командную строку до выполнения.Видео на 3:40 - 6
Прочитайте отчёт о системе
Через секунды приходит структурированный отчёт: CPU (Intel Core Ultra 7 155H, 16 ядер), память (62 ГБ), диск (914 ГБ), графика и строка ОС — Ubuntu 24.04.2 LTS. Если ответ такой конкретный, CLI подключён правильно.
Конкретный и точный ответ — самый быстрый смоук-тест установки.Видео на 4:00 - 7
Осмотрите слэш-команды
Ввод / открывает меню команд; запись останавливается на /skills — ответ No skills found и две папки, где живут навыки: .claude/skills/ или ~/.claude/skills/. Всё это меню работает так же и после установки расширения.
/skills заодно подсказывает, где должны лежать пользовательские навыки.Видео на 5:00
Часть 3 · Добавляем расширение VS Code
Официальное расширение опубликовано Anthropic в маркетплейсе VS Code — ни сторонних аккаунтов, ни лишних шагов установки.
- 8
Установите расширение из маркетплейса
В VS Code откройте панель Extensions, найдите "claude code" и откройте запись от издателя Anthropic — идентификатор anthropic.claude-code, 8,1 млн установок на момент записи. Требуется VS Code 1.98.0 или новее; нажмите Install.
Страница маркетплейса показывает издателя, число установок и версию до установки.Видео на 5:30 - 9
Пройдите вкладку getting-started
После установки открывается вкладка Welcome: Get started with Claude Code, карточка Your AI coding partner и три пункта списка — Open Claude Code, Chat with Claude, Past conversations. Там же упомянут терминальный вариант: Claude Code: Open in Terminal из палитры команд.
Вкладка-проводник появляется один раз; Mark Done её убирает.Видео на 5:48 - 10
Откройте панель Claude
Иконка Claude Code в панели активности открывает боковую панель рядом с редактором. Пустое состояние формулирует задачу прямо: What to do first? Ask about this codebase or we can start writing code. Внизу подсказка, что в Settings можно вернуть терминальный режим.
Панель живёт рядом с редактором и делит с ним контекст рабочей области.Видео на 6:46
Часть 4 · Собираем и запускаем приложение из панели
Один промпт в панели Claude разворачивает Express CRUD API. Каждая запись показывает diff и спрашивает подтверждения.
- 11
Дайте настоящий промпт на сборку
В записи вся спецификация набрана одним сообщением: acting as a senior backend developer, создать простое Node.js CRUD-приложение на Express, без базы данных — массив в памяти — с перечисленными эндпоинтами и валидацией. Такой конкретный промпт даёт рабочий каркас с первого раза.
Одно сообщение содержит роль, стек и критерии приёмки.Видео на 7:02 - 12
Прочитайте diff до подтверждения
Claude отвечает планом, затем пишет файлы. Каждый шаг Write открывает зелёный diff — здесь app.js с Express-сервером на порту 3000, массивом книг в памяти и маршрутами GET /items — видно ровно то, что окажется на диске.
Зелёные строки — предложения Claude; пока вы не подтвердите, ничего не записывается.Видео на 7:22 - 13
Одобряйте одну запись или всю сессию
На каждую запись появляется диалог — здесь Allow write to app.js? — с тремя вариантами: 1. Yes один раз, 2. Yes, allow all edits this session, 3. No. Для каркасной работы второй вариант убирает паузы; сначала просмотрите уже показанные diff'ы.
В диалоге назван файл для записи — здесь app.js на 232 строки.Видео на 7:29 - 14
Запустите и проверьте собранное
Финальный ответ отмечает галочками валидацию и обработку ошибок, затем печатает шпаргалку запуска: npm install, npm start, npm run dev с автоперезапуском, плюс curl-команды для всех эндпоинтов — GET /items, GET /items/:id, POST, PUT и DELETE — на localhost:3000.
Ответ заканчивается готовыми curl-командами для каждого маршрута.Видео на 7:48