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

в 16:47, , рубрики: javascript, Visual Studio, vscode, vue.js, vuejs, Разработка веб-сайтов, расширения

На сегодняшний день существует достаточное количество средств для разработки с поддержкой языка 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.

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

Автор: mxmvshnvsk

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js