最近做项目时使用vs-code编辑器，项目中也使用了eslint，但很多时候不小心写到不规范的代码就会冒红，虽然不影响运行，但有代码洁癖的我是不允许这样的代码存在的，为了代码的规范性，加入了eslint格式校验，并且配置了自动化符合eslint格式的设置。
安装eslint和vetur插件
配置settingjs.json文件
路径：文件 -> 首选项 -> 设置 -> 找到settingjs.json ->. 点击编辑
清空代码，复制如下代码：
{
"extensions.ignoreRecommendations": false,
"files.associations": {
"*.vue": "vue",
"*.wxml": "html",
"*.wxss": "css"
},
"[scss]": {
},
"git.autofetch": true,
"editor.fontSize": 16, //以像素为单位控制字号
// "editor.fontFamily": "monospace", //控制字体系列
"git.enableSmartCommit": true, //在没有暂存的更改时提交所有更改
"explorer.confirmDelete": true, //控制资源管理器是否应在删除文件到废纸篓时进行确认
"editor.wordWrap": "on", //控制折行方式 off-禁用折行 on-根据视区宽度折行
// "editor.formatOnType": true, //控制编辑器是否应在键入后自动设置行的格式
// "workbench.colorTheme": "Visual Studio Dark", //指定工作台中使用的颜色主题
//打开新页面 welcomePage-打开默认页面 none-不打开
"workbench.startupEditor": "newUntitledFile",
//控制在资源管理器内拖放移动文件或文件夹时是否进行确认
"explorer.confirmDragAndDrop": false,
"window.zoomLevel": 0, //调整窗口的缩放级别。原始大小是 0
"git.confirmSync": false,
//保存时设置文件的格式。格式化程序必须可用，不能自动保存文件，并且不能关闭编辑器
// "gitlens.historyExplorer.enabled": true,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline" //强制展开多行
// "wrap_attributes": "force-aligned"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": true,
"wrapAttributes": false,
"sortAttributes": true,
}
},
"beautify.config": {
"brace_style": "collapse,preserve-inline" //解决花括号中换行
},
"vetur.format.defaultFormatter.js": "vscode-typescript", //格式化js代码
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化html代码
"editor.formatOnSave": true,
"vetur.format.options.tabSize": 2,
// "vetur.format.options.useTabs": true, //是否在每一行的末尾添加分号
"editor.tabSize": 2,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
"editor.minimap.enabled": true,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue"
}
{
"extensions.ignoreRecommendations": false,
"files.associations": {
"*.vue": "vue",
"*.wxml": "html",
"*.wxss": "css"
},
"[scss]": {
},
"git.autofetch": true,
"editor.fontSize": 16, //以像素为单位控制字号
// "editor.fontFamily": "monospace", //控制字体系列
"git.enableSmartCommit": true, //在没有暂存的更改时提交所有更改
"explorer.confirmDelete": true, //控制资源管理器是否应在删除文件到废纸篓时进行确认
"editor.wordWrap": "on", //控制折行方式 off-禁用折行 on-根据视区宽度折行
// "editor.formatOnType": true, //控制编辑器是否应在键入后自动设置行的格式
// "workbench.colorTheme": "Visual Studio Dark", //指定工作台中使用的颜色主题
//打开新页面 welcomePage-打开默认页面 none-不打开
"workbench.startupEditor": "newUntitledFile",
//控制在资源管理器内拖放移动文件或文件夹时是否进行确认
"explorer.confirmDragAndDrop": false,
"window.zoomLevel": 0, //调整窗口的缩放级别。原始大小是 0
"git.confirmSync": false,
//保存时设置文件的格式。格式化程序必须可用，不能自动保存文件，并且不能关闭编辑器
// "gitlens.historyExplorer.enabled": true,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline" //强制展开多行
// "wrap_attributes": "force-aligned"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": true,
"wrapAttributes": false,
"sortAttributes": true,
}
},
"beautify.config": {
"brace_style": "collapse,preserve-inline" //解决花括号中换行
},
"vetur.format.defaultFormatter.js": "vscode-typescript", //格式化js代码
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化html代码
"editor.formatOnSave": true,
"vetur.format.options.tabSize": 2,
// "vetur.format.options.useTabs": true, //是否在每一行的末尾添加分号
"editor.tabSize": 2,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
"editor.minimap.enabled": true,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue"
}
保存关闭编辑器重新打开项目运行保存文件就可以自动化根据eslint格式你的代码啦！最后，可根据个人喜好更爱settingjs.json的配置，如我的配置是"editor.tabSize": 2,你可以改为4，代表一个tab的距离。快去试试吧