15+ обязательных расширений VS Code для веб-разработчиков

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

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

Автоматическое переименование тегов

Если вы устали вручную менять открывающие и закрывающие теги один за другим при работе с HTML/JSX, Auto Rename Tag придет на помощь. Просто установите его и позвольте ему переименовать открывающий/закрывающий тег, пока вы изменяете любой из них, всякий раз, когда вы переименовываете открывающий или закрывающий тег, другой тег будет обновлен этим расширением.
Ссылка на расширение: Auto Rename Tag — Visual Studio Marketplace

Улучшенные комментарии

Вам трудно читать и классифицировать комментарии к коду на TODO, Queries, Alerts и т.д.? Это расширение позволяет вам эффективно идентифицировать комментарии на основе этих категорий и, знаете что, оно также позволяет вам определять свои собственные категории.
Ссылка на расширение: Better Comments — Visual Studio Marketplace

Выделение цветом

Простое, но мощное расширение для выделения цветом значений с фактическим цветом границы или фона в реальном времени для всех файлов, так что в следующий раз вам не придется тратить время на определение цвета для конкретного значения.
Ссылка на расширение: Color Highlight — Visual Studio Marketplace

Проверка орфографии кода

Убедиться, что в коде нет опечаток — это своего рода кошмар как для разработчиков, так и для рецензентов, поскольку мы склонны не замечать мелкие орфографические ошибки в коде, будь то в коде, контенте или комментариях, но это расширение выделяет эти опечатки в реальном времени вместе с поддержкой camelCase и snake_case. Кроме того, оно поддерживает добавление списка пользовательских слов, которые могут показаться вам ложными срабатываниями.
Ссылка на расширение: Code Spell Checker — Visual Studio Marketplace

CodeSnap

Как насчет того, чтобы сделать красивый скриншот вашего кода прямо из самого VS Code? Все, что вам нужно сделать, это установить это расширение и нажать Ctrl + Shift + P, найти CodeSnap, выбрать код, который вы хотите сделать скриншот, и ваш скриншот готов! Вы можете скопировать/скачать файл прямо отсюда.
Ссылка на расширение: CodeSnap — Visual Studio Marketplace

Объектив ошибок

Одно из моих личных фаворитов в этом списке, я не могу объяснить, насколько это расширение помогает при отладке кода, выделяя ошибки и предупреждения (с цветовыми кодами) в самом редакторе без необходимости наведения курсора на красную линию.
Ссылка на расширение: Error Lens — Visual Studio Marketplace

ESLint

Одно из самых популярных расширений среди разработчиков JavaScript, ESLint помогает удалить незамеченные ошибки и предупреждения, которые могут появиться при незначительной настройке.
Ссылка на расширение: ESLint — Visual Studio Marketplace

Git Lens

Git Lens обеспечивает быстрый взгляд на то, кем, почему и когда была изменена строка или блок кода. Он предоставляет аннотации к файлам (обвинения и изменения) и боковые панели, а также множество других полезных функций.
Ссылка на расширение: GitLens — Git supercharged — Visual Studio Marketplace

Github Pull Request Viewer

Что если я скажу вам, что вы можете отслеживать и просматривать PR на Github прямо из вашего VS Code (благодаря бесшовной интеграции VS Code + Github), все, что вам нужно сделать, это установить это расширение и предоставить доступ к вашей учетной записи Github, войдя в нее, и вы сможете отслеживать, просматривать PR и многое другое прямо из вашего VS Code.
Ссылка на расширение: GitHub Pull Requests and Issues — Visual Studio Marketplace

Выделение подходящего тега

Вы также путаетесь в поиске дополняющего тега для открывающего/закрывающего тега в HTML/JSX, с этим расширением путаницы не будет. Просто подведите курсор к тегу, и это расширение выделит дополняющую открывающую/закрывающую часть тега.
Ссылка на расширение: Highlight Matching Tag — Visual Studio Marketplace

Радуга отступов

Это расширение облегчает чтение многоступенчатого отступа, добавляя чередующиеся различные цвета на каждом шаге. Полезно, в частности, для языков, зависящих от отступов, таких как Python и Yaml, но работает и для не зависящих.
Ссылка на расширение: Indent Rainbow — Visual Studio Marketplace

Jest Runner

Jest Runner помогает запускать определенные тестовые наборы/кейсы прямо из файла в редакторе одним нажатием кнопки. Наряду с этим он также поддерживает отладку тестовых примеров прямо из редактора.
Ссылка на расширение: Jest Runner — Visual Studio Marketplace

Живой сервер

Это первое расширение, которое я использовал в VS Code, и мне очень понравилось использовать его, в частности, за простоту локальной разработки. Оно позволяет запустить локальный сервер разработки с горячей загрузкой для статических и динамических страниц.
Ссылка на расширение: Live Server — Visual Studio Marketplace

SVG Preview

Это расширение обеспечивает поддержку предварительного просмотра SVG в реальном времени, а также редактирование SVG в реальном времени, и все это из самого VS Code.
Ссылка на расширение: Svg Preview — Visual Studio Marketplace

Trailing Spaces

Расширение Trailing Spaces, как следует из названия, помогает определить пробелы в коде, выделяя их, как показано на прикрепленном изображении, а также поддерживает удаление пробелов за один раз.
Ссылка на расширение: Trailing Spaces — Visual Studio Marketplace

Turbo Console Log

Это обязательная вещь для JavaScript & TypeScript разработчиков, которая значительно упрощает отладку, предоставляя поддержку добавления значимых сообщений журнала путем простого выбора переменной и нажатия комбинации клавиш (Ctrl + Alt + L). Наряду с этим он также обеспечивает поддержку комментирования/отмены всех сообщений журнала, добавленных расширением в текущий документ. Попрощайтесь с ручным добавлением сообщений журнала.
Ссылка на расширение: Turbo Console Log — Visual Studio Marketplace

Переводчик ошибок TypeScript

Ошибки, генерируемые TypeScript, иногда могут запутать и расстроить, но это расширение переводит ошибку в удобочитаемую форму прямо из IDE.
Ссылка на расширение: TypeScript Error Translator — Visual Studio Marketplace

Спасибо за прочтение. Если вы нашли эту статью полезной, пожалуйста, следите за мной на Dev! Также поделитесь своими любимыми расширениями VS
Code в комментариях.
Хотите пообщаться? Пишите в Twitter, LinkedIn или в комментариях ниже!

Больше материалов на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку. Следите за нами в Twitter и LinkedIn. Загляните в Discord нашего сообщества и присоединяйтесь к нашему коллективу талантов.