Как стать автором
Обновить

Расширения VSCode, которые облегчат разработку на JavaScript и Vue

Время на прочтение 3 мин
Количество просмотров 53K

На сегодняшний день существует достаточное количество средств для разработки с поддержкой языка JavaScript и основанных на нем фреймворков. Вопрос выбора конкретного инструмента стоит вне этой статьи, тут же я постараюсь описать свой пользовательский опыт работы с Visual Studio Code и средствах, которые призваны облегчить жизнь JS разработчикам, в частности тем, кто использует Vue.


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


HTML & CSS


Верстка и написание стилей — это часто монотонная задача, поэтому вашу работу могут облегчить и ускорить следующие расширения:


  • Auto Close Tag и Auto Rename Tag — простые и удобные расширения, для упрощения работы с версткой, имеют поддержку однофайловых компонентов Vue.
  • CSS Peek — простое расширение, добавляющее возможность быстрого просмотра правила или навигации к нему.
  • Color Info — позволяет просмотреть детальную информацию о цвете, имеет неплохой запас настроек.
  • Color Highlight — добавляет отображение цветов в виде border, при обнаружении кодировки цвета в коде.
  • IntelliSense for CSS class names in HTML — анализирует рабочее окружение, для добавления возможности автодополнения CSS классов.

JavaScript


  • Debbugger for Chrome — расширение для упрощиния отладки прямо из редактора кода, работает со всем, что имеет Chrome DevTools.
  • JavaScript (ES6) code snippets — набор сниппетов для JS, очень ускоряет разработку.
  • JSHint — расширение для подсказок по оформлению и организации JS кода, имеет гибкие настройки.
  • ESLint — линтер для JS с гибкими настройками.

Vue


Для работы с Vue существует не так много годных расширений, ниже несколько из наиболее полезных:


  • Vetur — полный набор самых необходимых дополнений для работы с vue, таких как сниппеты, подсветка синтаксиса.
  • Vue Peek — добавляет удобный переход к vue компонентам.

Git


VSCode имеет поддержку работы с git из коробки, но всё же встроенных функций хватает не всегда. Ниже приведены расширения, которые сделают работу с git немного проще:


  • GitLens — это наверное наиболее известное расширение для работы с git, которое добавляет множество возможностей просмотра git информации.
  • Git History — добавляет возможность удобного просмотра истории изменений в git, имеет довольно удобный интерфейс.
  • Git Indicators — простой индикатор git активности в нижнем трее VSCode.

Рабочее окружение и процесс разработки


Для продуктивной работы было бы неплохо иметь помощников в виде дополнений, подсвечивающих простые ошибки, советующие стиль написания и прочие удобные подсказки/действия. Попробуйте воспользоваться следующими расширениями:


  • Bracket Pair Colorizer — добавляет полсветку для скобок, окружающих блоки кода, облегчает восприятие кода при глубокой вложенности, визуально разделяя код.
  • Beautify — на мой взгляд наиболее удобное расширение для автоматической стилизации кода, подробнее с расширением можно ознакомиться по ссылке.
  • Live Server — очень полезное расширение, которое позволяет быстро запустить свой лайв сервер, например для верстки.
  • Import Cost — отличное расширение, которое отображает размер импортируемого модуля, позволяет более детально подбирать импортируемые куски модуля не прибегая к анализаторам бандлов.
  • NPM Intellisense — автокомплит для npm модулей.
  • Open in browser — простое расширение, добавляющее пункт открытия в браузере.
  • Path Intellisense — автокомплит для имен файлов и их расположения.
  • Settings Sync — после окночания установки необходимых инструментов и настройки окружения удобно сохранить конфиг, данное расширение позволит синхронизировать всё в git gist.
  • Sort lines — простой способ организовать сортировку строк в коде по заданным условиям.
  • TODO Highlight — простое расширение для подсветки ключевых слов типа TODO, FIXME.
  • Trailing Spaces — подсвечивает лишние пробелы.
  • VS Live Share — многие сталкивались с проблемой, когда приходится очень долго объяснять удаленному разработчкику, где и что не так, данное расширение упрощает жизнь в подобных ситуациях, позволяя делать живую демонстрацию, поддерживает работу нескольких пользователей, пробрасывает запущенное окружение машине клиента.
  • Visual Studio IntelliCode — автоматизирует рутинные задачи для раработчиков на таких языках, как Python, TypeScript/JavaScript и Java.

Оформление редактора


  • Darcula Theme — наиболее удачное оформление на мой взгляд, так же могу посоветовать Monokai Pro.
  • vscode-icons — самый удачный icon pack для VSCode.

Так же может быть интересно


  • GraphQL for VSCode — своеобразный intellisense для GraphQL, наиболлее удобное расширение, под копотом много полезного, подробнее по ссылке.
  • Instant Markdown — лайв превью для markdown разметки.
  • Paste JSON as Code — удобное расширение, которое генерирует type model из JSON данных. Поддерживает TypeScript, Python, Go, Ruby, C#, Java, Swift, Rust, Kotlin, C++, Flow, Objective-C, JavaScript, Elm, и JSON Schema.
  • Rainbow CSV — подсветка для CSV файлов.
  • Regex Previewer — очень полезное расширение для превью регулярок.
  • SVG Viewer — просмотрщик SVG.

Надеюсь, что данный список будет вам полезен, буду рад дополнениям.

Теги:
Хабы:
+16
Комментарии 13
Комментарии Комментарии 13

Публикации

Истории

Работа

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн