Разработчики всегда обращают внимание на новейшие инструменты, интересные приемы работы со старыми инструментами и расширения для увеличения продуктивности.
Представляем вам список расширений для редактора VS Code, которые помогут фронтенд-разработчикам (и не только им!) повысить эффективность их работы.
1. Sourcery для Python
Sourcery — очень полезный инструмент для Python-разработчиков, желающих улучшить стиль своего кода. Это нечто вроде личного помощника, дающего советы по коду буквально на лету. Он будет показывать вам, как написать лучший и более чистый код на Python, предлагая варианты рефакторинга.
Это расширение запускается в фоне и выделяет участки кода, которые можно улучшить.
Вот пример, показывающий, как можно сделать рефакторинг сложного блока if-else:
Sourcery имеет и Pro-версию. В ней вы найдете больше функционала. Например, там есть проверка на дублирование кода.
2. Stepsize для TODO и работы с техническим долгом
Stepsize — issue-трекер в вашем редакторе. С его помощью можно управлять техническим долгом и задачами поддержки.
Допустим, вы наткнулись на участок кода, который нужно усовершенствовать. Но у вас нет времени заняться этим прямо сейчас. Установив Stepsize, вы сможете сделать закладку для этого отрывка кода или создать issue.
При помощи Stepsize можно:
- создавать и просматривать issues прямо в редакторе
- отслеживать технический долг и расставлять приоритеты для задач, связанных с ним
- добавлять ключевые issues в ваши спринты при помощи интеграции с Jira
- работать над техническими проблемами совместно с командой.
Вот как делаются закладки и создаются issue:
Это отличный инструмент для команд, которые хотят сделать технический долг видимым и начать погашать его.
3. Quokka.js для JavaScript
Многие разработчики, пожалуй, уже слышали о Quokka.js. Это расширение играет роль песочницы для прототипирования кода.
У меня, например, часто бывают ситуации, когда я хочу протестировать сложный отрывок кода. Чтобы это сделать, создается его прототип в отдельном файле для лучшей видимости входящих и выходящих данных.
Это означает, что мне нужно создать новый файл, написать код и запускать его после каждого внесения изменений. Кроме того, я добавляю бессчетные console.log для просмотра формата данных при прохождении через функцию.
На каком-то этапе моей карьеры коллега посоветовал мне начать пользоваться Quokka.js. Благодаря этому расширению мы вычеркиваем из списка создание файла и процедуру логирования данных. Quokka.js выводит на экран output каждого шага прямо в редакторе и указывает на неправильный код сообщениями в той же строке.
Мне кажется, это очень удобный инструмент для прототипирования кода, к которому можно получить доступ из палитры команд VS Code.
Но стоит также упомянуть, что есть и Pro-версия, предлагающая дополнительный функционал:
- Импорт файлов изнутри проекта. Это полезно, когда вы прототипируете какой-нибудь код, для которого нужна вспомогательная (или любая другая) функция из вашего проекта.
- Быстрая установка пакетов. Если вы хотите поэкспериментировать с NPM-пакетом, вы можете импортировать его в ваш Quokka.js-файл.
- Живые комментарии. Вы можете использовать формат комментариев asSpecial для оценки любых выражений. Также можно писать любой JavaScript-код в комментарии, чтобы сформировать результат.
Короче говоря, Quokka.js это мастхэв-расширение для быстрого прототипирования кода. И не то чтобы я рекламировал именно платную версию, но она действительно способна сэкономить вам еще больше времени.
4. Ponicode для модульного тестирования JavaScript-кода
«Ponicode — расширение, работающее на основе AI и генерирующее юнит-тесты. Оно поможет вам быстро и легко создавать, визуализировать и запускать юнит-тесты для ваших функций. И все это — благодаря тестовым сценариям, сгенерированным при помощи машинного обучения».
Как видно из описания расширения, оно предназначено для создания юнит-тестов. Но оно не только генерирует тесты при помощи алгоритмов машинного обучения. Это расширение также покажет вам наиболее важные пути в вашем коде. Эта информация пригодится при оптимизации тестирования: она позволит сосредоточиться на главном.
Таким образом, Ponicode оптимизирует ваши усилия по созданию надежного кода и помогает обнаруживать самые опасные баги на ранних стадиях. Кроме того, Ponicode предлагает релевантные инпуты для ваших тестовых сценариев, чтобы сделать их еще более эффективными.
Наконец, интуитивный графический интерфейс позволяет создавать юнит-тесты визуально, а файлы тестов создаются автоматически. Это очень экономит время!
5. StackFinder для Stack Overflow
Практически все разработчики ежедневно пользуются Stack Overflow для поиска ответов на вопросы, связанные с кодингом. Это один из самых известных сайтов для разработчиков. Например, я часто захожу туда, чтобы проверить свои идеи или поискать решение получше собственного.
StackFinder позволяет искать ответы на Stack Overflow, не выходя из редактора VS Code. Кроме того, вы сможете копировать решения в редактор и проверять их в деле.
Конечно, можно открыть браузер и кучу вкладок со Stack Overflow, но с расширением StackFinder поиск ответов ускорится.
Посмотреть, как работает расширение, можно в видео.
6. Wallaby.js
Wallaby.js создали авторы Quokka.js. Это инструмент для повышения продуктивности разработки. Он запускает ваши JavaScript и TypeScript-тесты прямо пока вы пишете их код и высвечивает результаты в IDE рядом с кодом.
Мне это расширение кажется очень полезным, поскольку позволяет видеть output и дебажить тесты в режиме реального времени.
Как видите, расширение Wallaby.js похоже на Quokka.js выводом сообщений прямо в строке кода.
7. GitLive для лучшей командной работы
Удаленная работа стала обычным делом во многих компаниях, занимающихся разработкой программ. В результате налаженная коммуникация между разработчиками стала еще более важной. Расширение GitLive улучшает опыт совместной работы в распределенных командах.
С GitLive вы можете подключаться к вашим товарищам по команде и смотреть, в каких репозиториях, ветках и файлах они работают. Кроме того, можно подсоединить к GitLive вашу программу для issue-трекинга, чтобы было видно, кто какими тикетами занимается.
Это отличный инструмент для удаленных команд. Он позволяет видеть, кто что делает, и благодаря этому предотвращаются многие конфликты слияния. Например, если вы работаете над одним файлом в разных ветках или фичах, вы можете увидеть это при помощи GitLive. В общем, это расширение предотвращает конфликты слияния еще на взлете.
От редакции Techrocks. Также советуем почитать «Лучшие расширения VS Code для удаленной работы» и «Самые лучшие расширения VS Code для работы с Git».
Заключение
Самое важное, что можно сделать для повышения производительности разработчика, — устранить отвлекающие факторы. Открытие браузера для поиска ответов на StackOverflow может запустить множество уведомлений, которые вас отвлекут. Да и сам StackOverflow может быть еще тем отвлекающим фактором. StackFinder — интересное и ценное расширение, позволяющее сохранять концентрацию.
А эффективность команд во многом зависит от качества коммуникации в них. И такие расширения, как Stepsize и GitLive, могут пригодиться для ее улучшения.
Перевод статьи «7 VS Code Extensions for Frontend Developers».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]