详解ESLint规则,规范你的代码
在很久之前就想通过⼯具来规范⾃⼰的代码风格,减少程序出错的概率,如果看过我的 ,这篇博客的朋友,肯定知道在当时我使
⽤ SublimeLinter-jshint 插件来规范风格,但是实际上⼀直懒癌发作也没去看它的⽂档,使⽤着它默认的规则。不过现在是时候切换到ESLint 了!
作为⼀个
有理想有抱负
的前端⼯程师,只是使⽤默认规则,⽽不是看完⽂档了然于⼼,显然是不⾏滴 ^_^.. 团队协作时,若是团队的代码风格统⼀,能够⼤⼤减少沟通成本。(其实⾯试时和⽼⼤聊到代码规范,当时就说到⽤ JSHint ,或者 ESLint 等⼯具来统⼀的。。。这也算是我来填⼀个坑吧~)
好了,前情摘要就到这,我们开始吧!
什么是 ESLint ?
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的⼯具,它的⽬标是保证代码的⼀致性和避免错误。在许多⽅⾯,它和JSLint、JSHint 相似,除了少数的例外:
ESLint 使⽤ Espree 解析 JavaScript。
ESLint 使⽤ AST 去分析代码中的模式
ESLint 是完全插件化的。每⼀个规则都是⼀个插件并且你可以在运⾏时添加更多的规则。
以上来⾃官⽹。不想再说下去,反正就是⼀个代码风格检测⼯具就对了
如何使⽤
1. 安装
npm install -g eslint
2. 如果你第⼀次使⽤ ESLint,你必须使⽤ –init 命令新建⼀个配置⽂件:
eslint --init
3. 使⽤ ESLint 检测任何 JavaScript ⽂件:
eslint test.js test2.js
4. ESLint 中⼀些规则运⾏命令它可以帮你⾃动修复
eslint test.js --fix
为了可以更直观的反馈,可能更多的会直接安装编辑器插件来进⾏错误提⽰,以Sublime 为例:
在 package control 中 ,先安装在 SublimeLinter ,再安装 SublimeLinter-contrib-eslint在项⽬⽬录下新建 .eslintrc ⽂件,⾃定义规则。
重新载⼊⽂件应该就⽣效了(不⽣效的话 Ctrl+Shift+P 调⽤命令⾯板 找到 sublimelinter: toggle linter 设置⽣效就好了),其他的编辑器异曲同⼯,就不再说了。
关于在如何在构建⼯具中使⽤,在这⾥不做说明(官⽹有)
规则定义
ESLint ⽀持⼏种格式的配置⽂件,如果同⼀个⽬录下有多个配置⽂件,ESLint 只会使⽤⼀个。优先级顺序如下:
1. JavaScript - 使⽤ .eslintrc.js 然后输出⼀个配置对象。
2. YAML - 使⽤ .eslintrc.yaml 或 .l 去定义配置的结构。
3. JSON -使⽤ .eslintrc.json 去定义配置的结构,ESLint 的 JSON ⽂件允许 JavaScript 风格的注释。
4. Deprecated -使⽤ .eslintrc,可以使 JSON 也可以是 YAML。
5. package.json - 在 package.json ⾥创建⼀个 eslintConfig属性,在那⾥定义你的配置。
下⾯就是规则啦,本⼈使⽤了 .eslintrc 格式,说明也在⾥⾯:
{
// 环境定义了预定义的全局变量。
"env": {
//环境定义了预定义的全局变量。更多在官⽹查看
"browr":true,
"node":true,
"commonjs":true,
"amd":true,
"es6":true,
"mocha":true
},
// JavaScript 语⾔选项
"parrOptions": {
// ECMAScript 版本
"ecmaVersion":6,
"sourceType":"script",//module
/
/ 想使⽤的额外的语⾔特性:
"ecmaFeatures": {
// 允许在全局作⽤域下使⽤ return 语句
"globalReturn":true,英文数字
// impliedStric
"impliedStrict":true,
// 启⽤ JSX
"jsx":true
}
},
/**
* "off" 或 0 - 关闭规则
* "warn" 或 1 - 开启规则,使⽤警告级别的错误:warn (不会导致程序退出),
* "error" 或 2 - 开启规则,使⽤错误级别的错误:error (当被触发的时候,程序会退出)
*/
"rules": {
////
// 可能的错误 //
////
// 禁⽌条件表达式中出现赋值操作符
"no-cond-assign":2,
// 禁⽤ console
"no-console":0,
// 禁⽌在条件中使⽤常量表达式
// if (fal) {
// doSomethingUnfinished();
// } //cuowu
"no-constant-condition":2,
that从句// 禁⽌在正则表达式中使⽤控制字符:new RegExp("\x1f")
"no-control-regex":2,
// 数组和对象键值对最后⼀个逗号, never参数:不能带末尾的逗号, always参数:必须带末尾的逗号,
// always-multiline:多⾏模式必须带逗号,单⾏模式不能带逗号
"comma-dangle": [1,"always-multiline"],
// 禁⽤ debugger
"no-debugger":2,
// 禁⽌ function 定义中出现重名参数
"no-dupe-args":2,
// 禁⽌对象字⾯量中出现重复的 key
"no-dupe-keys":2,
// 禁⽌重复的 ca 标签
// 禁⽌重复的 ca 标签
"no-duplicate-ca":2,
// 禁⽌空语句块
"no-empty":2,
/
/ 禁⽌在正则表达式中使⽤空字符集 (/^abc[]/)
"no-empty-character-class":2,
// 禁⽌对 catch ⼦句的参数重新赋值
"no-ex-assign":2,
// 禁⽌不必要的布尔转换
"no-extra-boolean-cast":2,
// 禁⽌不必要的括号 //(a * b) + c;//报错
"no-extra-parens":0,
// 禁⽌不必要的分号
"no-extra-mi":2,
// 禁⽌对 function 声明重新赋值
"no-func-assign":2,
// 禁⽌在嵌套的块中出现 function 或 var 声明
headmaster"no-inner-declarations": [2,"functions"],
// 禁⽌ RegExp 构造函数中⽆效的正则表达式字符串
"no-invalid-regexp":2,
// 禁⽌在字符串和注释之外不规则的空⽩
"no-irregular-whitespace":2,
// 禁⽌在 in 表达式中出现否定的左操作数
"no-negated-in-lhs":2,
// 禁⽌把全局对象 (Math 和 JSON) 作为函数调⽤错误:var math = Math(); "no-obj-calls":2,
// 禁⽌直接使⽤ Object.prototypes 的内置属性
"no-prototype-builtins":0,
// 禁⽌正则表达式字⾯量中出现多个空格
"no-regex-spaces":2,
// 禁⽤稀疏数组
"no-spar-arrays":2,
// 禁⽌出现令⼈困惑的多⾏表达式
"no-unexpected-multiline":2,
// 禁⽌在return、throw、continue 和 break语句之后出现不可达代码
/*
function foo() {
return true;
console.log("done");
}//错误
*/
"no-unreachable":2,
// 要求使⽤ isNaN() 检查 NaN
"u-isnan":2,
// 强制使⽤有效的 JSDoc 注释
"valid-jsdoc":1,
// 强制 typeof 表达式与有效的字符串进⾏⽐较
// typeof foo === "undefimed" 错误
"valid-typeof":2,
/
/
// 最佳实践 //
//
// 定义对象的t存取器属性时,强制定义get
"accessor-pairs":2,
// 强制数组⽅法的回调函数中有 return 语句
"array-callback-return":0,
// 强制把变量的使⽤限制在其定义的作⽤域范围内
"block-scoped-var":0,
// 限制圈复杂度,也就是类似if el能连续接多少个
cpv
"complexity": [2,9],
/
/ 要求 return 语句要么总是指定返回的值,要么不指定
"consistent-return":0,
// 强制所有控制语句使⽤⼀致的括号风格
// 强制所有控制语句使⽤⼀致的括号风格
"curly": [2,"all"],utopia
// switch 语句强制 default 分⽀,也可添加 // no default 注释取消此次警告
"default-ca":2,
// 强制object.key 中 . 的位置,参数:
// property,'.'号应与属性在同⼀⾏
// object, '.' 号应与对象名在同⼀⾏
"dot-location": [2,"property"],
/
/ 强制使⽤.号取属性
// 参数: allowKeywords:true 使⽤保留字做属性名时,只能使⽤.⽅式取属性
// fal 使⽤保留字做属性名时, 只能使⽤[]⽅式取属性 e.g [2, {"allowKeywords": fal}]
绍兴教育网// allowPattern: 当属性名匹配提供的正则表达式时,允许使⽤[]⽅式取值,否则只能⽤.号取值 e.g [2, {"allowPattern": "^[a-z]+(_[a-z]+)+$"}] "dot-notation": [2, {"allowKeywords":fal}],
// 使⽤ === 替代 == allow-null允许null和undefined==
"eqeqeq": [2,"allow-null"],
// 要求 for-in 循环中有⼀个 if 语句
"guard-for-in":2,
// 禁⽤ alert、confirm 和 prompt
"no-alert":0,
// 禁⽤ arguments.caller 或 arguments.callee
"no-caller":2,
// 不允许在 ca ⼦句中使⽤词法声明
"no-ca-declarations":2,
// 禁⽌除法操作符显式的出现在正则表达式开始的位置
"no-div-regex":2,
// 禁⽌ if 语句中有 return 之后有 el
"no-el-return":0,
// 禁⽌出现空函数.如果⼀个函数包含了⼀条注释,它将不会被认为有问题。
"no-empty-function":2,
// 禁⽌使⽤空解构模式no-empty-pattern
"no-empty-pattern":2,
/
/ 禁⽌在没有类型检查操作符的情况下与 null 进⾏⽐较
"no-eq-null":1,
// 禁⽤ eval()student
"no-eval":2,
// 禁⽌扩展原⽣类型
"no-extend-native":2,
// 禁⽌不必要的 .bind() 调⽤
"no-extra-bind":2,
// 禁⽤不必要的标签
"no-extra-label:":0,
// 禁⽌ ca 语句落空
"no-fallthrough":2,
// 禁⽌数字字⾯量中使⽤前导和末尾⼩数点
"no-floating-decimal":2,
// 禁⽌使⽤短符号进⾏类型转换(!!fOO)
"no-implicit-coercion":0,
// 禁⽌在全局范围内使⽤ var 和命名的 function 声明
"no-implicit-globals":1,
// 禁⽌使⽤类似 eval() 的⽅法
"no-implied-eval":2,
// 禁⽌ this 关键字出现在类和类对象之外
"no-invalid-this":0,
/
/ 禁⽤ __iterator__ 属性
"no-iterator":2,
// 禁⽤标签语句
"no-labels":2,
// 禁⽤不必要的嵌套块
"no-lone-blocks":2,
// 禁⽌在循环中出现 function 声明和表达式
"no-loop-func":1,
// 禁⽤魔术数字(3.14什么的⽤常量代替)
"no-magic-numbers":[1,{"ignore": [0,-1,1] }],
// 禁⽌使⽤多个空格
"no-multi-spaces":2,
ticktock什么意思// 禁⽌使⽤多⾏字符串,在 JavaScript 中,可以在新⾏之前使⽤斜线创建多⾏字符串
// 禁⽌使⽤多⾏字符串,在 JavaScript 中,可以在新⾏之前使⽤斜线创建多⾏字符串"no-multi-str":2,
// 禁⽌对原⽣对象赋值
"no-native-reassign":2,
// 禁⽌在⾮赋值或条件语句中使⽤ new 操作符
"no-new":2,
// 禁⽌对 Function 对象使⽤ new 操作符
"no-new-func":0,
// 禁⽌对 String,Number 和 Boolean 使⽤ new 操作符
"no-new-wrappers":2,
/
/ 禁⽤⼋进制字⾯量
"no-octal":2,
// 禁⽌在字符串中使⽤⼋进制转义序列
"no-octal-escape":2,
// 不允许对 function 的参数进⾏重新赋值
"no-param-reassign":0,
// 禁⽤ __proto__ 属性
"no-proto":2,
// 禁⽌使⽤ var 多次声明同⼀变量
"no-redeclare":2,
// 禁⽤指定的通过 require 加载的模块
"no-return-assign":0,
// 禁⽌使⽤ javascript: url
"no-script-url":0,
// 禁⽌⾃我赋值
"no-lf-assign":2,
// 禁⽌⾃⾝⽐较
"no-lf-compare":2,
// 禁⽤逗号操作符
"no-quences":2,
// 禁⽌抛出⾮异常字⾯量
"no-throw-literal":2,
/
/ 禁⽤⼀成不变的循环条件
"no-unmodified-loop-condition":2,
// 禁⽌出现未使⽤过的表达式
"no-unud-expressions":0,
// 禁⽤未使⽤过的标签
"no-unud-labels":2,
// 禁⽌不必要的 .call() 和 .apply()
"no-uless-call":2,
// 禁⽌不必要的字符串字⾯量或模板字⾯量的连接
"no-uless-concat":2,
// 禁⽤不必要的转义字符
"no-uless-escape":0,
// 禁⽤ void 操作符
"no-void":0,
// 禁⽌在注释中使⽤特定的警告术语
"no-warning-comments":0,四级翻译
// 禁⽤ with 语句
"no-with":2,
// 强制在parInt()使⽤基数参数
"radix":2,
// 要求所有的 var 声明出现在它们所在的作⽤域顶部
"vars-on-top":0,
/
/ 要求 IIFE 使⽤括号括起来
"wrap-iife": [2,"any"],
// 要求或禁⽌ “Yoda” 条件
"yoda": [2,"never"],
// 要求或禁⽌使⽤严格模式指令
"strict":0,
//
// 变量声明 //
gray是什么意思
//