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.