В течение последних двух лет я и моя команда Work & Co тестировали и постепенно интегрировали инструменты кодирования искусственного интеллекта, такие как Copilot, Cursor, Claude и ChatGPT, чтобы помочь нам создавать веб-интерфейсы, используемые массами. Признаюсь, после некоторого первоначального скептицизма и нескольких моментов ага, различные инструменты искусственного интеллекта нашли свое применение в моей повседневной жизни. Со временем список приложений, в которых, по нашему мнению, имело смысл позволить ИИ взять на себя управление, начал расти, поэтому я решил поделиться некоторыми практическими примерами использования инструментов ИИ для тех, кого я называю «ответственным разработчиком». Что я подразумеваю под ответственным разработчиком? Мы должны быть уверены, что предоставляем качественный код, соответствующий ожиданиям наших заинтересованных сторон и клиентов. Наш вклад (т. е. запросы на включение) не должен становиться бременем для наших коллег, которым придется проверять и тестировать нашу работу. Кроме того, если вы работаете в компании: инструменты, которые мы используем, должны быть одобрены нашим работодателем. Деликатные аспекты, такие как безопасность и конфиденциальность, должны обрабатываться должным образом: не вставляйте секреты, данные клиентов (PII) или собственный код в инструменты без одобрения политики. Относитесь к нему как к коду, полученному незнакомцем в Интернете. Всегда тестируйте и проверяйте. Примечание. В этой статье предполагается базовое знакомство с инструментами кодирования искусственного интеллекта, такими как Copilot, внутри VSCode или Cursor. Если все это кажется вам совершенно новым и незнакомым, видеоуроки Github Copilot могут стать для вас отличной отправной точкой.
Полезные применения инструментов ИИ-кодирования Примечание. Следующие примеры в основном посвящены работе с веб-приложениями на основе JavaScript, такими как React, Vue, Svelte или Angular. Получение понимания незнакомой кодовой базы Нередко приходится работать с устоявшимися базами кода, и присоединение к большой устаревшей базе кода может быть пугающим. Просто откройте свой проект и свой AI-агент (в моем случае Copilot Chat в VSCode) и начните задавать вопросы так же, как вы бы задали коллеге. В общем, мне нравится разговаривать с любым агентом ИИ так же, как с обычным человеком. Вот более уточненный пример приглашения: "Дайте мне общий обзор архитектуры: точки входа, маршрутизация, аутентификация, уровень данных, инструменты сборки. Затем перечислите 5 файлов для чтения по порядку. Рассматривайте объяснения как гипотезы и подтвердите их, перейдя к ссылочным файлам".
Вы можете продолжать задавать дополнительные вопросы, например: «Как работает маршрутизация в деталях?» или «Расскажите мне о процессе и методах аутентификации», и это приведет вас к полезным указаниям, которые помогут пролить свет на темноту незнакомой кодовой базы. Анализ критических изменений при обновлении зависимостей Обновление пакетов npm, особенно если они содержат критические изменения, может оказаться утомительной и трудоемкой работой, а также потребует отладки большого количества регрессий. Недавно мне пришлось обновить библиотеку визуализации данныхplotly.js до одной основной версии с версии 2 до 3, и в результате разметка осей на некоторых графиках перестала работать. Я спросил ChatGPT: "Я обновил свой проект Angular, использующий Plotly. Я обновил пакетplotly.js — dist с версии 2.35.2 до 3.1.0 — и теперь метки на осях X и Y исчезли. Что случилось?"
Агент быстро вернулся с решением (см. ниже). Примечание. Перед отправкой исправления я все же сверил объяснение с официальным руководством по миграции.
Безопасное тиражирование рефакторинга в разных файлах Растущая кодовая база, безусловно, открывает возможности для консолидации кода. Например, вы заметили дублирование кода в файлах, которые можно извлечь в одну функцию или компонент. В результате вы решаете создать общий компонент, который можно включить вместо него, и выполнить этот рефакторинг в одном файле. Теперь вместо того, чтобы вручную вносить эти изменения в оставшиеся файлы, вы просите своего агента провести рефакторинг за вас. Агенты позволяют выбирать несколько файлов в качестве контекста. После завершения рефакторинга одного файла я могу добавить как рефакторинг, так и нетронутые файлы в контекст и предложить агенту распространить изменения на другие файлы следующим образом: «Скопируйте изменения, которые я внес в файл A, также в файл B». Реализация функций в незнакомых технологиях Одним из моих любимых моментов, когда я использовал инструменты ИИ-кодирования, было то, что они помогли мне создать довольно сложную анимированную градиентную анимацию на GLSL, языке, с которым я был довольно незнаком. В недавнем проекте наши дизайнеры придумали анимированный градиент в качестве состояния загрузки 3D-объекта. Мне очень понравилась эта концепция, и я хотел предложить нашим клиентам что-то уникальное и захватывающее.Проблема: у меня было всего два дня, чтобы реализовать это, а GLSL требует довольно крутого обучения. И снова мне пригодился инструмент искусственного интеллекта (в данном случае ChatGPT), и я начал довольно просто предлагать ему создать для меня отдельный HTML-файл, который отображает холст и очень простой анимированный цветовой градиент. Шаг за шагом я просил ИИ добавлять к нему больше утонченности, пока не достиг достойного результата, чтобы я мог начать интегрировать шейдер в свою реальную кодовую базу. Конечный результат: наши клиенты были очень довольны, и благодаря искусственному интеллекту мы реализовали сложную функцию за небольшой промежуток времени. Написание тестов По моему опыту, в проектах редко бывает достаточно времени для непрерывного написания и поддержки надлежащего набора модульных и интеграционных тестов, и, кроме того, многим разработчикам не очень нравится задача написания тестов. Попросить вашего помощника по искусственному интеллекту настроить и написать для вас тесты вполне возможно, и это можно сделать за небольшой промежуток времени. Конечно, вы, как разработчик, все равно должны убедиться, что ваши тесты действительно рассматривают критически важные части вашего приложения и следуют разумным принципам тестирования, но вы можете «передать» написание тестов нашему помощнику по искусственному интеллекту. Пример приглашения: "Напишите модульные тесты для этой функции с помощью Jest. Опишите счастливый путь, крайние случаи и режимы сбоя. Объясните, почему существует каждый тест".
Вы даже можете передать лучшие практики тестирования гуру тестирования Кента К. Доддса в качестве рекомендаций своему агенту, как показано ниже:
Внутренняя оснастка Что-то похожее на пример с шейдером, упомянутый ранее, недавно мне было поручено проанализировать дублирование кода в кодовой базе и сравнить до и после рефакторинга. Конечно, это нетривиальная задача, если вы не хотите идти по трудоемкому пути сравнения файлов вручную. С помощью Copilot я создал скрипт, который анализировал дублирование кода, упорядочивал выходные данные в таблице и экспортировал их в Excel. Затем я сделал еще один шаг вперед. Когда рефакторинг нашего кода был завершен, я предложил агенту взять существующий лист Excel в качестве базового, добавить текущее состояние дублирования в отдельные столбцы и вычислить дельту. Обновление кода, написанного давно Недавно ко мне обратился мой старый клиент, так как со временем некоторые функции на его сайте перестали работать должным образом. Подвох: веб-сайт был создан почти десять лет назад, а JavaScript и SCSS использовали довольно старые инструменты компиляции, такие как requireJS, а для установки требовалась более старая версия Node.js, которая даже не работала на моем MacBook 2025 года. Обновление всего процесса сборки вручную заняло бы у меня несколько дней, поэтому я решил спросить агента ИИ: «Можете ли вы обновить процесс сборки JS и SCSS до более экономичного стека 2025 года, такого как Vite?» Это действительно так, и примерно через час уточнений с агентом я переключил свою сборку SCSS и JS на Vite, и я смог сосредоточиться на фактическом исправлении ошибок. Просто не забудьте правильно проверить выходные и скомпилированные файлы при внесении таких комплексных изменений в процесс сборки. Подведение итогов и составление Хотели бы вы суммировать все ваши недавние изменения кода в одном предложении для сообщения о фиксации или иметь длинный список коммитов и хотели бы суммировать их в трех пунктах? Нет проблем, пусть об этом позаботится ИИ, но обязательно вычитайте его. Пример подсказки так же прост, как сообщение другому человеку: «Пожалуйста, кратко изложите мои недавние изменения». Мой совет: используйте GPT для написания с осторожностью и, как и в случае с кодом, проверяйте выходные данные перед отправкой или отправкой. Рекомендации и лучшие практики Подсказка Одним из не столь очевидных преимуществ использования ИИ является то, что чем более конкретны и адаптированы ваши подсказки, тем лучше результат. Процесс подсказки агенту ИИ заставляет нас формулировать наши требования как можно более конкретно, прежде чем мы напишем и напишем код. Вот почему, как правило, я настоятельно рекомендую высказывать подсказки как можно более конкретно. Райан Флоренс, соавтор Remix, предлагает простой, но эффективный способ улучшить этот процесс, закончив первоначальную подсказку предложением: — Прежде чем мы начнем, у вас есть ко мне вопросы?
На этом этапе ИИ обычно возвращается с полезными вопросами, на которых вы можете уточнить свои конкретные намерения, помогая агенту предложить вам более индивидуальный подход для вашей задачи.
Используйте контроль версий и работайте удобоваримыми частями Использование контроля версий, такого как git, не только полезно при совместной работе над единой кодовой базой, но и дает вам возможностьиндивидуальный участник со стабильными точками, к которым можно вернуться в случае чрезвычайной ситуации. Из-за своей недетерминированной природы ИИ иногда может пойти наперекор и внести изменения, которые просто бесполезны для того, чего вы пытаетесь достичь, и в конечном итоге непоправимо все сломать. Разделение вашей работы на несколько коммитов поможет вам создать стабильные точки, к которым вы сможете вернуться, если что-то пойдет не так. И ваши товарищи по команде тоже будут вам благодарны, поскольку им будет легче просматривать ваш код, когда он разделен на семантически хорошо структурированные фрагменты. Тщательно просмотрите Это скорее общая передовая практика, но, на мой взгляд, она становится еще более важной при использовании инструментов ИИ для разработки: будьте первым критическим рецензентом своего кода. Обязательно уделите некоторое время просмотру своих изменений построчно, точно так же, как вы просматриваете чужой код, и отправляйте свою работу только после того, как она пройдет вашу собственную самопроверку. "Две вещи для меня сейчас верны: агенты ИИ удивительны и дают огромный прирост производительности. Они также являются огромными отстойными машинами, если вы отключите свой мозг и полностью отпустите его", - Армин Роначер в своем сообщении в блоге "Агент Психоз: мы сходим с ума?"
Заключение и критические мысли По моему мнению, инструменты ИИ-кодирования могут повысить нашу ежедневную производительность как разработчиков и высвободить умственные способности для более тщательного планирования и мышления высокого уровня. Они заставляют нас детально сформулировать желаемый результат. Любой ИИ может время от времени галлюцинировать, что, по сути, означает, что он говорит уверенным тоном. Поэтому обязательно проверяйте и тестируйте, особенно если у вас есть сомнения. ИИ — не панацея, и я считаю, что мастерство и способность разработчика решать проблемы никогда не выйдут из моды. Для разработчиков, которые только начинают свою карьеру, эти инструменты могут оказаться очень заманчивыми, чтобы сделать большую часть работы за них. Что здесь может потеряться, так это зачастую утомительная и болезненная работа над ошибками и проблемами, которые сложно отладить и решить, так называемая «шлифовка». Даже Ли Робинсон из Cursor AI задается этим вопросом в одном из своих постов:
Инструменты кодирования ИИ развиваются быстрыми темпами, и я с нетерпением жду того, что будет дальше. Я надеюсь, что эта статья и ее советы оказались для вас полезными, и вы с радостью опробуете некоторые из них на себе.
