一、vetur
1. 介绍
VSCode下强大的vue工具，支持vue语法的高亮（完整的支持高亮的语法如下图）、代码片段、emmet（代码速写，VSCode本身自带有tab键对html5的代码进行快速开发，但是需要在settings.json文件中配置）、错误检测、格式化等，具体的使用可以参考官方文档
vetur官方文档
2. 使用
1) emmet在vue中使用的配置
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}复制代码2）错误检测
vetur默认使用eslint-plugin-vue@beta来检测template，如果不想使用linting，可以在settings.json中关闭
修改此值为false即可
3）格式化
vetur推荐使用两个空格来规定editor.tabSize和editor.insertSpace,
对于html、css、less、scss、js格式使用js-beautify来规范，这个不需要再进行安装
js-beautify的github仓库
3. 使用要点
需要在VSCode中安装vetur插件，其他都不需要安装
要点一： 保存文件的时候自动格式化的方法：
settings.json文件中添加：
"editor.formatOnSave": true复制代码要点二： 保存文件的时候自动格式化的问题的解决：
但是这样格式化有一个问题，就会所有的js语句会自动带上分号和双引号
原因就是因为vetur默认使用的有很多是prettier插件，如下图
prettier在VSCode中的插件- prettier 安装成功后VSCode默认的格式化就会被prettier代替，默认的快捷键是Ctrl + shift + F 。详细配置查看官方文档（此处仅供学习，我们的基础配置中暂无需安装）
prettier官方文档
基本prettier配置文档
prettier只关注格式化，它没有检查代码语法的能力，所以经常会遇到搭配各种lint检查的时候出现各种冲突。
下面是解决保存时自动格式化出现添加双引号和分号的方法：
解决方式1:
在settings.json文件中添加：
把
"vetur.format.defaultFormatter.js": "prettier"复制代码改为
"vetur.format.defaultFormatter.js": "vscode-typescript"复制代码这种解决方式就用不了prettier这个插件了
解决方式2：（现在使用这种解决方式）
-- 在settings.json文件中新增
// 去除自动格式化时js加的分号与双引号
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false,
"singleQuote": true
}
}复制代码解决方式3：
VSCode局部安装prettier插件
npm install --save-dev --save-exact prettier复制代码--或者是全局安装
npm install --global prettier复制代码如果安装npm包 需要进行以下操作：
--1. 新建.prettierrc.json配置文件在项目根目录下
-- 2 . prettierrc.json文件的配置如下
{
"singleQuote": true,
"semi": false
}复制代码要点三： template内的标签格式化：
vetur默认不会对template内进行格式化，改进方法
在settings.json文件中添加：
// 對template代碼格式化
"vetur.format.defaultFormatter.html": "js-beautify-html"复制代码要点四： tab的空格数：
默认编辑器的tab空格是4个 改成2个
在settings.json文件中添加：
"editor.tabSize": 2,复制代码二、其他配置
推荐安装的插件：
1. vscode-icons
是给VSCode下项目的文件加上图标，以区别文件，在settings.json中增加：
// 文件图标主题插件 安装vscode-icons后的配置
"workbench.iconTheme": "vscode-icons",复制代码如下图所示：
2. vscode-fileheader
是给文件开始添加注释的插件。安装完毕之后在settings.json中添加配置：
"fileheader.Author": "zhangsan",
"fileheader.LastModifiedBy": "zhangsan",复制代码F1或者Alt+Cmd+P然后输入fileheader回车即可添加
添加完如下
其他插件推荐 segmentfault.com/a/119000001…
三、完整settings.json配置文档
{
// 文件图标主题插件 安装vscode-icons后的配置
"workbench.iconTheme": "vscode-icons",
// 安装vscode-fileheader 给文件开头添加多行注释的配置 (F1或Alt+CMD+P后输入fileheader回车即可添加)
"fileheader.Author": "zhangsan",
"fileheader.LastModifiedBy": "zhangsan",
// 工作区主题色，自行安装自己喜欢的
"workbench.colorTheme": "One Dark Pro",
// 控制是否在打开文件时，基于文件内容自动检测 `editor.tabSize#` 和 `#editor.insertSpaces`
"editor.detectIndentation": false,
// 默认tab2个空格"editor.tabSize": 2,
// 使用tab键进行HTML5快速开发
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
// 保存时代码自动格式化
"editor.formatOnSave": true,
// 去除自动格式化时js加的分号与双引号
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false,
"singleQuote": true
}
},
// 對template代碼格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 在输入时显示含有参数文档和类型信息的小面板。
"editor.parameterHints.enabled": true,
// 配置emmet是否启用tab展开缩写
"emmet.triggerExpansionOnTab": true,
// 控制是否在键入时自动显示建议。
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
}
}复制代码