ESLint（中文站点）是一个开源的 JavaScript 代码检查工具，使用 Node.js 编写，由 Nicholas C. Zakas 于 2013 年 6 月创建。ESLint 的初衷是为了让程序员可以创建自己的检测规则，使其可以在编码的过程中发现问题而不是在执行的过程中。ESLint 的所有规则都被设计成可插入的，为了方便使用，ESLint 内置了一些规则，在这基础上也可以增加自定义规则。
一、Eslint安装
1.全局安装
如果你想使 ESLint 适用于你所有的项目，建议全局安装 ESLint
$ npm install -g eslint
初始化配置文件
$ eslint --init
2.局部安装
$ npm install eslint --save-dev
初始化配置文件
$ ./node_modules/.bin/eslint --init
3.webpack中配置eslint
需要安装eslint-loader解析.eslint文件
{ test: /\.(js|jsx|mjs)$/, enforce: 'pre', use: [ { options: { formatter: eslintFormatter, eslintPath: require.resolve('eslint'), }, loader: require.resolve('eslint-loader'), }, ], include: paths.appSrc, //也可以用exclude排除不需要检查的目录或者用.eslintignore },
二、ESlint配置
1.配置文件类型与优先级顺序
.eslintrc.js - 使用 .eslintrc.js 然后输出一个配置对象
.eslintrc.yaml - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
.eslintrc.yml
.eslintrc.json - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释
.eslintrc（已弃用）
package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置
2.plugin属性
ESLint 支持使用第三方插件（以eslint-plugin-开头的npm包），在使用插件之前，必须使用 npm 安装。如eslint-plugin-react、eslint-plugin-vue等
module.exports = { "plugins": [ "react" ], "extends": [ "eslint:recommended" ], "rules": { "no-set-state": "off" } }
3.extends属性
一个配置文件可以被基础配置中的已启用的规则继承。可以使用以下规则继承：
（1）"eslint:recommended"
继承Eslint中推荐的（打钩的）规则项
module.exports = { "extends": "eslint:recommended", "rules": { } }
（2）使用别人写好的规则包（以eslint-config-开头的npm包），如eslint-config-standard
module.exports = { "extends": "standard", "rules": { } }
（3）使用Eslint插件中命名的配置
module.exports = { "plugins": [ "react" ], "extends": [ "eslint:recommended", "plugin:react/recommended" ], "rules": { "no-set-state": "off" } }
（4）使用"eslint:all"，继承Eslint中所有的核心规则项
module.exports = { "extends": "eslint:all", "rules": { // override default options "comma-dangle": ["error", "always"], "indent": ["error", 2], "no-cond-assign": ["error", "always"], // disable now, but enable in the future "one-var": "off", // ["error", "never"] // disable "init-declarations": "off", "no-console": "off", "no-inline-comments": "off", } }
4.rules属性(根据自己的需要进行配置)
（1）Eslint部分核心规则
"rules": { /** **这些规则与 JavaScript 代码中可能的错误或逻辑错误有关 **/ "for-direction":"error",//强制 “for” 循环中更新子句的计数器朝着正确的方向移动 "getter-return":"error",//强制在 getter 属性中出现一个 return 语句 "no-await-in-loop":"error",//禁止在循环中 出现 await "no-compare-neg-zer":"error",//禁止与 -0 进行比较 "no-cond-assign":[//禁止在条件语句中出现赋值操作符 "error", "always" ], "no-console":[//禁用 console "error" // { "allow": ["warn", "error"] } ], "no-constant-condition":"error",//禁止在条件中使用常量表达式 "no-control-regex":"error",//禁止在正则表达式中使用控制字符 "no-debugger":"error",//禁用 debugger "no-dupe-args":"error",//禁止在 function 定义中出现重复的参数 "no-dupe-keys":"error",//禁止在对象字面量中出现重复的键 "no-duplicate-case":"error",//禁止重复 case 标签 "no-empty":"error",//禁止空块语句 "no-empty-character-class":"error",//禁止在正则表达式中出现空字符集 "no-ex-assign":"error",//禁止对 catch 子句中的异常重新赋值 "no-extra-boolean-cast":"error",//禁止不必要的布尔类型转换 "no-extra-parens":"error",//禁止冗余的括号 "no-extra-semi":"error",//禁用不必要的分号 "no-func-assign":"error",//禁止对 function 声明重新赋值 "no-inner-declarations":"error",//禁止在嵌套的语句块中出现变量或 function 声明 "no-invalid-regexp":"error",//禁止在 RegExp 构造函数中出现无效的正则表达式 "no-irregular-whitespace":"error",//禁止不规则的空白 "no-obj-calls":"error",//禁止将全局对象当作函数进行调用 "no-prototype-builtins":"error",//禁止直接使用 Object.prototypes 的内置属性 "no-regex-spaces":"error",//禁止正则表达式字面量中出现多个空格 "no-sparse-arrays": "error",//禁用稀疏数组 "no-template-curly-in-string":"error",//禁止在常规字符串中出现模板字面量占位符语法 "no-unexpected-multiline":"error",//禁止使用令人困惑的多行表达式 "no-unreachable":"error",//禁止在 return、throw、continue 和 break 语句后出现不可达代码 "no-unsafe-finally":"error",//禁止在 finally 语句块中出现控制流语句 "no-unsafe-negation":"error",//禁止对关系运算符的左操作数使用否定操作符 "use-isnan":"error",//要求调用 isNaN()检查 NaN "valid-jsdoc":"error",//强制使用有效的 JSDoc 注释 "valid-typeof":"error",//强制 typeof 表达式与有效的字符串进行比较 /** **最佳实践 **/ "accessor-pairs":"error",//强制getter/setter成对出现在对象中 "array-callback-return":"error",//强制数组方法的回调函数中有 return 语句 "block-scoped-var":"error",//把 var 语句看作是在块级作用域范围之内 "class-methods-use-this":"error",//强制类方法使用 this "complexity":"error"//限制圈复杂度 ..... }
（2）eslint-plugin-vue中的规则