6 расширений VSCode, необходимых для разработки Vue3🔥

Сегодня я поделюсь 6 расширениями VSCode, необходимыми для разработки Vue3, которые можно установить и использовать непосредственно через центр расширений VSCode.

Если вы найдете это полезным, пожалуйста, поставьте лайк и поддержите его~.

1. Volar

🔥 1,53 миллиона загрузок+

Я считаю, что студенты, которые используют VSCode для разработки Vue2, должны быть знакомы с расширением Vetur. Как расширение VSCode, поддерживающее Vue2, его основная функция заключается в обеспечении подсветки, поддержки синтаксиса и обнаружения синтаксиса для однофайловых компонентов Vue.

С выходом официальной версии Vue3 команда Vue официально рекомендует расширение Volar для замены расширения Vetur, которое не только поддерживает подсветку языка Vue3, определение синтаксиса, но и поддерживает TypeScript и проверку типов на основе vue-tsc.

Примечание при использовании:

  1. Сначала отключите расширение Vetur, чтобы избежать конфликтов;
  2. Рекомендуется использовать css/less/scss в качестве языка для <style>, поскольку они основаны на vscode-css-language, сервис обеспечивает надежную языковую поддержку;
  3. При использовании postcss/stylus/sass необходимо установить дополнительные расширения подсветки синтаксиса. postcss использует расширение language-postcss, stylus использует расширение language-stylus, sass использует расширение Sass;
  4. Volar не содержит ESLint и Prettier, тогда как официальное расширение ESLint и Prettier поддерживает Vue, поэтому вам необходимо установить его самостоятельно.

2. Vue VSCode Snippets

🔥 1,52 миллиона загрузок+

Расширение Vue VSCode Snippets призвано предоставить разработчикам самый простой и быстрый способ генерации фрагментов кода Vue, с помощью различных клавиш быстрого доступа для быстрой генерации различных фрагментов кода в файлах .vue. Это просто необходимый артефакт для разработки Vue3.

Это расширение поддерживает: Volar, Vue2 и Vue3.

Оно используется следующим образом:

  • Создайте файл .vue и введите vbase для запроса сгенерированного содержимого шаблона:

  • Введите vfor для быстрой генерации шаблона команды v-for:

  • Введите v3onmounted для быстрой генерации функции жизненного цикла onMounted:

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

3. Тег автоматического закрытия

🔥 7.69 миллионов загрузок+

Расширение Auto Close Tag — это отличное расширение VS Code, которое оказывает большое влияние на производительность. Как следует из названия, когда мы набираем закрывающую скобку в закрывающем теге, оно добавит закрывающий тег. Оно поддерживает HTML, Handlebars, XML, PHP, Vue, JavaScript, Typescript, JSX и многое другое.

4. Vue Peek

🔥 490k+ загрузок

Расширение Vue Peek используется для расширения возможностей редактирования кода Vue, позволяя нам быстро переходить к файлам, определенным компонентами и модулями.

Оно используется следующим образом:

  • Щелкните правой кнопкой мыши на ярлыке компонента, чтобы перейти к файлу определения компонента:

  • Щелкните правой кнопкой мыши на ярлыке компонента, и во всплывающем окне отобразится файл, определенный компонентом:

5. Тема Vue

🔥 340k скачиваний+

Расширение Vue Theme предоставляет хорошую тему Vue, а также поддерживает настройку различных цветов, что довольно приятно.

6. Vite

🔥 89k+ загрузок

Расширение Vite позволяет автоматически запускать сервер разработки после открытия проекта, позволяя разработчикам просматривать и отлаживать приложение, не выходя из редактора. Поддерживает запуск, сборку и перезапуск проектов одним кликом.

Резюме

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

Я очень рекомендую Practical Volar и Vue VSCode Snippets Эти 2 расширения.
Если вы считаете, что это хорошо, пожалуйста, поставьте лайк и поддержите. 👍

Если у вас есть лучшее расширение, пожалуйста, комментируйте и делитесь~🔥

✨follow me:https://medium.com/@Chris1993

Оцените статью
devanswers.ru
Добавить комментарий