На сегодняшний день существует достаточное количество средств для разработки с поддержкой языка 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.
Надеюсь, что данный список будет вам полезен, буду рад дополнениям.
Комментарии (12)
rehci
12.02.2019 20:41+1> Trailing Spaces — подсвечивает лишние пробелы.
В vscode есть встроенная опция, чтобы их просто убирать, зачем их подсвечивать?
> Files: Trim Trailing Whitespace
> When enabled, will trim trailing whitespace when saving a file.
mxmvshnvsk Автор
12.02.2019 20:44+2Работать приходится не только со своим кодом и довольно часто он может быть старым и кривым. Автоматическое удаление пробелов в таких случаях изменит историю коммитов, в таких случаях удобно видеть такую подстветку, чтобы работать только со своим куском кода.
Juma
12.02.2019 22:03На мой взгляд:
— ESLint заменяет JSHint. Так же ESLint может подсвечивать коментарии «TODO», «FIXME». Соответсвенно можно не устанавливать «TODO Highlight»:
— у GitLens достаточно много функций, не вижу смысла дополнительно устанавливать «Git History»:
— Запустить/обновить в браузере можно настройками в проекте (package.json и т.п.), это вместо «Open in browser»:
— «Color Highlight»? — у меня как то без дополнений цвет в квадратике рядом с кодом появляется:
— про «Trailing Spaces» уже сказали, но добалю что ESLint тоже умеет их подсвечивать.
В списке есть дополнение для сниппетов, но не увдидел такого полезного дополнения как «Code Spell Checker».
Очень удивил Vetur, его резмер более 200 МБ.
Что касается некоторых остальных дополнений, то само приложение VS Code, умеет неплохо рекомендовать дополнения. Просто ориентируясь на то с какими файлами вы работаете.
Оформление редактора у каждого свое, предлагать темы/шрифты/иконки не вижу смысла.
Ну и подобных статей на хабре уже не мало, и в основном список повторяется.
farcaller
12.02.2019 22:44"Auto Rename Tag" у меня в *.vue работает и так (может часть Vetur?). "Auto Close Tag" в VSCode срабатывает по
</.mxmvshnvsk Автор
12.02.2019 22:54Вполне возможно, что этот функционал сейчас есть из коробки. Я достаточно давно использую этот редактор, так что за это время сложился определенный набор расширений и настроек, который собран в git gist и таскается по разным окружениям.
Buzzzzer
13.02.2019 10:00Пользуюсь многим из этого списка.
Но по мере разрастания проекта VSCode начинает ужасно тупить.
Линтер, дев сервер с hot-reload и vetur бьются за последние такты моего процессора и довольно часто какой то плагин крашится и приходится перезапускать редактор.
Похоже скоро придется какие то приятные плюшки отключать.
Jossnix
13.02.2019 10:26vim (vscodevim) позволяет немного ускорить работу.
Правда, конфиг чуть поправил:
"vim.hlsearch": true, "vim.normalModeKeyBindings": [ { "before":["<C-q>"], "after":["<C-v>"] }, ], "vim.handleKeys": { "<C-k>": false, "<C-c>": false, "<C-u>": false, "<C-v>": false, "<C-x>": false, "<C-a>": false, "<C-f>": false, "<C-h>": false }
gibson_dev
Самый главный плагин — webstorm)))
kuftachev
Тут просто у части людей тяжело с чувством юмора, соответственно и с мозгами, поэтому и минусуют.
VSCode полезен для своих задач, WebStorm для своих, но немного иронии — это в тему )))