Полная версия:
Михаил Тарасов Вайб-кодер от нуля до мастера в эпоху AI
- + Увеличить шрифт
- - Уменьшить шрифт
Всё. Турбина установлена. Открой какой-нибудь JS-файл, напиши комментарий // function that sums two numbers и подожди секунду. Ты увидишь серый «призрачный» текст с готовой функцией. Нажми Tab. БУМ! Магия. Добро пожаловать в будущее.
Но постой… Эта магия может быть назойливой. Copilot начнёт лезть со своими советами везде, даже когда ты просто хочешь написать console. log. Он будет предлагать код в. md файлах, бесить тебя в конфигах. Он как слишком энергичный стажёр, который постоянно заглядывает через плечо.
Пора его приручить.
Шаг 3. Тонкая настройка: пилим settings. json, чтобы Copilot не бесил
Мы не хотим, чтобы турбина работала на полную мощность, когда мы паркуемся. Нам нужен контроль. Открываем настройки в формате JSON. Это наш «мозг» IDE.
— Нажми Ctrl+,, чтобы открыть настройки.
— В правом верхнем углу есть иконка файла с загнутым уголком. Наведи на неё, появится подсказка «Open Settings (JSON)». Жми.
Перед тобой файл settings. json. Всё, что мы сюда напишем, переопределит дефолтные настройки. Вот готовый конфиг, который я использую сам. Копируй и вставляй. Ниже я разложу по полочкам, что каждая строчка делает.
{ // — - Общие настройки для комфортной работы — — "editor.fontSize»: 14, "editor.fontFamily»: ««Fira Code’, «JetBrains Mono’, «Consolas’, ’monospace’», "editor.fontLigatures»: true, "workbench.colorTheme»: «Default Dark+», // или любая твоя любимая тема "files.autoSave»: «onFocusChange», // — - Начинается магия для COPILOT — — // 1. Главный рубильник. Иногда хочется подумать в тишине. "github.copilot. enable»: { «*»: true, // Включаем для всех языков по умолчанию «plaintext»: false, // Выключаем для обычных текстовых файлов «markdown»: false, // Выключаем для Markdown, чтобы не мешал писать доки «json»: true // Для JSON пусть работает, помогает со скобками }, // 2. Убираем мусор из поля зрения AI. // Copilot учится на открытых файлах. Не давай ему учиться на мусоре. «files. exclude»: { "**/.git»: true, "**/.svn»: true, «**/.hg»: true, «**/CVS»: true, «**/.DS_Store»: true, «**/Thumbs. db»: true, «**/node_modules»: true, // Самое важное! «**/bower_components»: true, «**/dist»: true, «**/build»: true }, «search. exclude»: { «**/node_modules»: true, «**/bower_components»: true, "**/*.code-search»: true }, // 3. Отключаем встроенные подсказки VS Code, чтобы не конфликтовали с Copilot. // Пусть будет один главный по подсказкам. "editor.inlineSuggest. enabled»: true, // 4. Тюним автодополнение, чтобы было удобно. // По умолчанию он может предлагать код, когда ты этого не ждешь. // Эта настройка (увы, пока нет прямого конфига) решается привычкой жать Esc. // Но мы можем настроить, когда автокомплит появляется сам: «editor. quickSuggestions»: { «other»: «on», «comments»: «on», «strings»: «on» }, // 5. Горячая клавиша для чата Copilot. `Ctrl+I` по умолчанию — топ. // Можно переназначить, если мешает. // «keybindings. json» }Разбор полётов по конфигу:
— github.copilot. enable: Это твой главный тумблер. Ты можешь точечно отключать Copilot для определённых типов файлов. Я всегда вырубаю его для markdown, потому что когда я пишу документацию или эту книгу, последнее, что мне нужно, — это предложения сгенерить for loop.
— files. exclude и search. exclude: Критически важные настройки! Папка node_modules — это чёрная дыра, в которой лежат миллионы файлов. Если AI начнёт их анализировать, твоя IDE превратится в черепаху. Этим конфигом мы говорим: «Братан, вот сюда не смотри, там ничего интересного».
— editor.inlineSuggest. enabled: Убедись, что эта опция включена, иначе магия «призрачного текста» работать не будет.
— editor. quickSuggestions: Эта настройка контролирует появление стандартного окошка с подсказками. Важно, чтобы оно не конфликтовало с Copilot. Настройки «on» для строк и комментов позволяют Copilot лучше «понимать» контекст, когда ты начинаешь писать.
Шаг 4. Хоткеи: приручаем зверя окончательно
Инструмент бесполезен, если ты не умеешь им пользоваться быстро. Заучи эти хоткеи, как git push. Это твоя новая мышечная память.
— Tab — Принять предложение. Твой лучший друг.
— Esc — Отклонить предложение. Твой второй лучший друг.
— Alt +] (или Option +] на Mac) — Показать следующее предложение.
— Alt + [(или Option + [на Mac) — Показать предыдущее предложение. (Многие не знают об этой фиче, а она — золото!)
— Ctrl + Enter — Открыть панель с 10 вариантами кода от Copilot. Полезно, когда первая предложенная идея — мусор.
— Ctrl + I — Открыть встроенный чат Copilot. Выдели кусок кода, нажми Ctrl+I и напиши «Refactor this» или «Explain this code». Это киллер-фича.
Вот и всё, братан. Твой классический, кастомный, но заряженный AI сетап готов. Ты получил мощь нейронки, но оставил за собой полный контроль. Ты сам решаешь, когда нажать на газ, а когда — притормозить и подумать своей головой. Это путь воина, который доверяет своему мечу, но полагается на собственное мастерство.
Совет от гаражного кодера:
— Поставь Prettier и ESLint. AI часто генерит код с кривым форматированием или не по стайлгайду проекта. Эти два плагина — твои автоматические «чистильщики». Они будут форматировать код (включая сгенерированный) при сохранении. Так в репозитории будет порядок.
— Создай файл. copilotignore. Да, такой существует! По аналогии с. gitignore. Создай его в корне проекта и пропиши пути к файлам или папкам, которые Copilot должен игнорировать полностью. Это более тонкий контроль, чем settings. json, и он работает на уровне проекта. Например, туда можно добавить файлы с секретами или ключами API (.env, secrets. js).
— Пиши «говорящие» комментарии. Copilot очень хорошо реагирует на комментарии. Вместо того чтобы ждать, пока он угадает твои мысли, напиши подробный коммент, что должна делать функция. // function that fetches users from API, filters by age> 18 and returns only their names. Ты удивишься, насколько точным будет сгенерированный код.
— Не бойся «спорить» с чатом. Используй Copilot Chat как спарринг-партнёра. Спроси его: «Почему это решение лучше, чем [твой вариант]?». Иногда он подкинет дельный аргумент, а иногда ты увидишь, что его логика хромает, и утвердишься в своей правоте. Это круто прокачивает скилл аргументации.
— Путь 2: Всё включено. Разбираем Cursor — IDE, где AI уже под капотом
Если VS Code с Copilot — это кастомная тачка, которую ты собираешь в гараже, то Cursor — это Tesla, которую ты забираешь прямо с завода. Она выглядит знакомо, руль на том же месте, но под капотом (которого нет) — совершенно другая философия. AI здесь не гость с плагином, а хозяин дома. Он не прикручен сбоку, он вплетён в саму ДНК этой IDE.
Что такое Cursor и почему это не «просто ещё один редактор»?
Начнём с главного: Cursor — это форк VS Code. Это значит, что ты не попадёшь в чужой, незнакомый мир. Все твои любимые темы, расширения (да, Prettier и ESLint встанут как родные) и хоткеи будут работать. Интерфейс тебе до боли знаком. Это как пересесть из Volkswagen Golf в Volkswagen e-Golf. Снаружи — почти то же самое, но внутри — тишина, мощь и технологии.
Ключевое отличие в том, что разработчики Cursor взяли опенсорсный код VS Code и пересобрали его вокруг искусственного интеллекта. AI здесь — это не фича. Это фундамент.
Шаг 1. Получи ключи и поехали: установка и первый запуск
Здесь всё до безобразия просто, и в этом первая прелесть этого пути.
— Идёшь на cursor.sh.
— Качаешь версию под свою ОС.
— Ставишь.
— Открываешь.
Всё. Никаких поисков расширений. Никаких отдельных логинов в GitHub для Copilot. Cursor сразу тебя встретит и предложит залогиниться. После этого AI-функции просто… работают. Это тот самый «вау-эффект», как когда ты первый раз видишь, как Tesla сама паркуется. Ты ещё ничего не сделал, а магия уже происходит.
Шаг 2. Что под капотом у этой тачки? Разбираем киллер-фичи
А теперь — мясо. То, ради чего мы здесь собрались. Что именно делает Cursor таким особенным?
1. Ctrl+K (или Cmd+K на Mac) — Твоя волшебная палочка
Это главная фишка, которая меняет правила игры. В связке VS Code + Copilot ты пишешь коммент и ждёшь, пока AI предложит код. Это пассивный процесс.
В Cursor ты действуешь активно. Ты выделяешь код (или просто ставишь курсор на пустое место) и нажимаешь Ctrl+K. Появляется небольшое поле для ввода. И вот тут начинается дискотека.
— Генерация с нуля:
— Ставишь курсор в пустой файл, жмёшь Ctrl+K и пишешь: «Создай React-компонент UserProfile, который принимает пропсы name, avatarUrl и bio. Используй стили Tailwind CSS.»
— Нажимаешь Enter. И Cursor прямо в редакторе, на твоих глазах, пишет готовый компонент. Не серым призрачным текстом, а по-настоящему.
— Рефакторинг и редактирование:
— Это ещё мощнее. Допустим, у тебя есть уродливая функция с кучей if-else.
function getUserStatus (user) { if (user.isBanned) { return «Banned»; } else { if (user.lastLoginТы выделяешь всю эту функцию, жмёшь Ctrl+K и пишешь: «Перепиши это с помощью тернарного оператора, сделай код чище».
Хлоп! Cursor заменяет твой код на элегантный вариант:
function getUserStatus (user) { return user.isBanned ?«Banned» : user.lastLogin— Это как будто у тебя есть личный сеньор-помощник, который по команде чинит твой код. Ты больше не ждёшь предложений, ты отдаёшь приказы.
2. Чат, который знает твой проект (Ctrl+L)
В VS Code у тебя есть Copilot Chat. Он хорош. Но чат в Cursor — это его версия на стероидах. Почему? Потому что он умеет работать с контекстом твоего проекта через @-символы.
Ты открываешь чат (Ctrl+L) и можешь написать что-то вроде:
— «Эй, сравни файлы @components/LoginForm. js и @components/RegisterForm. js и скажи, какой код можно вынести в общий компонент.»
— «Найди все использования функции getUserData во всём проекте (@workspace) и предложи, как её лучше оптимизировать.»
— «Объясни мне, как работает файл @services/api. js. Какие основные функции он экспортирует?»
Он не просто отвечает на общие вопросы. Он читает твой код, анализирует его и даёт ответы, основанные на твоём проекте. Это как будто твой тимлид, который помнит каждую строчку кода, сидит с тобой в чате 24/7.
3. Встроенный AI-дебаггер и фиксер
Когда в твоём коде появляется ошибка (красная волнистая линия), рядом с ней в Cursor часто появляется маленькая кнопка… «Fix with AI». Ты нажимаешь на неё, и AI пытается проанализировать ошибку и предложить исправление.
Это не всегда работает идеально, но когда работает — это чистый кайф. Особенно для новичков, которые могут часами тупить над ошибкой Cannot read properties of undefined. Cursor может просто подсказать: «Братан, ты забыл проверить, что user не null, прежде чем лезть в user.name». Это экономит тонны времени и нервов.
Сравнение лоб в лоб: VS Code + Copilot vs. Cursor
Давай сведём всё в таблицу, как будто сравниваем две тачки для тест-драйва.
Так что выбрать новичку? Кому давать ключи от Tesla?
А вот и главный вопрос. И ответ на него не такой однозначный.
Аргументы «ЗА» Cursor для новичка:
— Низкий порог входа: Не нужно ничего настраивать. Это снимает огромный пласт головной боли и позволяет сразу сфокусироваться на коде.
— «Вау-эффект» и мотивация: Когда ты видишь, как по твоей простой команде рождается целый компонент, это дико мотивирует. Ты чувствуешь себя всемогущим.
— Обучение на практике: Функция «Explain this code» и встроенные фиксы ошибок — это как персональный репетитор, который помогает разобраться в сложных моментах.
Аргументы «ПРОТИВ» (и это важно!):
— Риск стать «обезьянкой с гранатой»: Слишком большая сила в руках того, кто не понимает основ. Новичок может начать генерить тонны кода, не вникая в его суть. Это путь к фейлу, который я описывал в прошлой главе.
— Магия вместо понимания: Когда IDE сама чинит твои ошибки, есть риск, что ты так и не научишься их чинить сам. Ты не пройдёшь через боль дебага, а значит, не нарастишь ту самую «инженерную чуйку».
— Зависимость: Привыкнув к Ctrl+K, будет сложно пересесть на другую IDE, где такой магии нет (например, на работе у тебя может быть стандартный VS Code).
Вердикт:
Cursor — феноменальный инструмент для новичка, но с одним большим «НО». Его нужно использовать не как костыль, а как тренажёр.
— Сгенерил код? Не беги дальше. Сядь и разберись в каждой строчке. Спроси у чата: «А почему ты использовал здесь. reduce (), а не for loop?».
— IDE починила твой баг? Не радуйся, что избавился от проблемы. Посмотри diff, сравни «было» и «стало». Пойми, в чём была твоя ошибка, чтобы не совершить её снова.
Cursor для новичка — это как езда на машине с инструктором, у которого есть свои педали. Он поможет тебе в сложной ситуации, но твоя задача — научиться водить так, чтобы его помощь была не нужна.
Совет от гаражного кодера:
— Не удаляй VS Code. Держи обе IDE. Используй Cursor для быстрого прототипирования и сложных рефакторингов. А потом открывай тот же проект в обычном VS Code, чтобы «почувствовать» код без AI-магии и убедиться, что ты всё ещё контролируешь ситуацию.
— Используй @web в чате Cursor. Это малоизвестная, но убойная фича. Ты можешь попросить его поискать информацию в вебе. Например: "@web найди лучшую библиотеку для создания чартов в React и напиши пример её использования». Он сходит в гугл за тебя.
— Настрой свой AI. В настройках Cursor можно выбрать, какие модели использовать (например, быстрый Claude Sonnet или мощный GPT-4o). Поиграйся с ними. Для простых задач хватит быстрых моделей, для сложной логики переключайся на более умные.
— Помни: Ctrl+K — это диалог. Если первый результат тебе не понравился, не удаляй его. Просто нажми Ctrl+K ещё раз и напиши уточняющий промпт: «Сделай это проще», «Добавь обработку ошибок», «Используй TypeScript». Он будет итерировать поверх существующего кода.
— Путь 3: Облачный вайб. Replit — кодим в браузере с AI-ассистентом
Вступление: когда твой гараж — это ссылка, а не физический адрес
Давай честно — ты хоть раз мечтал, чтобы можно было сидеть на паре, в поезде или даже в туалете и фигачить код без лишней возни с установками? Чтобы не было проблем типа «у меня винда, а у вас мак», чтобы не нужно было настраивать ноду/питон/бабель/webpack и вот это всё, а было только: «Открыл сайт — и в бой!»
Вот именно для этого и существует Replit. Это не просто онлайн-редактор: это твоя полноценная облачная среда, которая сейчас ещё и с АИ-ассистентом под капотом (их фирменный Gun и Ghostwriter). Всё, что тебе нужно — браузер и интернет. Остальное делает Replit.
Почему Replit — реальный вайб для гаражного хакера и стартапщика
1. Кодишь хоть с холодильника
Ты реально можешь начать проект просто с телефона или старого хромбука. Всё хранится в облаке, твоя IDE всегда под рукой, не надо париться с обновлениями и зависимостями. Это прямо как Dropbox для кода: проект всегда свежачок, нигде ничего не слетает. Просто залогинился — и вперед.
2. Быстрый старт — меньше минуты
Запустить новый проект — как сделать чашечку рамена. Заходишь на replit.com, жамкаешь «New Repl», выбираешь язык (Node. js, Python, Rust, что угодно), называешь проект — и сразу в браузере получаешь полный редактор, встроенный терминал, file tree, package manager и кнопку RUN. Всё автоматически билдится и крутится. Даже сервер Node. js с Express поднимается одной кнопкой.
3. AI под капотом — Ghostwriter
AI у Replit называется Ghostwriter. Это твой новый кореш-подсказчик: помогает писать функции, объясняет непонятное, рефакторит, пишет тесты, дебажит и даже… генерит целые функции по простому описанию! Работает прямо в редакторе, советует код на лету или по prompt-запросу.
Типовые фишки:
— Автокомплит в стиле Copilot — написал коммент, получил функцию.
— AI chat. Спрашиваешь: «Почему у меня не работает fetch?» или «Перепиши функцию на async/await», и он реально отвечает.
— Генерация описания к коду, объяснение ошибок, поиск багов.
— Помогает с документацией и юнит-тестами по описанию.
4. Встроенный деплой
Кнопка «Deploy» — и вот уже твой пет-продакшен в интернете. Не надо возиться ни с Vercel, ни с Netlify, ни с VPS. Прототип заработал — кидай ссылку друзьям, инвестору, выкатывай демку для портфолио.
5. Простота коллаборации
Жмёшь Share — и даёшь ссылку корешу; вы вдвоём хачите код в реальном времени. Нет больше гемора с Git, merge conflict’ами, чужими package-версими и «оно не билдится у меня на машине». Всё синхронизировано.
6. Marketplace и Bounties
Находишь интересный проект или задание — можно сразу хакать чужие реплы, делать Pull Requests, даже заработать бабла на простых фичах или багах.
Плюсы Replit для пет-проектов
— Лёгкий старт: не надо ставить ничего локально, живи просто — сразу кодишь.
— AI-ассистент уже встроен, не надо покупать Copilot отдельно.
— Быстрый деплой: твой пет-проект сразу в интернете, можно показать на собеседовании ещё до заливки на GitHub Pages.
— Идеальное решение для учебы и экспериментов: хочешь потестить питоновский скрипт или JS-SDK — запускай тут и сейчас.
— Коллаборации без боли: прямо как Google Docs для кода.
— Поддержка десятка языков из коробки: питон, нода, руст, даже Bash.
Где появляются минусы?
1. Производительность и ограничения
Проекты запускаются на виртуалке в облаке, а не у тебя на ноуте. Это значит, что:
— Если проект тяжёлый — сборка, деплой и тесты идут медленнее, чем на ноуте с норм железом.
— Сервисы «засыпают» через пару минут неактивности (без платной подписки), то есть для демки — топ, для продакшена — уже так себе.
2. Платные фичи
AI-ассистент Ghostwriter и приватные реплы — только для подписчиков. Бесплатно дают поюзать, но если реально хочешь качать — готовь пару баксов в месяц.
3. Не полноценная IDE для энтерпрайза
Пишите пет-проекты, тестируйте, учитесь — кайф. Но если у тебя нужно собрать огромную монолитную систему на 20 микросервисов и 1000 депенденси — лучше брать локальную разработку с привычным Docker, Nx, etc.
4. Немного магии, мало контроля
Здесь за тебя решают, какой линтер, какой билд. Да, можно настраивать файлы, но если нужен хардкорный CI/CD, кастомная линейка dev-стейджингов — Replit покажется детским бассейном.
5. Файловые лимиты
На бесплатном тарифе реплы ограничены по размеру, как и ресурсы процесса. Иногда что-то не билдится из-за лимита, или база данных маленькая по размеру.
Честный гаражный разбор: кому и зачем подходит Replit?
— Новичок:
— Лучшее место, чтобы почувствовать себя настоящим кодером. Ты не тратишь два дня на установку npm и поиск правильной версии Node. js. Всё уже готово, можно писать «Hello, World!» через 1 минуту после регистрации.
— Проект под собеседование:
— Залей сюда pet-проект, посади минимальное API, покажи в браузере без установки, инвестор/компания охренеет.
— Коллаборация на лету:
— Когда срочно нужно скинуть другу фрагмент кода или быстро допилить проект перед дедлайном в универе.
