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

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

Ниже я собрал подборку популярных и полезных плагинов VS Code для повышения вашей продуктивности.

Git Lens

GitLens расширяет возможности git, встроенные в Visual Studio Code. Расширение имеет большое количество функций и гибкие настройки. Одним кликом можно получить информацию об авторе, аннотации и прочее построчно.

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

Этот плагин автоматически переименовывает парные теги.

Например, если вам нужно исправить тег <button> на <a>, мы можем изменить первый — открывающий — тег, а второй изменится автоматически.

Очень полезный плагин, особенно для верстальщиков.

Украсить

Функция расширения — превратить некрасивый файл без пробелов и табуляции, где каждый тег идет сразу после предыдущего, в более читабельный и красивый.

Чтобы использовать это расширение, вам сначала нужно нажать F1. Затем напишите в строке «Украсить» и выберите его из списка — код будет автоматически исправлен.

Раскрашивание пары скобок 2

Это расширение дает каждой паре групп свой цвет — вы можете быстро и легко найти нужную пару.

Текущий сервер

Плагин Live Server для VS Code позволяет перезагружать страницу после внесения изменений в js, css, html код.

После установки в правом нижнем углу появится кнопка «Go Live». Нажмите на кнопку

Нажмите кнопку «Go Live», чтобы активировать режим «Live Server».

CSS Peek

Показывает всплывающее окно CSS при работе с HTML. Это упрощает работу и позволяет не искать нужное свойство среди множества классов в большом файле CSS.

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

Позволяет редактору отображать размер импортированного пакета. Расширение использует для этого webpackи babel-webpack-plugin.

Лучшие комментарии

Помогает создавать более четкие комментарии в коде. Расширение позволяет разделить аннотации на следующие категории:

  • Оповещения
  • Запросы
  • TODO
  • Основные моменты

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

Цель расширения — проверить распространенные ошибки и уменьшить количество ложных срабатываний. Хорошо работает со стилем составных слов CamelCase.

Полакод

Позволяет делать скриншоты кода с пользовательскими шрифтами и темами.

На этом все, если вы используете другие расширения, которые я не включил в список, смело пишите о них в комментариях

Узнали что-то новое?

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

Больше контента на blog.devgenius.io.