VSCode 开发Vue 常用插件（基于个人喜好）
VSCode如何安装插件
点击左侧的方块块，可以进入插件目录，在上方可以在插件商店中搜索想要安装的插件。搜索到点击install（安装）即可安装插件，有的插件需要json配置一下。
推荐一些我个人在使用的插件
在使用的过程中我看了几个博客试用了几款插件，在这里我只说一下我在用的吧，大家有什么好用的插件也可以评论说说。
- Chinese(Simplified) : 汉化插件，看个人爱好吧。
- Vetur : 语法高亮，在空文件里输入”vue”+回车，直接自动生成template模板，alt+shift+F快捷键格式化全文，不过默认的格式化是两个空格，有些人比如我就很不习惯（我习惯tab四个空格），这里贴一个改格式化缩进的方法。VSCode的Vue插件Vetur设置，按照文章中的做法在setting.json中为vetur加入以下两行设置代码就行了。
"vetur.format.options.tabSize": 4,
"vetur.format.options.useTabs": true,
3. **Auto Close Tag** :自动闭合HTML/XML标签。不用再输入闭合标签了，舒爽的coding吧！
4. **Auto Rename Tag** ：自动完成另一侧标签的同步修改。
5. **HTML CSS Support** : 写样式表自动补全
6. **Debugger for Chrome** : 顾名思义，在Chrome中调试bug，这样就可以直观的在VSCode中设置断点了。不过使用之前得配置一下`launch.json`文件，配置的方法Vue的学习文档给出了，[在 VS Code 中调试](https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html)
7. **JavaScript(ES6) code snippets** : ES6语法智能提示以及快速输入，除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间。
8. **Beautity** : 可美化JS、JSON、CSS、Sass、HTML，这个默认缩进就是4空格，倒是很舒服,有Vetur的情况下算是锦上添花吧。
9. **Path Intellisense** : 自动路径补全，用之前得先把VSCode的默认自动完成关了，在设置的`setting.json`文件中添加以下配置选项：{“ typescript.suggest.paths”：false}
10. **ESlint** : 语法纠错。***安装之后四个空格缩进会报错，因为不符合语法规范，所以我自己又设置的ESlint无视四个空格***。哎，ESlint，又爱又恨。带来规范，也带来不爽。**代码写的不规范的话，会稀里哗啦的报错，干脆别装了**。
### 最后附上我自己的配置文件，嫌配置麻烦的同学可以复制使用，这里我删掉了ESlint的设置
**打开配置文件的方式**：左上角“文件”->“首选项”->“设置”之后点击右上角的文件图标
{ “editor.tabSize”: 4,//tab = 四个空格
“files.autoSave”: “afterDelay”,//延时自动保存
“window.zoomLevel”: 1,//窗口图标变大点，我老盲僧了
“editor.fontSize”: 18,//字号18
“auto-close-tag.activationOnLanguage”: [//绑定自动闭合标签的语言
“xml”,
“php”,
“blade”,
“ejs”,
“jinja”,
“javascript”,
“javascriptreact”,
“typescript”,
“typescriptreact”,
“plaintext”,
“markdown”,
“vue”,
“liquid”,
“erb”,
“lang-cfml”,
“cfml”,
“HTML (EEx)”,
“HTML (Eex)”,
“plist”
],
“vetur.format.options.tabSize”: 4,//将vetur的tab设置为4个空格
“vetur.format.options.useTabs”: false,
“vetur.format.defaultFormatterOptions”: {
“prettier”: {
“semi”: false, //不加分号
“singleQuote”: true //用单引号
}
},
“[javascript]”: {
“editor.defaultFormatter”: “HookyQR.beautify”
},
“[jsonc]”: {
“editor.defaultFormatter”: “HookyQR.beautify”
},
“editor.renameOnType”: true,
}