8 лучших расширений VS Code для разработчиков JS

Работайте умно, а не усердно

Следующий список представляет собой комбинацию удачных находок, которые я сделал в магазине расширений VS Code, наряду с тщательно подобранными предложениями из моих любимых подкастов, таких как Синтаксис, Full Stack Radio и Views On Vue.

Версия объектива

Обновите версии вашего пакета в один клик.

Version Lens - один из тех плагинов, которые заставят вас сказать Вау!

После его установки щелкните большой V в правом верхнем углу, а затем щелкните значок тега версии, чтобы получить текущие версии каждого пакета, который вы используете в данный момент. Одним щелчком мыши вы можете обновить любой пакет без дополнительного поиска. Удивительный!

Стоимость импорта

Посмотрите, какой размер вы жертвуете ради этого импорта.

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

Выделенный текст «Стоимость импорта» изменится с зеленого на красный, если импорт вашего пакета считается тяжелым. Использование толстого пакета может быть хорошим, но, увидев эти красные линии, вы можете быть мотивированы искать что-то более легкое, чтобы удовлетворить потребности вашего проекта.

Vuln

Обнаруживайте уязвимости в любом импортированном пакете.

После установки Vuln перейдите в свой package.json файл и посмотрите, как он проверяет каждый элемент в вашем списке, чтобы узнать, существуют ли какие-либо известные уязвимости. Если да, то они будут выглядеть, как показано ниже:

При наведении указателя мыши на проблему отобразится всплывающее окно, которое позволит вам точно узнать, в чем заключается уязвимость, а также предложит варианты ее устранения (если они доступны).

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

Дерево Тодо

С легкостью просматривайте каждогоTODO в своем проекте.

После установки активируйте Дерево Todo, щелкнув значок дерева на боковой панели VS Code. На панели файлов будут отображаться только файлы, в которых есть TODO.

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

Это особенно удобный плагин для этапа рефакторинга ваших проектов.

SnipSnap

Стандартизируйте доступ к сниппетам на всех используемых вами языках.

SnipSnap был создан для решения нескольких задач:

Доступ ко всем сниппетам для каждого языка в одном расширении
Стандартизируйте доступ к сниппетам на всех языках
Сделайте ваши собственные пользовательские сниппеты легкодоступными

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

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

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

Код Время

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

Code Time - это блокировка вас в этом удивительном режиме потока, когда ваши пальцы летают по клавиатуре, и вы выбиваете функции проекта, как бог кодирования.

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

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

Время музыки

Глобальное сообщество разработчиков статистики по состоянию потока.

Еще один замечательный плагин от создателей Code Time!

Проще говоря, Music Time открывает представление о том, с какой музыкой вы лучше всего кодируете.
Просто подключите свою учетную запись Spotify и начните кодировать. Остальное сделает Music Time. По прошествии нескольких дней проверьте, когда вы были наиболее продуктивны, основываясь на музыке, которую вы слушали.

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

Бонус - i18n Ally

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

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

Вот лишь некоторые из замечательных вещей, которые позволяет вам делать i18n Ally:

Установите язык отображения по умолчанию для строк перевода вашего шаблона
Получите мгновенный перевод Google для любого ключа i18n в вашем шаблоне
Редактируйте файлы перевода JSON прямо в своих шаблонах
Иметь ссылку одним щелчком на соответствующий файл перевода

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