Улучшение опыта работы фронтенд-разработчика с помощью AI. Пишем свою обертку над GPT-3

Привет! Вы наверняка слышали множество разговоров о том, как AI изменит мир и нашу работу в будущем. Однако, многие из этих разговоров не концентрируются на том, как именно можно использовать технологию AI для улучшения конкретных процессов. В этой статье мы поговорим о том, как использование GPT-3 может помочь вам улучшить опыт работы frontend-разработчика.

GPT-3 — это мощный искусственный интеллект, который может генерировать тексты на основе анализа огромного количества данных. Он может быть очень полезен для различных задач, связанных с frontend-разработкой, от написания кода до создания документации.

Давайте рассмотрим некоторые из задач, с которыми сталкиваются фронтенд-разработчики, и посмотрим, как GPT-3 может помочь в их решении:

• Написание кода. Часто, чтобы написать хороший код, нужно учитывать множество факторов, например контекст, задачу, которую нужно решить, и возможные ошибки. С помощью GPT-3 вы можете генерировать умные подсказки, которые помогут вам написать более качественный код быстрее. Например, инструменты, основанные на GPT-3, могут генерировать код на основе входных данных и контекста, что может сэкономить много времени и усилий. Один из примеров такого инструмента — Github Copilot, который следит за контекстом написания и предлагает умные подсказки.

• Тестирование. Создание тестов — важная часть работы frontend-разработчика, которая помогает убедиться, что код работает правильно и не содержит ошибок. GPT-3 может помочь сгенерировать базовые тесты автоматически на основе ваших данных, что позволит сэкономить время и силы. Также GPT-3 может использоваться для создания автоматических тестов, которые проверяют работу приложения в широком диапазоне сценариев. Я тестировал написание тестов с помощью ChatGPT и результат был отличным. Но в текущем рабочем проекте мы не пишем тесты, поэтому оставлю эту идею на следующую публикацию.

• Документация. Создание документации — это важная, но не всегда приятная работа. GPT-3 может помочь автоматизировать процесс создания документации. Последние полгода я использую VSCode расширение Mintlify для автоматической генерации JSDoc документации. В Javascript это позволяет добиться небольшой типизации и упростить работу для других разработчиков. Более комплексные участки кода я по прежнему документирую вручную.

Что скрывается за термином «Developer Experience»? Это может быть все, что угодно, начиная от языка программирования и фреймворков и заканчивая конвенциями о форматах API, линтерах, именах переменных, коммитах и т. д. В этой статье мы рассмотрим то, что я подразумеваю под этим термином.

Developer Experience означает, что разработчику не нужно думать о каких-то правилах, таких как кодстайлы, правила для линтеров и конвенции по написанию кода. Недавно я просил ChatGPT исправить некоторые eslint-ошибки в проекте, и он прекрасно справился с этой задачей. Однако стоит ли создавать отдельный инструмент для этого, если уже есть автоматическое исправление в eslint? Я считаю, что нет. Лучше научиться настраивать eslint.

Однако, что действительно может вызывать проблемы — это коммиты. Для их именования существуют готовые конвенции, например, Conventional Commits. Для проверки этих коммитов можно использовать Commitlint.

Представьте, что вам нужно сделать ревью кода и понять, что он делает. В каком из двух вариантов вам будет проще соориентироваться?

Я также являюсь большим поклонником использования Gitmoji в проектах. Эта методология позволяет гораздо проще интерпретировать тип изменений, вносимых в код, одним смайликом. Gitmoji — это отличный способ отслеживать изменения, которые вносятся, и это может сэкономить много времени при просмотре кода. Кроме того, он может быть использован для быстрого понимания сложности определенного изменения и возможного влияния на проект. В общем, использование Gitmoji — это невероятно полезный инструмент, который я очень рекомендую всем, кто работает с кодом в команде.

Атомарные коммиты — это когда каждый коммит задевает минимальную область изменений (обычно до 20-30 строк кода и одного файла)

Атомарные коммиты могут быть полезны для разработчика. Они помогают сделать ясное и легко читаемое представление изменений. Лучше делать мелкие коммиты, чтобы было проще отслеживать историю и исправлять ошибки. Атомарные коммиты позволяют писать качественный код и отвечать за свои изменения. Но вводить 100 символов описания для каждых 10 строчек — лень 🫡

И раз пока не придумали инструмент, который генерирует названия коммитов, с учетом всех моих предпочтений, за нас — давайте я сам сделаю такой инструмент и расскажу, как интегрирую его в свой процесс разработки.

Упс, кликбейт. VC не заточен на публикацию кода и форматирование статьи вызывает большую боль. Если вы заинтересованы в подробностях процесса разработки, я выложил подробную статью с кодом в моем телеграм канале. Я рассказываю о каждом шаге создания библиотеки для генерации коммитов и интеграции ее в процесс разработки. Присоединяйтесь к моему каналу, чтобы не пропустить другие статьи, уроки и полезную информацию для разработчиков. Я уверен, что вы найдете много интересного и полезного на моем канале, поэтому не стесняйтесь подписываться и следить за новыми публикациями.

Я опубликовал пакет по адресу https://www.npmjs.com/package/ai-commit и теперь, для того чтобы его использовать на любом компьютере, мне нужно сделать 3 вещи.

1. Установить глобально env переменную с openai_API_KEY. Я добавлял ключ на маке по этой инструкции, для своих ОС можете попросить совет у ChatGPT (ну или загуглить, как бумеры)
2. Установить глобально пакет: `npm install -g ai-commit`
   
3. Воспользоваться библиотекой в любом месте, где вы совершаете изменения с помощью команды `ai-commit` в терминале.
   
4. Вы великолепны ✨
   

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

1. Добавляем в VSCode расширение Command Runner
2. Нажимаем Cmd + Shift + P и ищем пункт Open Keyboard Shortcuts (JSON)
   
3. В конце списка шорткатов добавляем еще один, с таким содержимым:
4. Теперь мы на любое небольшое изменение просто нажимаем Cmd + Enter и получаем готовый коммит. Добавлять файлы вручную для этого не обязательно.
   

И так, мы подошли к концу статьи. Я надеюсь, что вам удалось получить некоторые полезные советы и идеи, которые помогут вам стать более продуктивным и эффективным в своей работе.

Современные технологии, включая искусственный интеллект, могут помочь вам ускорить процесс разработки, сделать его более эффективным и удобным.

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

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

Я надеюсь, что моя библиотека и советы помогут вам достигнуть новых высот в вашей работе. Желаю вам удачи и успехов в вашей профессиональной деятельности! Подписывайтесь на мой блог, на мой телеграм канал, ставьте лайки и до скорой встречи 💜