Курс

Создание и изменение файлов

МОДУЛЬ 2: НАСТРОЙКА И УСТАНОВКА • Урок 5 из 7

В этом уроке разберёмся как Claude работает с файлами в интерфейсе VS Code, и что тебя ждёт.

[ СОЗДАНИЕ ФАЙЛОВ ]

Чтобы появилось что-то новое, просто скажи агенту что создать:

Создай файл index.html с базовой структурой страницы

Или ещё проще:

Сделай главную страницу сайта

Claude сам выберет название файла и создаст нужную структуру.

В процессе, он покажет содержимое файла с зелёным фоном — это новый файл. Нажимаешь Accept, файл появляется в проекте.

Можно создавать в папках:

Создай стили для кнопок в папке styles/

Если папки не существует — Claude создаст и её.

[ ЧТЕНИЕ ФАЙЛОВ ]

Claude может читать файлы чтобы понять контекст:

Посмотри файл index.html и объясни что там происходит
Прочитай package.json и скажи какие библиотеки используются

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

💡 Совет:

Claude часто сам читает файлы когда нужно. Но если хочешь убедиться что он посмотрел конкретный файл, укажи явно. Если ты выберешь нужный файл слева в папке, то когда он откроется, ты сможешь прикрепить его к чату (это происходит автоматически). Если кликнуть на него тут 👇 то он открепится.

Прикрепление файла

[ DIFF-Ы: ИЗМЕНЕНИЯ ФАЙЛОВ ]

Когда Claude хочет изменить существующий файл, он показывает diff, в интерфейсе VS Code.

Diff в VS Code
💡 Что такое diff:

Diff (от английского "difference" различие) — это сравнение двух версий файла. Показывает что именно изменится: какие строки удалятся, какие добавятся. Так ты видишь изменения ДО того как они применятся.

Как читать diff:

- старая строка (красная, будет удалена)
+ новая строка (зелёная, будет добавлена)

Минус и красный цвет = эта строка уйдёт.

Плюс и зелёный цвет = эта строка появится.

Что делать с diff-ом:

  1. Прочитай — что именно меняется?
  2. Accept — если согласен, применить
  3. Reject — если не согласен, отменить

[ ПОНИМАНИЕ DIFF-А ]

Пример. Было:

<h1>Привет</h1>

Ты попросил: "Сделай заголовок красным"

Diff покажет:

- <h1>Привет</h1>
+ <h1 style="color: red;">Привет</h1>

Красная строка уходит, зелёная приходит. Всё просто.

⚠️ Важно:

Всегда читай diff перед Accept. Особенно первое время. Claude иногда понимает задачу не так, лучше увидеть это до применения.

[ УДАЛЕНИЕ ФАЙЛОВ ]

Claude может удалять:

Удали файл temp.txt
Удали папку old-components со всем содержимым

Claude покажет что удаляет и попросит подтверждение. Без подтверждения ничего не удалится.

⚠️ Осторожно:

Удалённые файлы без Git не восстановить. Убедись что файл точно не нужен. Или сначала сохрани в Git (урок 14).

[ ПЕРЕИМЕНОВАНИЕ И ПЕРЕМЕЩЕНИЕ ]

Переименуй файл old.js в new.js
Перенеси файл utils.js в папку src/helpers/

Claude сделает это как удаление старого + создание нового. Содержимое сохранится.

[ МАССОВЫЕ ОПЕРАЦИИ ]

Claude справляется с операциями над несколькими файлами:

Добавь комментарий с датой создания в начало каждого .js файла

Он пройдётся по всем файлам и покажет diff для каждого.

[ ПРАКТИКА ]

Попробуй:

  1. Создай файл notes.md с текстом "Мои заметки"
  2. Добавь туда список из трёх пунктов
  3. Измени первый пункт — посмотри как выглядит diff
  4. Удали файл (если не жалко)

Так ты почувствуешь цикл: запрос → diff → подтверждение → результат.

💬 Совет:

Diff-ы сначала кажутся пугающими, но через пару дней читаются на автомате. Красное уходит, зелёное приходит — всё. Главное правило: не жми Accept не глядя. Один пропущенный косяк может превратиться в потраченный час на поиск причин почему не работает. Да и просто полезно понимать че там твой агент написал, твой же проект.