摘要：
{"semi":false,"singleQuote":true}四、在vue单文件组件中使用在单文件组件中将代码变得不符合规范：想要变得规范的第一步：右键选择使用我们安装的插件格式化vue组件中的代码：进行完格式化文档的第一步之后还是会有一点问题：就是在方法名之后不会自动加空格，所以要进行第二步：Ctrl+S快捷键保存文档即可把方法名后面的空格加上。
一、安装相关插件
更新于2020年4月19日18:07:34
一共要安装四个插件：分别是ESLint、Vetur、VueHelper、Prettier - Code formatter
VueHelper是代码自动提示的插件，我觉得用这个还是比较舒服的。
二、在settings中添加这三个插件的相关配置
插一嘴：记得写注释，不然你后期想改的时候再看脑瓜子会炸。
//Vetur插件的相关配置
//"vetur.format.defaultFormatter.js":"none",
"vetur.format.defaultFormatterOptions":{},
"emmet.syntaxProfiles":{
"vue-html":"html",
"vue":"html"
},
"vetur.validation.template":false,
"window.zoomLevel":0,
"liveServer.settings.donotShowInfoMsg":true,
"git.enableSmartCommit":true,
"editor.minimap.enabled":false,
"editor.renderWhitespace":"all",
"editor.renderControlCharacters":true,
"breadcrumbs.enabled":true,
"workbench.activityBar.visible":true,
"explorer.confirmDelete":false,
//Eslint的配置
"eslint.validate":[
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options":{
"plugins":[
"html"
]
},
"editor.codeActionsOnSave":{
"source.fixAll":true,
"source.fixAll.eslint":false
},
//prettier相关配置
//tab大小为2个空格
"editor.tabSize":2,
//100列后换行
"editor.wordWrapColumn":100,
//Ctrl+S时格式化
"editor.formatOnSave":true,
//prettier设置强制单引号
"prettier.singleQuote":true,
//prettier设置语句末尾加分号
"prettier.semi":false,
//选择vue文件中template的格式化工具
"vetur.format.defaultFormatter.html":"prettyhtml",
//让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis":true,
//让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js":"vscode-typescript",
//vetur的自定义设置
//Ctrl+Shift+F快捷键设置（依照vetur格式化代码）
"[vue]":{
"editor.defaultFormatter":"octref.vetur"
}
三、在项目的根目录下添加.prettierrc配置文件
在今天使用之后发现还是会有一些问题，在使用Ctrl + S之后会将字符串使用双引号引起来，并且会在句尾加上分号，这也是不能通过ESLint校验的。
解决方案：
.
在.prettierrc配置文件中写入如下配置：表示在句尾不加分号，使用单引号。
{
"semi":false,
"singleQuote":true
}
四、在vue单文件组件中使用
在单文件组件中将代码变得不符合规范：
想要变得规范的第一步：右键选择使用我们安装的插件（也就是Prettier - Code formatter）格式化vue组件中的代码：
进行完格式化文档的第一步之后还是会有一点问题：就是在方法名之后不会自动加空格，所以要进行第二步：Ctrl + S 快捷键保存文档即可把方法名后面的空格加上。
也是接触这个没多久，目前感觉有的配置是多余的，后续遇到问题还会继续更新。