Самые необходимые расширения VS Code для frontend разработки (Часть 1)

В этот статье вы познакомитесь с полезными расширениями (плагинами) для редактора Visual Studio Code, необходимыми для веб-разработчиков. Эти расширения сводят к минимуму рутинную работу и ускоряют процесс написания кода.

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

Подключение журнала сообщений для отладки кода

Редко какое из создаваемых приложений может обходиться без журнала логирования. Он же существенно помогает при отладке создаваемого кода. И здесь можно посоветовать использование расширения turbo-console-log. Оно автоматизирует операцию записи значимых сообщений журнала и вставляет их автоматически.

Все, что для этого потребуется сделать - это выбрать переменную, которую мы хотим отлаживать и нажать сочетание Ctrl+ Alt+ L. Сообщение журнала будет вставлено в следующую строку. Сочетания клавиш позволяют комментировать, раскомментировать или удалять все сообщения журнала из текущего документа.

Контроль объема пакетов

Мы все знаем, что производительность имеет значение, но на практике довольно сложно не упустить ее из виду в процессе написания кода. Чтобы держать размер пакета в поле видимости и под контролем можно использовать расширение import-cost - оно позволяет сразу узнать не импортируем ли мы здоровенный пакет в свой проект.

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

Автоматическое форматирование кода

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

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

Хранение полезных фрагментов кода

Часто приходится напрягать свою память и судорожно рыться в проектах, и это только потому, что есть ощущение повторного написания какого-то фрагмента кода. Кому охота делать одну и ту же работу дважды! Хорошо бы набирать фрагменты, которые часто нужны, а не делать все с нуля? Вот несколько удобных маленьких помощников, облегчающих эту работу.
Здесь часто придутся столкнуться с термином сниппет (snippet). Давайте разберемся что это такое. Сниппеты (code snippets) - это небольшие фрагменты текста, которые можно вставлять в основной код приложения, а затем настраивать в соответствии с его требованиями. Они не позволяют генерировать законченные приложения или целые файлы в отличие от шаблонов проекта и элементов управления. Вместо этого они используются для вставки часто используемых структур или запутанных блоков программ, которые тяжело запомнить.
Для работы с Vue обязательно нужно познакомиться с расширением Vue VSCode Snippets. Оно было создано для использования в процессе разработки кода и ориентировано на эргономику разработчиков, а не на систематизацию определений API.
Для тех, кто стабильно работает с React может быть полезным набор основных фрагментов и команд React.
И если нужны сниппеты Angular - обратите внимание на расширение фрагменты для Angular для TypeScript и HTML.
Также для разработки могут пригодиться: расширение фрагментов кода JavaScript (содержит фрагменты в синтаксисе ES6 и поддерживает как JavaScript, так и TypeScript) и фрагменты кода jQuery (содержат более 130 фрагментов кода jQuery).
Раз уж мы говорим о сниппетах, то хорошую библиотеку сниппетов можно собрать из коллекций:

Создание скриншотов программного кода

Иногда так хочется сделать красивый скриншот программного когда, но не всегда получается. Получить красивые скриншоты кода поможет расширение Polacode.

Polacode позволяет делать и редактировать скриншоты кода непосредственно в VS Code. Причем можно изменить размер контейнера кода, перетащив угол, и использовать команды для управления внешним видом изображения. Отличное решение для того, чтобы код, на который было потрачено столько часов, просто сиял — например, в статьях блога или презентациях.

Вставка "человеческих" комментариев

Как вы относитесь к комментариям? Если код требует большого количества пояснений то их рано или поздно придется делать. Обычные комментарии, выделенные серым цветом, не совсем удобны с точки зрения командной работы.

Расширение VS Code Better Comments поможет сделать комментарии более функциональными, разделив их на предупреждения, запросы, задачи, основные моменты и многое другое.

Отладка Chrome внутри VS Code

В процессе разработки с использованием Chrome часто нужно переключаться между браузером и редактором при отладке. Для автоматизации этой операции можно попробовать отладчик VS Code Chrome. Он помогает отлаживать код JavaScript на стороне клиента, который запускается в Chrome непосредственно из VS Code.

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

DevTools для VS Code

Было бы здорово интегрировать DevTools в редактор кода, чтобы избежать переключения между ними. Если в процессе разработки приходится задействовать связку: VSCode и Edge - небольшое расширение сделает это возможным.

Расширение показывает браузерный инструмент "Элементы и сеть" внутри
VSCode , что дает возможность видеть структуру HTML во время выполнения, изменять стиль и макет, выполнять диагностику и отлаживать проект — не выходя из редактора.

Управление файлами в VS Code

Много времени тратится на организацию файлов и управление ими. Расширение File Utils упрощает эту задачу.

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

Добавление тегов к файлам

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

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

Подключение шрифтов для кодирования

Программные шрифты, безусловно, являются рабочими лошадками в типографике. Они должны обеспечивать отличную читаемость, обеспечивать быстрое сканирование текста и предотвращать утомление глаз, даже если разработчик часами смотрит на код.
Чтобы помочь найти шрифт для программирования, который соответствует вашим потребностям рекомендуется посмотреть в сторону
Coding Fonts - набора из более чем 30 (в основном бесплатных) моноширинных шрифтов, которые соответствуют этим критериям.

Чтобы упростить принятие решения, каждый шрифт снабжен кратким описанием, обзором всех символов и примерами кода HTML, CSS и JavaScript как в дневном, так и в ночном режиме. Чтобы добавить пользовательские шрифты в VS Code, вам нужно
определить шрифт в «Настройках»
.

Визуализация авторства кода с Git

Полезным расширением для расширения возможностей Git, встроенных в VS Code, является GitLens . Это расширение позволяет увидеть кто, почему и когда изменил строку или блок кода, что позволяет лучше понять и проанализировать разрабатываемый код.

Расширение позволяет с первого взгляда визуализировать авторство кода, помогает легко перемещаться и исследовать репозитории Git, получать ценную информацию с помощью команд сравнения и т. д. Все, что нужно знать о кодовой базе, всегда будет под рукой, прямо в редакторе.