一、准备工作
首先需要我们赖以生存的开发工具-- vscode，这个编译器的优点就是可以自由地添加丰富的编译器插件，提升你的编码效率。
本次使用到的vscode插件： eslint 、Manta's Stylus Supremac（可选）
开发环境当然得是node，全局安装eslint依赖包。
.eslintrc.js文件，通过npm install -g eslint命令生成，当然也可以从网上找个现成的，前提是你能适应它里面的规则配置。
二、项目配置（自动根据eslint格式化当前保存的代码，一键修复）
由于开发中的一些操作习惯，我们的编码方式肯定不会完全符合eslint的规则，此时就需要用到一键修复。
首先打开vscode配置文件Seething.json 在其中加入以下配置：
/ 重新设定tabsize "editor.tabSize": 2,
// #每次保存的时候自动格式化 "editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
// 添加 vue 支持 "eslint.options":
{ "configFile": "你的.eslintrc.js文件路径" },
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号 "prettier.semi": false,
// #使用带引号替代双引号 "prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择 "vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.validation.template": true, "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式 } },
// 格式化stylus, 需安装Manta's Stylus Supremacy插件 "stylusSupremacy.insertColons": false, // 是否插入冒号 "stylusSupremacy.insertSemicolons": false,
// 是否插入分好 "stylusSupremacy.insertBraces": false,
// 是否插入大括号 "stylusSupremacy.insertNewLineAroundImports": false,
// import之后是否换行 "stylusSupremacy.insertNewLineAroundBlocks": false, "window.zoomLevel": 0, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
// 两个选择器中是否换行}
请注意，一定要配置对你本地的eslint文件路径
完成以上步骤后，重启编译器，尝试保存某个页面的代码，如果符合规范，那么恭喜你，设置完成，后面就可以愉快地敲代码了！
