6 расширений VS Code для фронтенд-разработчиков

Как разработчик, вы всегда ищете передовые инструменты, приемы и расширения для повышения производительности и эффективности.

Умение лучше управлять своим временем - ценный навык для разработчиков программного обеспечения. Поэтому вот список расширений Visual Studio Code, которые помогают фронтенд-разработчикам (и не только!) повысить свою производительность как минимум на 10-20%.

1. Stepsize for TODOs & Tech Debt

Stepsize - это трекер проблем внутри вашего редактора для управления техническим заданием и проблемами техподдержки.

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

Stepsize позволяет вам:

• Создавать и просматривать проблемы кода прямо из редактора
• Отслеживать и определять приоритеты улучшений кода (технический долг)
• Добавлять ключевые проблемы в спринты с помощью интеграции с Jira
• Сотрудничать с командой для решения технических проблем

Вот как вы можете сделать закладку на код и создать задачу:

Это отличный инструмент для команд, которые хотят сделать технический задание видимым и начать его сокращать.

2. Quokka.js for JavaScript

Многие разработчики, вероятно, уже слышали о Quokka.js, который служит быстрой платформой для создания прототипов кода.

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

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

На мой взгляд, это удобный инструмент для создания прототипов кода, доступ к которому можно получить из палитры команд VSCode. Однако стоит знать, что Quokka.js также поставляется с версией Pro, которая предлагает вам больше возможностей, таких как:

• Импорт файлов из проекта: Эта функция полезна, когда вы создаете прототип кода, который требует вспомогательной функции или любой другой функции из вашего проекта.
• Быстрая установка пакетов: Когда вы хотите поэкспериментировать с пакетом NPM, вы можете импортировать его в свой файл Quokka.js.
• Живые комментарии: Вы можете использовать формат комментариев asSpecial для оценки любых выражений. Вы также можете написать любой код JavaScript прямо в комментарии, чтобы сформировать вывод.

Одним словом, Quokka.js - это обязательное расширение для разработчиков, позволяющее быстро создавать прототипы кода. Мы не хотим рекламировать платные подписки, однако Pro-версия Quokka может сэкономить вам еще больше времени.

3. Ponicode for JavaScript Unit Testing

"Ponicode - это пакет расширений на основе искусственного интеллекта, который генерирует модульные тесты за вас. Он помогает вам быстро и легко создавать, визуализировать и запускать модульные тесты для ваших функций благодаря генерируемым ML-сценариям тестирования и интуитивно понятному графическому интерфейсу".

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

Наконец, графический интерфейс позволяет создавать модульные тесты визуально и автоматически создает файлы тестов. Это определенно экономит время!

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

4. StackFinder for Stack Overflow

Почти каждый разработчик ежедневно использует Stack Overflow для поиска ответов на свои вопросы. Это один из самых известных сайтов для разработчиков. Я часто открываю Stack Overflow, чтобы подтвердить свою идею или найти лучшее решение, чем то, которое я создал.

Чтобы сэкономить время, StackFinder позволяет искать ответы на Stack Overflow из редактора VSCode. Кроме того, вы можете копировать решения в свой редактор, чтобы опробовать их.

Это быстрая альтернатива открытию браузера, заполненного вкладками Stack Overflow. Лично мне понравилось использовать это решение, поскольку мне не нужно выходить из редактора и можно работать, не отвлекаясь!

Посмотрите это видео, чтобы увидеть, как это работает:

5. Wallaby.js

Wallaby.js принадлежит тем же создателям, что и Quokka.js. Wallaby.js - это инструмент повышения продуктивности разработчика, который запускает тесты JavaScript и TypeScript сразу после ввода текста, выделяя результаты в вашей среде IDE рядом с кодом.

Это ценное расширение, которое показывает вам результаты в реальном времени при написании кода ваших модульных тестов. Я считаю очень полезным видеть результаты и отлаживать тесты в режиме реального времени. Как видите, Wallaby.js похож на Quokka.js, используя те же встроенные отчеты.

6. GitLive for Better Team Coordination

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

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

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

Заключение

Основная задача разработчиков по повышению производительности - устранить отвлекающие факторы из своей повседневной деятельности.
StackFinder - это интересное и ценное расширение, позволяющее не отвлекаться. Открытие веб-браузера может вызвать множество всплывающих уведомлений, которые отвлекают вас. Даже StackOverflow может стать источником отвлечения.

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

Источник: https://dev.to/alexomeyer/7-vs-code-extensions-for-frontend-developers-7f8