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