那些年我们讨厌的eslint,真的不好吗?以下是我对eslint简单的理解和在网上看到的规则解释

566 阅读6分钟

一、什么是 ESLint ?

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的⼯具,它的⽬标是保证代码的⼀致性和避免错误。在许多⽅⾯,它和JSLint、JSHint 相似,除了少数的例外:

  • ESLint 使⽤ Espree 解析 JavaScript。
  • ESLint 使⽤ AST 去分析代码中的模式
  • ESLint 是完全插件化的。每⼀个规则都是⼀个插件并且你可以在运⾏时添加更多的规则。
    以上来⾃官⽹。不想再说下去,反正就是⼀个代码风格检测⼯具就对了

二、为什么要用eslint呢?

  • 多人参与的项目中,经常会多人交叉编辑多个文件。这就导致了各个文件中充斥着各种编码风格。最常见的就有:是否有多余的换行。变量声明未使用,属性后面加不加空格,字符串是单引号还是双引号等等。不同风格混杂在一起极大的影响代码的可读性与质量。因此在多人项目中维护一致的代码风格就很重要了。

  •  JavaScript语言比较灵活,除了基本的语法错误能在程序一启动的时候被检测到之外,很多隐含的错误都是在运行的时候才突然地蹦出来。除非你的程序有着100%的测试覆盖率,否则说不定哪天就会因为一个xxx is undefined而导致程序崩溃,而为了避免这样的错误可能你只需要在提交代码的时候用工具静态分析一下。 ESLint是一个插件化的javascript代码检测工具,它可以用于检查常见的JavaScript代码错误,也可以进行代码风格检查,这样我们就可以根据自己的喜好指定一套ESLint配置,然后应用到所编写的项目上,从而实现辅助编码规范的执行,有效控制项目代码的质量。 那么,那现在有这么多的静态代码检测工具,我们为什么要选择Eslint呢? 主要原因是他的灵活性比较高,易于扩展,所以有非常良好的生态,并且主流的编辑器都可以集成Eslint。

三、如何使⽤

  1. 安装

npm install -g eslint

  1. 如果你第⼀次使⽤ ESLint,你必须使⽤ –init 命令新建⼀个配置⽂件:

eslint --init

  1. 使⽤ ESLint 检测任何 JavaScript ⽂件:

eslint test.js test2.js

  1. ESLint 中⼀些规则运⾏命令它可以帮你⾃动修复

eslint test.js --fix

为了可以更直观的反馈,可能更多的会直接安装编辑器插件来进⾏错误提⽰,以Sublime 为例:
在 package control 中 ,先安装在 SublimeLinter ,再安装 SublimeLinter-contrib-eslint在项⽬⽬录下新建 .eslintrc ⽂件,⾃定义规则。
重新载⼊⽂件应该就⽣效了(不⽣效的话 Ctrl+Shift+P 调⽤命令⾯板 找到 sublimelinter: toggle linter 设置⽣效就好了),其他的编辑器异曲同⼯,就不再说了。
关于在如何在构建⼯具中使⽤,在这⾥不做说明(官⽹有)
使vue脚手架自定义或者创建默认都会自动生成eslint

四、规则定义

ESLint ⽀持⼏种格式的配置⽂件,如果同⼀个⽬录下有多个配置⽂件,ESLint 只会使⽤⼀个。优先级顺序如下:

    1. JavaScript - 使⽤ .eslintrc.js 然后输出⼀个配置对象。
    1. YAML - 使⽤ .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
    1. JSON -使⽤ .eslintrc.json 去定义配置的结构,ESLint 的 JSON ⽂件允许 JavaScript 风格的注释。
    1. Deprecated -使⽤ .eslintrc,可以使 JSON 也可以是 YAML。
    1. package.json - 在 package.json ⾥创建⼀个 eslintConfig属性,在那⾥定义你的配置。 下⾯就是规则啦, .eslintrc 格式,说明也在⾥⾯:
{
// 环境定义了预定义的全局变量。
"env": {
//环境定义了预定义的全局变量。更多在官⽹查看
"browser":true,
"node":true,
"commonjs":true,
"amd":true,
"es6":true,
"mocha":true
 },
// JavaScript 语⾔选项
"parserOptions": {
// 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 (false) {
// doSomethingUnfinished();
// } //cuowu
"no-constant-condition":2,
// 禁⽌在正则表达式中使⽤控制字符: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,
// 禁⽌重复的 case 标签
// 禁⽌重复的 case 标签
"no-duplicate-case":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-semi":2,
// 禁⽌对 function 声明重新赋值
"no-func-assign":2,
// 禁⽌在嵌套的块中出现 function 或 var 声明
"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-sparse-arrays":2,
// 禁⽌出现令⼈困惑的多⾏表达式
"no-unexpected-multiline":2,
// 禁⽌在return、throw、continue 和 break语句之后出现不可达代码
/*
 function foo() {
 return true;
 console.log("done");
 }//错误
 */
"no-unreachable":2,
// 要求使⽤ isNaN() 检查 NaN
"use-isnan":2,
// 强制使⽤有效的 JSDoc 注释
"valid-jsdoc":1,
// 强制 typeof 表达式与有效的字符串进⾏⽐较
// typeof foo === "undefimed" 错误
"valid-typeof":2,

// 定义对象的set存取器属性时,强制定义get
"accessor-pairs":2,
// 强制数组⽅法的回调函数中有 return 语句
"array-callback-return":0,
// 强制把变量的使⽤限制在其定义的作⽤域范围内
"block-scoped-var":0,
// 限制圈复杂度,也就是类似if else能连续接多少个
"complexity": [2,9],
// 要求 return 语句要么总是指定返回的值,要么不指定
"consistent-return":0,
// 强制所有控制语句使⽤⼀致的括号风格