前言
我们都知道，javascript 是一门动态弱类型语言。现在平台、环境等各种因素，很复杂，造成团队之间的风格，各种各样，有时候也会出现不可避免的错误，造成的排查力度大，团队维护难，团队合作差等等。然而ESLint的出现，帮我们团队解决了代码统一，风格统一等的问题，让我们能在编译中发现代码错误的工具，在团队协作中，避免低级 Bug，产出风格统一的代码。从而提高团队的凝集力。对外让人感觉很正规的印象。
ESLint
介绍
ESLint是一个开源的项目，由Nicholas C. Zakas（《JavaScript高级程序设计》作者）于2013年六月创建。它的目标是为JavaScript提供一个完全可配置的实用lint工具。
作用
在官网上是这样说的：“ESLint查找并修复JavaScript代码中的问题”
- 发现问题
ESLint静态分析您的代码以快速发现问题。ESLint内置于大多数文本编辑器中，您可以将ESLint作为持续集成管道的一部分运行。
- 自动修复
ESLint发现的许多问题都可以自动修复。ESLint修复程序可识别语法，因此您不会遇到传统的查找和替换算法引入的错误。
- 定制
预处理代码，使用自定义解析器，并编写与ESLint内置规则一起使用的自己的规则。您可以自定义ESLint，使其完全按照项目所需的方式工作。
配置方式
配置方式有两种，一种在目标文件中使用注释语法嵌入配置信息，这种方式只针对当前文件生效。第二种是全局的，针对整个项目空间或者项目中起作用。所以一般的大厂或者正规的前端团队，都会定制属于自己公司或团队的一些规则配置。
- 第一种方式，作用域当前文件，eg:
// 忽略 no-undef 检查
/* eslint-disable no-undef */
js code
// 忽略 no-new 检查
/* eslint-disable no-new */
js code
// 设置检查
/*eslint eqeqeq: off*/ /*eslint eqeqeq: 0*/
js code
- 第二种方式，作用全局，文件格式，eg:
- JavaScript - use .eslintrc.js 文件导出一个包含配置信息的对象。
- JSON - 使用 .eslintrc.json 定义配置信息，JSON 文件中支持 JavaScript 注释。
- package.json - 在 package.json 文件中增加一个 eslintConfig 字段，在该字段中定义配置信息。
- .eslintrc
- 多个配置 优先级. eg: .eslintrc.js > .eslintrc.yaml > .eslintrc.yml .eslintrc.json > .eslintrc > package.json
配置参数[主要针对第二种方式]
我们在项目中，都会看到这样或那样的配置文件，比如.eslintrc.js，.eslintrc.yaml， .eslintrc.yml， .eslintrc.json， .eslintrc等，还有的写入到package.json里等等，无论哪一种方式，都是针对项目的一些配置，为了使其统一。其实配置里面是什么样的参数或者key呢？eg:
module.exports = {
env: {
node: true
},
globals: {
var1: "writable",
....
},
extends: [
...
],
rules: {
...
},
parserOptions: {
...
}
}
- env：你的脚本将要运行在什么环境中,可以是brower、node、es6、mocha等等各种环境,eg:
module.exports = {
env: {
node: true,
browser: true,
commonjs: true,
es6: true,
...
},
...
}
Tips：在第一种方式中可以这样使用。eg:
/* eslint-env node, mocha */
js code
- globals: 未在当前文件中定义的全局变量时，会命中
no-undef规则，通过globals配置指定的全局变量无视no-undef规则。eg:
module.exports = {
...
globals: {
var1: "writable",
var2: "readonly",
....
},
...
}
- extends: 扩展,也就是可以在以后的基础规则上进行扩展。eg:
module.exports = {
...
extends: {
// npm 包
'plugin:vue/essential',
'@vue/standard',
// 配置文件的绝对路径或相对路径指定
"./node_modules/coding-standard/eslintDefaults.js",
"./cicada-eslint-config.js"
...
},
...
}
- 一个指定基础配置来源的字符串
- 一个指定基础配置来源的字符串的数组
往往大多数情况在集成的基础上并不满足我们的项目使用要求，往往需要在进行一些额外的配置。比如rules 参数指定的规则可按如下几种方式进行扩展，eg:
-
启用基础配置中没有规则
-
继承基础配置中的规则，改变其错误级别，但不改变其附加选项
- 基础配置: “cicada”: [“error”, “allow-null”]
- 扩展配置: “cicada”: “warn”
- 最终有效配置：“cicada”: [“warn”, “allow-null”]
-
共享配置包，一类导出 ESLint 配置对象的 npm 包，比如 eslint-config-standard、eslint-config-airbnb 等。共享配置包需要安装才能使用，配置时可省略报名中的 eslint-config- 前缀。
-
eslint:recommended： 启用 ESLint 内置规则集 的一个子集。
-
覆盖基础配置中的规则
- 基础配置：“quotes”: [“error”, “single”, “avoid-escape”]
- 扩展配置：“quotes”: [“error”, “single”]
- 最终有效配置: “quotes”: [“error”, “single”]
还有更多组合和复杂的配置，这里不在一一说明啦！
- plugin: 插件. 第三方定制的规则集合,插件名中的 eslint-plugin- 前缀可以省略。eg:
module.exports = {
...
plugins: {
'@typescript-eslint',
...
},
...
}
- parserOptions: 语法分析器选项，默认使用的语法分析器支持如下几个选项：ecmaVersion、sourceType、ecmaFeatures。eg：
module.exports = {
...
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2019,
sourceType: 'module',
...
},
...
}
Rules 说明
| 字段 | 值 | 说明 |
|---|---|---|
| no-alert | 0 | 禁止使用alert confirm prompt |
| no-array-constructor | 2 | 禁止使用数组构造器 |
| no-bitwise | 0 | 禁止使用按位运算符 |
| no-caller | 1 | 禁止使用arguments.caller或arguments.callee |
| no-catch-shadow | 2 | 禁止catch子句参数与外部作用域变量同名 |
| no-class-assign | 2 | 禁止给类赋值 |
| no-cond-assign | 2 | 禁止在条件表达式中使用赋值语句 |
| no-console | 2 | 禁止使用console |
| no-const-assign | 2 | 禁止修改const声明的变量 |
| no-constant-condition | 2 | 禁止在条件中使用常量表达式 if(true) if(1) |
| no-continue | 0 | 禁止使用continue |
| no-control-regex | 2 | 禁止在正则表达式中使用控制字符 |
| no-debugger | 2 | 禁止使用debugger |
| no-delete-var | 2 | 不能对var声明的变量使用delete操作符 |
| no-div-regex | 1 | 不能使用看起来像除法的正则表达式/=foo/ |
| no-dupe-keys | 2 | 在创建对象字面量时不允许键重复 {a:1,a:1} |
| no-dupe-args | 2 | 函数参数不能重复 |
| no-duplicate-case | 2 | switch中的case标签不能重复 |
| no-else-return | 2 | 如果if语句里面有return,后面不能跟else语句 |
| no-empty | 2 | 块语句中的内容不能为空 |
| no-empty-character-class | 2 | 正则表达式中的[]内容不能为空 |
| no-empty-label | 2 | 禁止使用空label |
| no-eq-null | 2 | 禁止对null使用==或!=运算符 |
| no-eval | 1 | 禁止使用eval |
| no-ex-assign | 2 | 禁止给catch语句中的异常参数赋值 |
| no-extend-native | 2 | 禁止扩展native对象 |
| no-extra-bind | 2 | 禁止不必要的函数绑定 |
| no-extra-boolean-cast | 2 | 禁止不必要的bool转换 |
| no-extra-parens | 2 | 禁止非必要的括号 |
| no-extra-semi | 2 | 禁止多余的冒号 |
| no-fallthrough | 1 | 禁止switch穿透 |
| no-floating-decimal | 2 | 禁止省略浮点数中的0 .5 3. |
| no-func-assign | 2 | 禁止重复的函数声明 |
| no-implicit-coercion | 1 | 禁止隐式转换 |
| no-implied-eval | 2 | 禁止使用隐式eval |
| no-inline-comments | 0 | 禁止行内备注 |
| no-inner-declarations | [2, “functions”] | 禁止在块语句中使用声明（变量或函数） |
| no-invalid-regexp | 2 | 禁止无效的正则表达式 |
| no-invalid-this | 2 | 禁止无效的this，只能用在构造器，类，对象字面量 |
| no-irregular-whitespace | 2 | 不能有不规则的空格 |
| no-iterator | 2 | 禁止使用__iterator__ 属性 |
| no-label-var | 2 | label名不能与var声明的变量名相同 |
| no-labels | 2 | 禁止标签声明 |
| no-lone-blocks | 2 | 禁止不必要的嵌套块 |
| no-lonely-if | 2 | 禁止else语句内只有if语句 |
| no-loop-func | 1 | 禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以） |
| no-mixed-requires | [0, false] | 声明时不能混用声明类型 |
| no-mixed-spaces-and-tabs | [2, false] | 禁止混用tab和空格 |
| linebreak-style | [0, “windows”] | 换行风格 |
| no-multi-spaces | 0 | 不能用多余的空格 |
| no-multi-str | 2 | 字符串不能用换行 |
| no-multiple-empty-lines | [1, {"max | 3}] |
| no-native-reassign | 2 | 不能重写native对象 |
| no-negated-in-lhs | 2 | in 操作符的左边不能有! |
| no-nested-ternary | 0 | 禁止使用嵌套的三目运算 |
| no-new | 1 | 禁止在使用new构造一个实例后不赋值 |
| no-new-func | 1 | 禁止使用new Function |
| no-new-object | 2 | 禁止使用new Object() |
| no-new-require | 2 | 禁止使用new require |
| no-new-wrappers | 2 | 禁止使用new创建包装实例，new String new Boolean new Number |
| no-obj-calls | 2 | 不能调用内置的全局对象，比如Math() JSON() |
| no-octal | 2 | 禁止使用八进制数字 |
| no-octal-escape | 2 | 禁止使用八进制转义序列 |
| no-param-reassign | 2 | 禁止给参数重新赋值 |
| no-path-concat | 0 | node中不能使用__dirname或__filename做路径拼接 |
| no-plusplus | 0 | 禁止使用++，– |
| no-process-env | 0 | 禁止使用process.env |
| no-process-exit | 0 | 禁止使用process.exit() |
| no-proto | 2 | 禁止使用__proto__属性 |
| no-redeclare | 2 | 禁止重复声明变量 |
| no-regex-spaces | 2 | 禁止在正则表达式字面量中使用多个空格 /foo bar/ |
| no-restricted-modules | 0 | 如果禁用了指定模块，使用就会报错 |
| no-return-assign | 1 | return 语句中不能有赋值表达式 |
| no-script-url | 0 | 禁止使用javascript:void(0) |
| no-self-compare | 2 | 不能比较自身 |
| no-sequences | 0 | 禁止使用逗号运算符 |
| no-shadow | 2 | 外部作用域中的变量不能与它所包含的作用域中的变量或参数同名 |
| no-shadow-restricted-names | 2 | 严格模式中规定的限制标识符不能作为声明时的变量名使用 |
| no-spaced-func | 2 | 函数调用时 函数名与()之间不能有空格 |
| no-sparse-arrays | 2 | 禁止稀疏数组， [1,2] |
| no-sync | 0 | nodejs 禁止同步方法 |
| no-ternary | 0 | 禁止使用三目运算符 |
| no-trailing-spaces | 1 | 一行结束后面不要有空格 |
| no-this-before-super | 0 | 在调用super()之前不能使用this或super |
| no-throw-literal | 2 | 禁止抛出字面量错误 throw “error”; |
| no-undef | 2 | 不能有未定义的变量 |
| no-undef-init | 2 | 变量初始化时不能直接给它赋值为undefined |
| no-undefined | 2 | 不能使用undefined |
| no-unexpected-multiline | 2 | 避免多行表达式 |
| no-underscore-dangle | 1 | 标识符不能以_开头或结尾 |
| no-unneeded-ternary | 2 | 禁止不必要的嵌套 var isYes = answer === 1 ? true : false; |
| no-unreachable | 2 | 不能有无法执行的代码 |
| no-unused-expressions | 2 | 禁止无用的表达式 |
| no-unused-vars | [2, {“vars”: “all”, “args”: “after-used”}] | 不能有声明后未被使用的变量或参数 |
| no-use-before-define | 2 | 未定义前不能使用 |
| no-useless-call | 2 | 禁止不必要的call和apply |
| no-void | 2 | 禁用void操作符 |
| no-var | 0 | 禁用var，用let和const代替 |
| no-warning-comments | [1, { “terms”: [“todo”, “fixme”, “xxx”], “location”: “start” }] | 不能有警告备注 |
| no-with | 2 | 禁用with |
| array-bracket-spacing | [2, “never”] | 是否允许非空数组里面有多余的空格 |
| arrow-parens | 0 | 箭头函数用小括号括起来 |
| arrow-spacing | 0 | =>的前/后括号 |
| accessor-pairs | 0 | 在对象中使用getter/setter |
| block-scoped-var | 0 | 块语句中使用var |
| brace-style | [1, “1tbs”] | 大括号风格 |
| callback-return | 1 | 避免多次调用回调什么的 |
| camelcase | 2 | 强制驼峰法命名 |
| comma-dangle | [2, “never”] | 对象字面量项尾不能有逗号 |
| comma-spacing | 0 | 逗号前后的空格 |
| comma-style | [2, “last”] | 逗号风格，换行时在行首还是行尾 |
| complexity | [0, 11] | 循环复杂度 |
| computed-property-spacing | [0, “never”] | 是否允许计算后的键名什么的 |
| consistent-return | 0 | return 后面是否允许省略 |
| consistent-this | [2, “that”] | this别名 |
| constructor-super | 0 | 非派生类不能调用super，派生类必须调用super |
| curly | [2, “all”] | 必须使用 if(){} 中的{} |
| default-case | 2 | switch语句最后必须有default |
| dot-location | 0 | 对象访问符的位置，换行的时候在行首还是行尾 |
| dot-notation | [0, { “allowKeywords”: true }] | 避免不必要的方括号 |
| eol-last | 0 | 文件以单一的换行符结束 |
| eqeqeq | 0 | 必须使用全等 |
| func-names | 0 | 函数表达式必须有名字 |
| func-style | [0, “declaration”] | 函数风格，规定只能使用函数声明/函数表达式 |
| generator-star-spacing | 0 | 生成器函数*的前后空格 |
| guard-for-in | 0 | for in循环要用if语句过滤 |
| handle-callback-err | 0 | nodejs 处理错误 |
| id-length | 0 | 变量名长度 |
| indent | [2, 2] | 缩进风格 |
| init-declarations | 0 | 声明时必须赋初值 |
| key-spacing | [0, { “beforeColon”: false, “afterColon”: true }] | 对象字面量中冒号的前后空格 |
| lines-around-comment | 0 | 行前/行后备注 |
| max-depth | [0, 4] | 嵌套块深度 |
| max-len | [0, 80, 4] | 字符串最大长度 |
| max-nested-callbacks | [0, 2] | 回调嵌套深度 |
| max-params | [0, 3] | 函数最多只能有3个参数 |
| max-statements | [0, 10] | 函数内最多有几个声明 |
| new-cap | 2 | 函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用 |
| new-parens | 2 | new时必须加小括号 |
| newline-after-var | 2 | 变量声明后是否需要空一行 |
| object-curly-spacing | [0, “never”] | 大括号内是否允许不必要的空格 |
| object-shorthand | 0 | 强制对象字面量缩写语法 |
| one-var | 1 | 连续声明 |
| operator-assignment | [0, “always”] | 赋值运算符 += -=什么的 |
| operator-linebreak | [2, “after”] | 换行时运算符在行尾还是行首 |
| padded-blocks | 0 | 块语句内行首行尾是否要空行 |
| prefer-const | 0 | 首选const |
| prefer-spread | 0 | 首选展开运算 |
| prefer-reflect | 0 | 首选Reflect的方法 |
| quotes | [1, “single”] | 引号类型 `` “” ‘’ |
| quote-props | [2, “always”] | 对象字面量中的属性名是否强制双引号 |
| radix | 2 | parseInt必须指定第二个参数 |
| id-match | 0 | 命名检测 |
| require-yield | 0 | 生成器函数必须有yield |
| semi | [2, “always”] | 语句强制分号结尾 |
| semi-spacing | [0, {“before”: false, “after”: true}] | 分号前后空格 |
| sort-vars | 0 | 变量声明时排序 |
| space-after-keywords | [0, “always”] | 关键字后面是否要空一格 |
| space-before-blocks | [0, “always”] | 不以新行开始的块{前面要不要有空格 |
| space-before-function-paren | [0, “always”] | 函数定义时括号前面要不要有空格 |
| space-in-parens | [0, “never”] | 小括号里面要不要有空格 |
| space-infix-ops | 0 | 中缀操作符周围要不要有空格 |
| space-return-throw-case | 2 | return throw case后面要不要加空格 |
| space-unary-ops | [0, { “words”: true, “nonwords”: false }] | 一元运算符的前/后要不要加空格 |
| spaced-comment | 0 | 注释风格要不要有空格什么的 |
| strict | 2 | 使用严格模式 |
| use-isnan | 2 | 禁止比较时使用NaN，只能用isNaN() |
| valid-jsdoc | 0 | jsdoc规则 |
| valid-typeof | 2 | 必须使用合法的typeof的值 |
| vars-on-top | 2 | var必须放在作用域顶部 |
| wrap-iife | [2, “inside”] | 立即执行函数表达式的小括号风格 |
| wrap-regex | 0 | 正则表达式字面量用小括号包起来 |
| yoda | [2, “never”] | 禁止尤达条件 |
Tips
| error level | 数值表示 | 说明 |
|---|---|---|
| off | 0 | 关闭规则 |
| warn | 1 | 开启规则, 使用警告 程序不会退出 |
| error | 2 | 开启规则, 使用错误 程序退出 |
结尾语
写到这里，eslint的一些东西了解的也差不多啦，在前端的领域中，其实挺复杂的，所以我不建议大家去记，只要大家会配置就行啦，再说那么api 怎么也记不过来，高端的程师，借用各种api 文档，写出自己的一些配置。这篇文章只是在定制前端规则的介绍，一些基础的部分，去了解，让大家有个好的印象，下文张，偏向代码，直接定制我的cicada(禅思)的eslint 的配置。
定制团队的eslint rules(二):更新中…
