Топ-12 расширений для VS Code в помощь веб-разработчикам

Visual Studio Code или просто VS Code — кроссплатформенный редактор кода с бесплатным доступом, разработанный Microsoft. Этот сервис полюбился огромному количеству разработчиков по всему миру за свой солидный функционал и высокую производительность.

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

Auto Rename Tag

Надоело вручную менять открывающие и закрывающие теги в процессе работы с HTML / JSX? Плагин Auto Rename Tag избавит вас от этой рутины. Для этого от вас потребуется установить расширение и дать ему доступ к автоматическому переименованию любого парного тега (открывающего или закрывающего), если вы поменяли название одного элемента из пары.

Better Comments

Мало кому из разработчиков нравится читать и классифицировать комментарии в коде. Расширение Better Comments помогает быстро разделить такие комментарии на несколько категорий:

• запросы
• уведомления
• примечания
• списки задач

Можете установить собственные категории для более четкой идентификации комментариев.

Color Highlight

Мощное, но простое и удобное расширение, которое позволяет быстро определить числовой код любого цвета на экране. Оно выводит рядом с каждым обнаруженным в документе CSS / веб-цветом его цифровое значение в формате #0C0C0C. И в следующий раз вам не придется тратить время на подбор цвета для определенного значения.

Code Spell Checker

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

CodeSnap

Этот плагин полезен, если вам нужно сделать красивый скрин кода непосредственно в VS Code. Для этого понадобится:

• установить расширение
• нажать комбинацию клавиш Ctrl + Shift + P
• выполнить поиск CodeSnap
• выбрать фрагмент кода для скриншота
• загрузить или скопировать готовый скриншот из IDE.

Error Lens

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

ESLint

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

Git Lens

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

Highlight Matching Tag

Устали постоянно проверять, добавлен ли парный тег для кода HTML / JSX? Расширение Highlight Matching Tag поможет легко избежать путаницы и добавить недостающие теги. Вам достаточно навести курсор на один из тегов, а плагин автоматически подсветит его парный элемент. Вы легко убедитесь, что все в порядке, или добавите недостающий элемент в код.

Indent Rainbow

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

Jest Runner

Расширение Jest Runner помогает запускать некоторые наборы тестов непосредственно из файла в VS Code одним кликом. Кроме этого, он еще поддерживает опцию отладки тестовых примеров прямо в окне редактора.

Trailing Spaces

Расширение Trailing Spaces, как ясно из названия, помогает идентифицировать лишние пробелы в коде. Оно выделяет их и позволяет удалить все такие пробелы за один раз.

Заключение

Список полезных расширений для VS Code вовсе не исчерпывается перечисленными в этом материале плагинами. На самом деле их гораздо больше. Если вы пользуетесь для разработки средой Visual Studio Code, попробуйте расширить ее возможности сначала приведенными в статье плагинами, а затем адаптируйте редактор под себя, добавляя в него новые расширения.