7 лучших расширений VS Code для разработчиков Vue
Добавление правильных расширений VS Code в Visual Studio может значительно упростить вашу жизнь как разработчика.
Они могут помочь с форматированием, масштабируемостью, внедрением передовых методов и, таким образом, автоматизировать многие забытые задачи в нашем процессе разработки. Они также могут быть просто забавными расширениями, которые делают наш код красивее / проще для написания.
Как энтузиаст Vue, я потратил время на поиск лучших расширений VS Code для разработчиков Vue. Вот некоторые из них, которые сделали мою жизнь намного проще.
Готовый? Давайте сразу же приступим.
Ветур
Если вы загружаете одно расширение VS Code из этого списка, это должно быть Vetur.
Набор инструментов Vue для VS Code - он обеспечивает подсветку синтаксиса Vue, фрагменты для общих фрагментов и многое другое, что нужно каждому разработчику Vue.
Vetur находится в очень хорошем состоянии - он даже поставляется с поддержкой Typescript Vue3.
О Vetur особо и нечего сказать - просто поймите. Это значительно улучшит ваше развитие.
Плагин ESLint VueJS
Большинство разработчиков знакомы с ESLint - одним из самых популярных инструментов линтера, который помогает поддерживать ваш код в соответствии с передовыми практиками и читаемым в больших базах кода.
VueJS имеет собственный плагин ESLint для проверки синтаксиса отдельных файловых компонентов. Я считаю, что это один из лучших инструментов для написания поддерживаемого и масштабируемого кода.
Нет ничего хуже, чем смотреть на старый код и даже не знать, с чего начать его отладку.
Не стоит беспокоиться!
ESLint может помочь вам оставаться организованным, и с ростом поддержки Vue3 вы будете писать масштабируемые проекты Vue.
Фрагменты Vue VSCode
Это расширение VSCode от Сары Драснер сэкономит вам много времени при разработке.
Он предоставляет автозаполненные фрагменты для часто используемых вариантов использования Vue. По ее собственным словам…
[Vue VSCode Snippets] фокусируется на эргономике разработчика с точки зрения использования Vue в реальном мире. Включены элементы, которые мне лично надоело печатать, и шаблон, который можно быстро устранить.
"Источник"
Это действительно здорово для написания таких вещей, как быстрые SFC, директивы Vue и очень быстрого доступа к хукам жизненного цикла.
Закладки
Многие расширения VSCode для разработчиков Vue на самом деле не раскрывают весь свой потенциал, пока вы не приступите к крупным проектам.
Именно так работают закладки. Это расширение позволяет вам отмечать и именовать позиции в вашем коде. Затем вы можете переключаться между этими разными «закладками», чтобы увеличить скорость разработки.
Прошли те времена, когда нужно было тщательно прокручивать файл вверх и вниз, чтобы найти, где вы поместили определенную функцию.
Раскраска пара скобок
Bracket Pair Colorizer делает именно то, что говорит: он берет совпадающие скобки и придает им уникальные совпадающие цвета.
Хотя это может показаться незначительной деталью, это действительно может помочь вам при попытке исправить надоедливые ошибки вложения, а также может помочь вам, когда ваш линтер не работает.
Мне также очень нравится визуальный аспект этого - сделать мой код ярким, но не слишком отвлекающим.
Это определенно стоит проверить.
Автоматическое переименование тега
Auto Rename Tag - это полезное расширение VSCode, которое поможет предотвратить ошибки в коде вашего шаблона.
Всякий раз, когда вы собираетесь изменить один тег из пары скобок HTML (открывающий или закрывающий тег), Auto Rename Tag, как вы догадываетесь, автоматически переименовывает другой.
Эта небольшая оптимизация может помочь предотвратить так много ошибок, особенно когда вы имеете дело с большими шаблонами.
НПМ Интеллисенс
NPM Intellisense автоматически заполняет ваши модули npm всякий раз, когда вы пишете операторы импорта в своем Javascript.
Это поможет вам сэкономить время на запоминании точного имени модуля npm. Я использовал его во многих своих проектах, и это определенно то, к чему я так привык.
Заключение
В целом, существует множество расширений VS Code для разработчиков Vue.
Хотя поначалу многие из этого списка могут показаться незначительными, эти небольшие изменения могут сэкономить вам часы и часы времени на разработку. Я определенно рекомендую хотя бы попробовать их все. Кто знает - возможно, вы влюбитесь в некоторых из них.
Если есть какие-либо другие расширения VS Code, которые, по вашему мнению, заслуживают быть в этом списке - дайте мне знать!
