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

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

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

HTML & CSS

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

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

JavaScript

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

Vue

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

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

Git

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

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

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

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

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

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

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

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

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

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

Автор: mxmvshnvsk

Источник ^[39]