Visual Studio Code очень популярная IDE для разработчиков Javascript. VS Code имеет встроенную интеграцию с git и терминал, поэтому вам не нужно переходить из одного окна в другое.

Поскольку существует очень много плагинов, которые можно использовать для кода Visual Studio, то легко потеряться. Вот почему мы поделимся с вами любимыми расширениями для VSC.

1. HTML snippets

Вам не нужно тратить больше времени на написание каждого HTML-тега вручную; достаточно указать только имя тега, например, div и нажать ввод. Или вы можете даже добавить несколько тегов, которые вы хотели бы вложить, например, ul>li>a, и нажать Enter. Что важно, это расширение имеет все фрагменты HTML5.

2. JavaScript (ES6) code snippets

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

Здесь он работает аналогично, например, для создания кода класса экспорта по умолчанию ClassName {} достаточно поставить ecl и нажать tab.

3. CSS Peek

CSS Peek - это расширение, поддерживающее файлы .html и .js. Это помогает быстро найти и проверить стили, примененные для выбранного класса или идентификатора. Это полезно для разработчиков, которые не любят переключаться между различными файлами или разделять экран.

4. Angular / React / Vue

 Многое зависит от того, какую платформу вы используете.

1. Для Angular существует расширение, называемое Angular Snippets (версия 8). Он предоставляет нам фрагменты кода для Typescript и HTML.

1. Для React.js существует отличное расширение фрагментов ES7 React / Redux / GraphQL / React-Native. Он предоставляет фрагменты кода для React и Redux с использованием ES7 и работает аналогично фрагментам JavaScript.

1. Для разработки Vue.js существует отличное расширение Vetur. Он имеет почти 20 миллионов загрузок и содержит множество функций, таких как фрагменты кода, ссылки и проверка ошибок, форматирование, отладка или выделение синтаксиса. 

5. ESLint

Если вы хотите создать читаемый, чистый код, то отличная идея - установить ESLint. Это поможет вам придерживаться стандартных методов, таких как отступы, например.

6. Prettier – Code formatter

Если мы говорим о красивом коде, стоит установить расширение Prettier в свой редактор. Он удаляет оригинальный стиль и устанавливает согласованный стиль кода. Благодаря последовательному форматированию код становится более читабельным.

7. GitLens

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

8. Auto import

Auto import - отличное расширение, которое автоматически импортирует файлы; Вам больше не нужно делать это вручную. Достаточно указать имя компонента, и плагин его импортирует.

9. Path autocomplete

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

10. Final newline

Иногда вам нужно помнить о добавлении новой строки в ваш документ, и здесь, в конце концов, добавляется final-newline. Каждый раз, когда вы сохраняете файл, он вставляет новую строку в конце документа.

11. Bracket pair colorizer

Bracket pair colorizer помогает нам найти закрывающую скобку текущего блока кода. Иногда случается, что в конце вашего файла или функции у вас есть более одной или двух закрывающих скобок, и тогда найти ошибку не так просто. Если вы используете плагин Bracket Pair Colorizer, все начальные и закрывающие скобки имеют одинаковый цвет для одного блока кода. Поэтому, если ваш начальный тег синий, ваш закрывающий тег также будет синим.

12. Indenticator

Indenticator - это расширение для VS Code, которое визуально выделяет текущую целевую глубину. Это позволяет легко различать разные уровни разных блоков кодов. Глубина отмечена маленькими точками и линиями.

13. Debugger for Chrome

И в конце отличный плагин для отладки. Разве не было бы идеально, если бы мы могли отлаживать в консоли, как в браузере Chrome? Это возможно с плагином отладчика для Chrome; он поддерживает установку точек, пошаговое выполнение, отладку неверных сценариев и многое другое. Если вы устали переключаться с файлов в редакторе кода на консоль отладки в браузере, это отличный плагин для вас.