13 полезных расширений VS Code для фронтэнда

  • 18 октября, 15:28
  • 3654
  • 0

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

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

1. HTML snippets

13 полезных расширений VS Code для фронтэнда

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

2. JavaScript (ES6) code snippets

13 полезных расширений VS Code для фронтэнда

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

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

3. CSS Peek

13 полезных расширений VS Code для фронтэнда

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

4. Angular / React / Vue

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

13 полезных расширений VS Code для фронтэнда

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

13 полезных расширений VS Code для фронтэнда

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

13 полезных расширений VS Code для фронтэнда

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

5. ESLint

13 полезных расширений VS Code для фронтэнда

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

6. Prettier – Code formatter

13 полезных расширений VS Code для фронтэнда

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

7. GitLens

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

8. Auto import

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

9. Path autocomplete

13 полезных расширений VS Code для фронтэнда

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

10. Final newline

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

11. Bracket pair colorizer

13 полезных расширений VS Code для фронтэнда

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

12. Indenticator

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

13. Debugger for Chrome

13 полезных расширений VS Code для фронтэнда

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


0 комментариев
Сортировка:
Добавить комментарий