Loading...
Loading...
Гайды, шаблоны и инструменты для разработчиков
Потеряли 3 дня работы из-за нейронки? Git — твоя страховка от фразы 'всё сломалось и не починить'. Простой гайд по Git для тех, кто вайбкодит.
Потеряли 3 дня работы, потому что Cursor решил, что ваш код — это мусор? Клод агент случайно удалил половину проекта, и вы не знаете, как вернуть её назад?
Знакомо? Тогда садитесь поудобнее. Сегодня спасаем ваши проекты от исчезновения.
Здорово, вайбкодеры! Если вы всё ещё не используете Git в своих проектах, то обязательно читайте эту статью до конца или сохраняйте в закладки, потому что это спасёт ваш проект.
Всё, как обычно: с меня годнота, с вас лайк и подписка. И мы начинаем.
Представь: ты запилил крутую фичу в своем проекте, всё работает. Решаешь добавить еще одну мелочь — и бац, всё сломалось. А рабочую версию не сохранил.
Git решает эту проблему раз и навсегда.
Git — это машина времени для вашего кода. С ним вы можете сохранять каждое изменение в проекте. В Git будет храниться последовательная история всех изменений. Что-то пошло не так, нейронка удалила половину кода? Ничего страшного — мы просто откатываемся к нужному состоянию.
1. Защита от агентов-безумцев
ИИ может накосячить, что-то сломать, стереть нужный код или исправить его так, что он не будет работать. Git позволяет быстро и просто вернуться к нужному состоянию, которое работало.
2. Эксперименты без страха
Хотите попробовать сделать фичу, но не уверены, что получится, и боитесь сломать работающий код? Ничего страшного — создаём отдельную ветку, работаем в ней, тестируем. Всё хорошо — сливаем. Что-то не получилось — возвращаемся к рабочей ветке.
3. Резервная копия в облаке
Благодаря сервисам типа GitHub, GitLab или Bitbucket, мы можем хранить свои проекты вместе с историей изменений в облаке. Грубо говоря, это как Google Drive, только с историей изменений. И если, не дай бог, с вашим ноутбуком или компьютером что-то случится, вы легко сможете восстановить проект из этого облака.
В общем: Git для вайбкодеров — это кнопка "Откатить изменения" на стероидах, которая даёт нам гибко и просто управлять версиями нашего проекта.
Если сейчас вам кажется, что это сложно и непонятно, то не волнуйтесь. Сейчас я всё подробно объясню на примерах, как это работает.
Чтобы понимать принцип работы Git, нам нужно знать три основных термина.
Коммит — это запись об изменениях. Вы делаете какое-то изменение, коммитите его, и это изменение сохраняется в истории изменений Git. И такая запись об изменениях называется коммитом.
Делаете одно изменение — закоммитили. Делаете второе изменение — закоммитили. Таким образом, у нас формируется история изменений, из которой складывается конечное состояние проекта.
Если в какой-то момент что-то сломалось, то мы без проблем можем откатиться к какому-то коммиту в этой цепочке изменений, в котором всё работало.
Каждый коммит включает:
Best practice: Коммитить часто, с понятными сообщениями. Будущий ты скажет спасибо.
Откатываться по коммитам можно, но это не всегда удобно. Поэтому давайте разберём второй термин — ветки.
Ветки — это как бы параллельные истории коммитов. Сначала у нас будет одна основная ветка. Обычно она называется main или master. При желании можно назвать по-другому, но лучше использовать устоявшиеся названия.
Зачем это нужно:
Предположим, мы делали какие-то изменения, коммитили это всё в ветку main. Там сформировалась какая-то история этих изменений. И вот у нас есть работающая версия проекта, и это состояние находится в ветке main.
И тут мы захотели внедрить какие-то новые фичи или, может быть, просто поэкспериментировать с каким-то функционалом. Далеко не факт, что всё сразу заработает, особенно если предполагается большой объём работы. Но нам было бы удобно сохранять промежуточные изменения на пути к реализации этого нового функционала.
Но если коммитить изменения в нашу основную ветку main, то есть большой шанс, что мы сломаем работающую версию проекта. Чтобы этого избежать, мы создаём новую ветку — так сказать, параллельную историю развития.
При создании ветки сначала она будет полностью идентична нашей основной ветке main. Затем мы будем коммитить наши изменения в новую ветку, а ветка main останется такой же, как и была.
Когда мы закончим разработку нашего нового функционала, протестируем, что всё работает, то вольём наши изменения из второй ветки в нашу основную ветку. В нашей основной ветке появятся новые изменения, и мы будем уверены, что всё работает корректно.
Слияние веток называется merge. Позже мы разберём этот процесс на примерах.
Если мы что-то сломаем в процессе реализации нового функционала или наш эксперимент вдруг не удался, то мы просто вернёмся к нашей основной ветке, в которой всё работает. Продолжим разработку проекта из рабочего состояния, а ветку, в которой у нас что-то не получилось, мы можем просто удалить.
Третий термин, который нам нужно знать — это репозиторий.
Если по-простому, то Git repository — это папка с файлами проекта и историей изменений.
Бывают:
Если говорить про локальный репозиторий, то по сути ваша папка с проектом после инициализации в ней Git становится репозиторием. В корне вашего проекта появляется папка .git, и в ней как раз хранится вся история изменений: ветки, коммиты и так далее.
Если говорить про удалённый репозиторий, то его для простоты можно воспринимать как облачное хранилище. Ну типа Google Drive, только в нём ещё хранится история всех ваших изменений.
Самые популярные сервисы для хранения Git репозиториев — это GitHub, GitLab, Bitbucket, ну и есть ещё другие. В принципе, можете выбрать тот, который вам больше нравится.
Удалённые репозитории использовать очень практично. Как я уже говорил, если вдруг, не дай бог, с вашим компьютером или проектом, жёстким диском что-то случится, то вы всегда сможете скачать актуальную версию из удалённого Git репозитория.
Кроме того, используя удалённый Git репозиторий, вы можете работать над одним проектом вместе с другими разработчиками. Без Git совместная работа над одним проектом превратится в ад.
Запомни эти команды — и уже можешь работать:
# 1. Посмотреть статус - что изменилось
git status
# 2. Добавить файлы в зону подготовки
git add .
# 3. Сделать коммит (сохранить изменения)
git commit -m "Добавил страницу контактов"
# 4. Отправить на GitHub
git push
# 5. Получить обновления с GitHub
git pull
Всё. Серьезно. Этих пяти команд хватит на 90% твоей работы.
Два способа:
Вариант 1: Создать репу из существующей папки
cd твой-проект
git init
Вариант 2: Скачать чужой проект с GitHub
git clone https://github.com/username/project.git
Перед первым коммитом нужно представиться:
git config --global user.name "Твое Имя"
git config --global user.email "email@example.com"
Это делается один раз, дальше Git запомнит.
Поработал над проектом, всё работает — сохрани:
git status # посмотри что изменилось
git add . # добавь все файлы
git commit -m "Сделал форму регистрации"
git push # отправь на GitHub
Когда использовать: В конце рабочей сессии, после каждой законченной фичи.
Что-то сломал и хочешь вернуться назад?
Допустим, вы работаете с проектом, удалили какой-то нужный код, у вас что-то сломалось, в общем, не работает, и вы эти изменения не коммитили — то есть они только у вас локально. А в последнем коммите в ветке всё хорошо работало, и вы хотите откатиться.
В VS Code это делается просто:
Переходим в раздел работы с Git, выбираем тот файл, который мы хотим откатить, и там есть кнопочка Discard Changes. Нажимаем на неё, подтверждаем, и у нас файл восстанавливается в состоянии, в котором он был при последнем коммите.
Через командную строку:
# Отменить изменения в файле (если еще не делал add)
git checkout -- filename.txt
# Посмотреть историю коммитов
git log --oneline
# Вернуться к конкретному коммиту
git checkout abc123
Лайфхак: Перед рискованными экспериментами делай коммит с сообщением "бэкап перед экспериментом".
Хочешь попробовать новую идею, но не уверен что получится?
# Создай ветку для эксперимента
git switch -c experiment-animations
# Работай, делай коммиты
git add .
git commit -m "Попробовал анимации"
# Если понравилось - влей в main
git switch main
git merge experiment-animations
# Если не понравилось - просто удали ветку
git branch -d experiment-animations
Красота в том, что main остается нетронутым, пока ты не решишь влить изменения.
GitHub — это облачное хранилище для твоих репозиториев плюс социальная сеть для разработчиков.
Что дает:
# 1. Создай репозиторий на github.com (через веб-интерфейс)
# 2. Подключи локальный проект
git remote add origin https://github.com/username/project.git
# 3. Загрузи код
git push -u origin main
Нашел крутой проект, хочешь поковыряться или предложить улучшение?
# 1. Жми "Fork" на GitHub - создается твоя копия
# 2. Клонируешь себе
git clone https://github.com/твой-username/проект.git
# 3. Вносишь изменения
git add .
git commit -m "Исправил баг с валидацией"
git push
# 4. Создаешь Pull Request через GitHub
Pull Request — это предложение автору принять твои правки. Вежливый способ сказать "я улучшил твой код".
Плохо:
git commit -m "fix"
git commit -m "asdf"
git commit -m "работает"
Хорошо:
git commit -m "Исправил баг с валидацией email"
git commit -m "Добавил анимацию для кнопки входа"
git commit -m "Обновил зависимости до последних версий"
Правило: Сообщение отвечает на вопрос "Что сделано?". Пиши для себя из будущего.
Не коммить временные файлы, логи, пароли!
Создай файл .gitignore в корне проекта:
node_modules/
.env
*.log
.DS_Store
dist/
Теперь Git игнорирует эти файлы.
Если работаешь с удаленным репозиторием, всегда:
git pull # сначала получи изменения
# работаешь
git push # потом отправляй свои
Привычка: Начинаешь рабочий день с git pull.
Экспериментируешь прямо в main → ломаешь рабочий код → грустишь.
Решение: Создавай ветки для новых фич.
git switch -c add-user-profile
# работаешь
git switch main
git merge add-user-profile
Видишь это и паникуешь?
CONFLICT (content): Merge conflict in index.html
Не паникуй. Открой файл, найди:
<<<<<<< HEAD
твой код
=======
код друга
>>>>>>> branch-name
Выбери нужный вариант (или объедини), удали маркеры, сохрани:
git add .
git commit -m "Решил конфликт"
Лайфхак: VS Code подсвечивает конфликты и дает кнопки "Accept Current" / "Accept Incoming".
ОЧЕНЬ ОПАСНО:
const API_KEY = "sk-1234567890abcdef"; // НИКОГДА ТАК НЕ ДЕЛАЙ
Правильно:
.env файл:API_KEY=sk-1234567890abcdef
Добавь .env в .gitignore
Используй переменные окружения:
const API_KEY = process.env.API_KEY;
Если уже закоммитил: Пересоздай ключ API немедленно. Он уже скомпрометирован.
Настрой один раз:
git config --global alias.st status
git config --global alias.co checkout
git config --global alias.cm commit
git config --global alias.br branch
Теперь:
git st # вместо git status
git co # вместо git checkout
# Компактный вид истории
git log --oneline
# Последние 5 коммитов
git log --oneline -5
# График веток (красиво!)
git log --oneline --graph --all
Не любишь командную строку? Есть графический интерфейс:
desktop.github.comДля вайбкодинга вполне годится.
Запилил сайт на HTML/CSS/JS? Выложи его бесплатно:
mainusername.github.io/projectИдеально для портфолио.
Один из самых кайфовых моментов — это то, что вы можете попросить вашего AI-агента сделать все эти команды за вас.
Например, если вы работаете с проектом, удалили какой-то нужный код, у вас что-то сломалось, можно просто написать агенту:
Откатись до коммита с ID abc123 и запуш в удалённый репозиторий
И агент выполнит нужные команды. Он может предложить git reset --hard для локального отката, а потом git push origin main --force-with-lease для отправки в удалённый репозиторий.
Важный момент: параметр --force-with-lease безопаснее, чем просто --force, потому что он применяет force только если удалённая ветка в том же состоянии, в котором мы последний раз её скачивали.
Но с коммитами так не очень удобно играться. И гораздо проще всё-таки по веткам переключаться — для какой-то новой фичи создавать новую ветку, разрабатывать новую фичу там, когда мы её сделали, сливать в основную ветку. Ну либо переключаться в основную ветку, а стороннюю ветку удалять, если мы не хотим больше её разрабатывать.
Working Directory → git add → Staging Area → git commit → Local Repo → git push → GitHub
(твои файлы) (подготовка) (история) (облако)
Простыми словами:
git add переносит изменения в Staging Area (зона подготовки)git commit сохраняет snapshot в Local Repository (локальная история)git push отправляет в GitHub (облако)Git — это не так уж и сложно, тем более когда под рукой есть AI-агент, который может выполнить все сложные команды и решить конфликты.
Но использование Git даёт вам уверенность, что вы не потеряете свой проект. Даже если вы где-то накосячили, у вас всё равно есть эта история изменений, и так или иначе вы сможете откатиться к нужному этапу, когда всё работало корректно и ничего ещё не было сломано.
Более того, если вы храните свой проект в удалённом репозитории, вы сможете скачать его на любой другой компьютер, работать совместно с другими людьми и быть уверенным, что даже если с вашим компьютером что-то случится, у вас есть проект в удалённом репозитории, который вы всегда сможете из него восстановить.
Для вайбкодеров Git — это страховка и суперсила.
Да, вы можете откатываться в контексте одного чата в Claude, в Cursor, в каких-то других сервисах, но это всего лишь контекст одного чата. Но как только вы создаёте новый чат, история изменений пропадает, поэтому вам нужен Git. И с нейронками это просто мастхэв, без него никак.
Начни с простого:
git init)Эти пять шагов — и ты уже используешь Git как профи.
Главное: Не пытайся запомнить все команды сразу. Начни с базовых пяти, остальное придет с практикой.
Кайфануешь, когда в первый раз откатишь сломанный код одной командой 😉
В общем годнота! Надеюсь, у меня удалось доступно и просто объяснить, как можно использовать Git в своих вайбкодерских проектах.
Если у вас остались вопросы, пишите их в комментарии. Ну или задайте своему AI-агенту.
Подписывайтесь на канал, чтобы не пропустить новые видосы. Ставьте лайк, чтобы YouTube рекомендовал вам больше годного контента.
Подписывайтесь в Telegram-канал "Годный вайбкодинг". В нём я публикую полезные материалы по вайбкодингу. Также у нас есть вайбкодерский чатик, в котором можно пообщаться с другими вайбкодерами, позадавать вопросы, поответить на ответы. Иногда там даже публикуют какие-то предложения о вайбкодерских проектах.
Так что подключайтесь к нашему вайбкодерскому комьюнити!
Полезные ресурсы:
А на этом я с вами прощаюсь. Всем годного кода и до скорых встреч!