Claude Code в VS Code: установка, контекст файлов и проверка первой правки

Кнопка в карточке выходит за край экрана. Исправим её с помощью Claude Code в VS Code: подключим официальный инструмент, передадим нужные файлы и проверим предложенную правку по коду и в браузере.

Подготовьте отдельный учебный проект

Для упражнения нужны основы HTML и CSS, VS Code и доступ к Claude Code. Все файлы ниже учебные. Используйте пустую папку claude-button-demo, чтобы изменение было видно целиком и случайная правка не затронула ваш рабочий проект.

В официальной документации расширения указаны VS Code версии 1.94.0 или новее и аккаунт, который даёт доступ к Claude Code: подходящая платная подписка Claude либо аккаунт Claude Console. При входе через аккаунт отдельный API-ключ не нужен. Возможности и лимиты зависят от вашего способа доступа. Проверьте их в аккаунте перед началом; стоимость в упражнении не рассчитываем. Требования к расширению.

Сначала создайте в папке два файла. В index.html поместите законченную страницу:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Учебная карточка</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <article class="card">
        <h1>Лампа для рабочего стола</h1>
        <p>Учебный товар. Доставка согласуется отдельно.</p>
        <button class="card__button" type="button">
          Добавить в корзину с доставкой
        </button>
      </article>
    </main>
  </body>
</html>

В styles.css добавьте исходные стили. Фиксированная ширина кнопки намеренно создаёт ошибку на узком экране.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 16px;
  font: 18px/1.5 system-ui, sans-serif;
}

.card {
  max-width: 420px;
  padding: 20px;
  border: 1px solid #888;
}

.card__button {
  width: 340px;
  padding: 12px 20px;
  font: inherit;
  border: 2px solid #222;
  color: #fff;
  background: #222;
}

Откройте HTML в браузере. Сузьте окно до 320 пикселей или задайте эту ширину в режиме проверки устройств. У карточки остаётся меньше места, чем требует кнопка. Зафиксируйте исходный результат: справа появляется переполнение, длинная подпись не помещается в доступную ширину.

Это точка отсчёта. В дальнейшей проверке будет с чем сравнить изменение. Если вы уже работаете с Git, сохраните исходные файлы отдельным коммитом; порядок основных команд есть в руководстве по работе с консолью Git. Для упражнения достаточно и копии двух файлов.

Установите расширение и войдите в аккаунт

Откройте раздел Extensions сочетанием Ctrl+Shift+X в Windows или Linux, Cmd+Shift+X в macOS. Найдите Claude Code и проверьте издателя Anthropic. Установите официальное расширение. Надёжнее начинать с ссылки на установку из инструкции Anthropic для VS Code, чтобы не выбрать одноимённый сторонний инструмент.

Откройте созданную папку через File → Open Folder. Затем найдите команды Claude Code в палитре команд VS Code и откройте панель, например командой Open in New Tab. При первом открытии нажмите Sign in и завершите авторизацию в браузере. После входа вернитесь в редактор.

Расширение поставляется со своей копией командного инструмента для работы панели. Отдельная установка команды claude нужна, если вы собираетесь запускать её в терминале. Для этого упражнения панель достаточна; способ отдельной установки описан в руководстве по настройке Claude Code.

Если панель не появилась, вызовите Developer: Reload Window. При повторном запросе входа проверьте, что авторизация завершилась в том аккаунте, которым вы пользуетесь. Установка расширения и доступ к сервису — разные условия: запись в списке Extensions подтверждает только установку.

Покажите файлы и сначала попросите объяснение

Откройте styles.css и выделите правило .card__button. В панели Claude Code добавьте ссылки на оба файла через @: начните вводить имя и выберите файл из подсказки. По официальной документации расширение умеет читать упомянутые файлы и учитывает выделенный в редакторе текст. Контекст файлов и выделения.

Напишите первый запрос:

Изучи @index.html и @styles.css.
На ширине окна 320 px кнопка выходит за границы карточки.
Объясни причину и предложи минимальное изменение CSS.
Сохрани полный текст кнопки и видимую рамку фокуса.
Пока не редактируй файлы и не устанавливай зависимости.

Выделение экономит время на поиске нужного участка, но упоминание файла не создаёт границу разрешений. Агент может обращаться и к другим доступным инструментам и файлам. Поэтому начинайте с учебной папки, не добавляйте секреты в запрос и смотрите на запрашиваемые действия.

Для первой правки мы рекомендуем Manual. Найдите индикатор режима внизу поля запроса и выберите ручное подтверждение. В текущей инструкции Anthropic этот режим запрашивает разрешение перед редактированием файлов и большинством команд оболочки. Plan подходит для предварительного плана, а автоматические режимы меняют порядок подтверждений. Названия и доступность режимов проверяйте в установленной версии. Модель разрешений Claude Code.

Ответ должен связать дефект с фиксированной шириной 340px и доступной шириной карточки. Если объяснение ушло в настройку сервера, миграцию сборщика или замену всей разметки, уточните границы задачи. Здесь это лишние изменения.

Разрешите одну правку и прочитайте сравнение

После объяснения отправьте отдельный запрос:

Исправь только styles.css по предложенному плану.
Кнопка должна помещаться в карточке при ширине окна 320 px.
Текст разрешено переносить, обрезать его нельзя.
Сохрани размер шрифта и проверь стиль фокуса.
Покажи, какие строки изменились и как мне проверить результат.
Не запускай команды и не создавай коммит.

Запрет команды в запросе задаёт намерение. Читайте, что именно агент собирается сделать, прежде чем подтверждать действие. Если появляется установка пакета для двух статических файлов, отклоните её и попросите обойтись изменением CSS.

В Manual расширение показывает исходный и предложенный вариант рядом и запрашивает подтверждение. Прочитайте каждое изменение. Хороший результат можно получить, например, такой заменой правила:

.card__button {
  max-width: 100%;
  padding: 12px 20px;
  font: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
  border: 2px solid #222;
  color: #fff;
  background: #222;
}

.card__button:focus-visible {
  outline: 3px solid #2456d8;
  outline-offset: 3px;
}

Здесь удалена фиксированная ширина. max-width: 100% ограничивает кнопку доступной шириной, а перенос защищает длинную подпись. Правило фокуса позволяет увидеть кнопку при переходе клавишей Tab. Агент может предложить другое решение; сравнивайте его с критериями, а не с совпадением строк.

Особенно внимательно смотрите на overflow: hidden, уменьшение шрифта и замену текста. Эти изменения способны скрыть симптом за счёт потери содержимого. Сохраняем всю подпись.

Проверьте результат за пределами ответа агента

После принятия изменения сохраните файл и обновите страницу. Первую проверку выполняйте на тех же 320 пикселях. Затем увеличьте ширину до 768 пикселей: кнопка должна оставаться внутри карточки и при этом не требовать горизонтальной прокрутки.

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

В панели Source Control VS Code откройте изменение styles.css. Если папка под Git, сравнение покажет полный накопленный результат, включая ваши ручные правки. Для папки без Git сравните файл с исходной копией. Итоговый ответ модели полезен как указатель, но именно файл и страница показывают, что получилось.

Повторите задачу с другим содержимым

Замените название товара на длинное, добавьте к кнопке ещё несколько слов и повторите проверку узкой ширины. Если дефект вернулся, передайте агенту конкретную новую подпись и снимите предположение, которое оказалось неверным. Например: кнопка должна выдерживать длинное слово без пробелов.

Так вы проверите и CSS, и собственную постановку задачи. Ограничение «не выходить за край» становится наблюдаемым условием, когда рядом есть ширина окна, конкретные файлы и полный текст элемента.

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

Продолжите работу с агентами после первой принятой правки

Сначала завершите чек-лист и сохраните исходную и исправленную версии. Затем откройте бесплатный первый раздел курса «Разработка с AI-агентами: инженерный подход». Теперь вы можете показать задачу, принятое изменение и результат своей проверки.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.