VSCode 开发 Vue 必备插件及配置
2022-09-25 本文已影响0人
君似云中月w
1、Auto Close Tag (自动闭合 html / xml 标签)
![](https://img.haomeiwen.com/i18388584/f2ff4cb293e198fd.png)
2、Auto Rename Tag (自动完成另一侧标签的同步修改)
![](https://img.haomeiwen.com/i18388584/5e260f435b5a6a27.png)
3、Prettier - Code formatter (配合eslint 进行代码自动修复,注意配置自己需要的规范)
![](https://img.haomeiwen.com/i18388584/ce3e3fd7067059fc.png)
4、Better Comments (注释分类高亮)
![](https://img.haomeiwen.com/i18388584/829d27c28d44e8ce.png)
5、Chinese (Simplified) Language Pack for Visual Studio Code (中文简体语言包)
![](https://img.haomeiwen.com/i18388584/ac7ab904fe021b96.png)
6、Guides (代码的标签对齐线)
![](https://img.haomeiwen.com/i18388584/34b8f4bcdee76ca5.png)
7、Highlight Matching Tag (高亮显示对应的HTML标签以及标识出对应的各种括号)
![](https://img.haomeiwen.com/i18388584/aac935a4907c015c.png)
8、HTML Boilerplate (新文件如果是html,可以输入html,会提示设置好的html模板)
![](https://img.haomeiwen.com/i18388584/0eb3cc2805dc4811.png)
9、Path Intellisense (路径自动补全,比如引入一个写好的js文件,html,css都会提示)
![](https://img.haomeiwen.com/i18388584/7fbd2eb223a9c0cb.png)
10、One Dark Pro / One Monokai Theme (配一个不伤眼的主题色,可以多撸代码好几年!)
![](https://img.haomeiwen.com/i18388584/04310ce7de58bcd6.png)
![](https://img.haomeiwen.com/i18388584/46a5316f2c94cde1.png)
11、Power Mode (酷炫的敲击代码效果,让你欲罢不能,我选了敲击时屏幕不抖,给个烟花)
![](https://img.haomeiwen.com/i18388584/9a576afbfb292628.png)
//是否开启
"powermode.enabled": true,
//效果样式 "水花-particles", "烟花-fireworks", "火焰-flames", "雪花-magic", "幽灵-clippy", "激光-simple-rift", "大激光-exploding-rift"
"powermode.presets": "particles",
//时间间隔
"powermode.combo.timeout": 5,
//是否抖动
"powermode.shake.enabled": false
12、JavaScript (ES6) code snippets ( es6 语法缩写,常用比如fre => forEach, fof => for of,nfn => const xxx = (params) => {})
![](https://img.haomeiwen.com/i18388584/f76bb45de8be469a.png)
13、JavaScript Booster (大神都在用,js写法优化提示,写的不够好,或有其它写法,有灯泡提示)
![](https://img.haomeiwen.com/i18388584/13596c92c0442209.png)
14、Live Server (和open in browser 的区别就是会起服务,出一个ip+端口的链接 )
![](https://img.haomeiwen.com/i18388584/1999511267d85887.png)
15、Git History (查看git日志以及图表和详细信息)
![](https://img.haomeiwen.com/i18388584/3fdc554a41ac1b2a.png)
16、ESLint (检测代码的语法格式,以便我们规范书写,避免因编译所发生的错误 )
![](https://img.haomeiwen.com/i18388584/6172110cb62d1ed1.png)
17、Vetur (Vetur支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件,比如Sass和TypeScript)
![](https://img.haomeiwen.com/i18388584/a1182064e175fc64.png)
18、Vue VSCode Snippets (生成vue代码片段)
![](https://img.haomeiwen.com/i18388584/ee43941cd84565ab.png)