共计 1290 个字符,预计需要花费 4 分钟才能阅读完成。
明天分享 6 个 Vue3 开发必备的 VSCode 插件,能够间接用过 VSCode 的插件核心间接装置应用。
如果有感觉有帮忙,还请点赞👍反对一下~
1. Volar
🔥 下载数 153 万 +
置信应用 VSCode 开发 Vue2 的同学肯定对 Vetur 插件不会生疏,作为 Vue2 配套的 VSCode 插件,它的次要作用是对 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
🔥 下载数 152 万 +
Vue VSCode Snippets 插件旨在为开发者提供最简略疾速的生成 Vue 代码片段的办法,通过各种快捷键就能够在 .vue
文件中疾速生成各种代码片段。几乎是 Vue3 开发必备神器。
该插件反对:Volar、Vue2 和 Vue3。
应用形式如下:
- 新建一个
.vue
文件,输出vbase
会提醒生成的模版内容:
- 输出
vfor
疾速生成v-for
指令模版:
- 输出
v3onmounted
疾速生成onMounted
生命周期函数:
其余就不再演示啦,性能切实太强大,罕用快捷键十分多,具体能够查看文档。
3. Auto Close Tag
🔥 下载数 769 万 +
Auto Close Tag 插件是一个很好用的 VS Code 扩大,它对生产率有很大影响。顾名思义,当咱们在完结标记中键入完结括号时,它将增加完结标记。它反对 HTML,Handlebars,XML,PHP,Vue,JavaScript,Typescript,JSX 等。
4. Vue Peek
🔥 下载数 49 万 +
Vue Peek 插件用来拓展 Vue 代码编辑的体验,能够让咱们疾速跳转到组件、模块定义的文件。
应用形式如下:
- 右键组件标签,跳转到组件定义的文件:
- 右键组件标签,弹窗显示组件定义的文件:
5. Vue Theme
🔥 下载数 34 万 +
Vue Theme 插件提供了不错的 Vue 主题,还反对配置不同色彩,感觉还不错。
6. Vite
🔥 下载数 8.9 万 +
Vite 插件能够让咱们关上我的项目后,就能主动启动开发服务器,容许开发者无需来到编辑器即可预览和调试利用。反对一键启动、构建和重启我的项目。
总结
明天分享的 6 个插件,大家能够按需装置应用。
我比拟强烈推荐实用 Volar 和 Vue VSCode Snippets 这 2 个插件。
如果感觉不错,还请点赞反对。👍
大家有更好的插件,欢送评论分享~🔥
欢送关注我的微信公众号“前端自习课”。