Сегодня я поделюсь 6 расширениями VSCode, необходимыми для разработки Vue3, которые можно установить и использовать непосредственно через центр расширений VSCode.
Если вы найдете это полезным, пожалуйста, поставьте лайк и поддержите его~.
1. Volar
🔥 1,53 миллиона загрузок+
Я считаю, что студенты, которые используют VSCode для разработки Vue2, должны быть знакомы с расширением Vetur. Как расширение VSCode, поддерживающее Vue2, его основная функция заключается в обеспечении подсветки, поддержки синтаксиса и обнаружения синтаксиса для однофайловых компонентов Vue.
С выходом официальной версии Vue3 команда Vue официально рекомендует расширение Volar для замены расширения Vetur, которое не только поддерживает подсветку языка Vue3, определение синтаксиса, но и поддерживает TypeScript и проверку типов на основе vue-tsc.
Примечание при использовании:
- Сначала отключите расширение Vetur, чтобы избежать конфликтов;
- Рекомендуется использовать
css/less/scssв качестве языка для<style>, поскольку они основаны на vscode-css-language, сервис обеспечивает надежную языковую поддержку; - При использовании
postcss/stylus/sassнеобходимо установить дополнительные расширения подсветки синтаксиса. postcss использует расширение language-postcss, stylus использует расширение language-stylus, sass использует расширение Sass; - 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