前言
开发中最大的烦恼莫过于你想使用2个空格缩进，同事使用了4个空格缩进，更有同事2个空格和4个空格缩进一起使用，完全凭心情写代码，这对强迫症而言，简直不能忍！ 在反复修改了n个文件后，痛定思痛，打算学习一下eslint用于项目中，本文写的是我查阅了网上资料和官网后，自己的添加eslint的流程
参考资料
关于eslint的起源等配置可参考：segmentfault.com/a/119000001…
eslint中文文档：eslint.bootcss.com/
eslint设置
1、下载相关eslint安装包
// 代码校验
npm install -D eslint eslint-loader eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard
npm install -D babel-eslint
2、初始化eslint
$ eslint --init
初始eslint后，会自动生成 .eslintrc.js 文件，我们来修改文件为：
module.exports = {
// 此目录为根目录，不再向上查找配置。
root: true,
// 解析器类型: espima(默认), babel-eslint, @typescript-eslint/parse……
parser: 'vue-eslint-parser',
// 解析器配置参数
parserOptions: {
parser: 'babel-eslint',
// 代码类型：script(默认), module
sourceType: 'module'
},
// 环境定义一组全局变量的预设,本项目为浏览器环境
env: {
browser: true,
es6: true,
node: true
},
// 扩展，直接使用别人已经写好的 lint 规则
extends: [
'plugin:vue/recommended', // 插件类型，也可以直接在 plugins 属性中进行设置，规则：`plugin:${pluginName}/${configName}`
'eslint-config-standard' // npm 包扩展,必须以 eslint-config- 开头，使用时可以省略这个头,如写成：standard
],
rules: {
// 具体规则
}
}
实际应用中，我们并不需要验证 dist 和 node_modules 文件里的内容，因此还要在根目录新建 .eslintignore 文件
node_modules
dist
vscode插件
在同一台电脑里，只要你没重装软件，vscode插件只需要安装一次即可。
安装 eslint
重启项目，之后在 .js 和 .vue 文件中，我们已经能看到默认的eslint报错信息了。可以直接使用默认的规则，也可以在**.eslintrc.js** 文件的rules进行配置自己的规则
vscode设置搭配eslint
在实际开发中，要是每次都想着eslint的规则，端端正正的写代码的话，肯定是会降低我们的效率的，（也太反人类！）
因此，要是能写完当前页面后能格式化就好了，要是能写完保存的时候自动格式化，不需要手动操作其他步骤就更好了！！
没错，只要vscode配置得当，这是完全有可能的。
1、进入vscode设置页面
文件->首选项->设置->工作区
输入@modified，并搜索
2、配置setting.json
点击 在settings.json中编辑 的选项后，你会发现当前的项目多了一个 .vscode 文件夹。只配置当前项目的设置的好处就在于，迁移项目或者在其他电脑下载项目后，只要新环境安装了相应的插件，你配置的内容就能生效（所以不选择全局配置，不然每一个新环境都要重新配置，并且不利于不同项目不同设置的管理）
我们关于eslint的配置就在 settings.json 文件中进行配置，对于我们 写完保存的时候自动格式化 的需求来说，添加如下代码（根据需要增删）
{
"editor.tabSize": 2,
"eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" //属性强制折行对齐
}
},
"eslint.validate": [ //开启对.vue文件中错误的检查
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
此时，你返回之前报错的文件，按下Ctrl+s，你会发现代码格式会自动根据规则格式化
总结
eslint的规则只要配置好，将大大的提高代码的可读性和维护性；在vscode中会有很多配置方便码农们提高效率，我们要学习的东西还有很多，学习的路上总是枯燥且艰难，但还是要坚持。共勉！
项目地址：github.com/SaltedFishH…
