eslint从入门到放弃（四）eslint配置之规则

上文说了esLint配置之env，今天说下ESLint配置中的rules，前文传送门，

eslint从入门到放弃（一）eslint入门

eslint从入门到放弃（二）esLint配置之globals

eslint从入门到放弃（三）ESLint配置之env（三）

大家好我是【小枫学幽默】，这是我eslint从入门到放弃系列教程的第四篇，欢迎关注后续更新。接下来步入正题：

ESLint配置之rules

ESLint rules 是个啥？这玩意儿有啥用？

在开篇eslint从入门到放弃（一）eslint入门中我们就讲过，eslint是一个检查代码的工具，而且是通过用户项目中的.eslintrc（eslint配置文件）中rules中使用的规则(rule)来检查代码的；

其实rules就是是eslint配置中的规则(rule)的集合，就是来告诉eslint如何检查代码的。

ESLint 提供了哪些内置规则

eslint规则参考：官方文档 >> 传送门

ESLint rules 怎么用？

首先eslint有一条规则（no-undef）是不允许使用未定义的变量，在eslint 检测代码的时候会报错，来，跟着齐步走

让我们先新建一个demo目录，文件结构如下

demo
├── .DS_Store
├── .eslintrc.js
└── rules.js

.eslintrc（eslint配置文件）内容如下

module.exports = {
    "rules": {
        // 这个规则告诉eslint，代码中出现使用未定义的变量时，给出错误提示
        "no-undef": "error",
    }
}

env.js（我们要用eslint校验的文件）

function add (a, b) {
    // c 是未定义的
    return a + b + c
}
add(1, 2)

打开命令行，进入demo目录，用eslint校验下rules.js

npx eslint rules.js -c .eslintrc.js

demo/rules.js
  3:20  error  'c' is not defined  no-undef

如何使用多条规则

修改.eslintrc.js文件，添加多条规则

module.exports = {
    "rules": {
        // 这个规则告诉eslint，代码中出现使用未定义的变量时，给出错误提示
        "no-undef": "error",
        // 要求使用在判断相等或不相等时必须使用 === 和 !==
        "eqeqeq": "error",
    }
}

修改rules.js，添加错误代码

function add(a, b) {
    // c 是未定义的
    return a + b + c
}
add(1, 2)

var action = 'add'
var targetMethod = 'updateMethod'
// 这里使用了 == 不符合 eslint 的eqeqeq规则要求
if (action == 'add') {
    targetMethod = 'addMethod'
}

打开命令行，进入demo目录，用eslint校验下rules.js

npx eslint rules.js -c .eslintrc.js

执行结果

/demo/rules.js
   3:20  error  'c' is not defined                   no-undef
  10:12  error  Expected '===' and instead saw '=='  eqeqeq

规则(rule)的选项

上面的 rules中的no-undef和eqeqeq规则我们都配置了error级别，即一旦代码中出现错误，eslint就会报错（如果在git提交代码时，在git的hooks执行了eslint脚本，则会禁止提交代码），如果我认为不使用==比较符是可以接受的，那么我可以在rules中添加eqeqeq规则为warn级别，这样一旦代码中出现==比较符，eslint则只给出警告。

修改.eslintrc.js文件，修改eqeqeq规则为warn级别

module.exports = {
    "rules": {
        // 这个规则告诉eslint，代码中出现使用未定义的变量时，给出错误提示
        "no-undef": "error",
        // 要求使用在判断相等或不相等时必须使用 === 和 !==
        "eqeqeq": "warn",
    }
}

执行结果

npx eslint rules.js -c .eslintrc.js
demo/rules.js
   3:20  error    'c' is not defined                   no-undef
  10:12  warning  Expected '===' and instead saw '=='  eqeqeq

规则可使用的选项值

• “off” 或 0 - 关闭规则
• “warn” 或 1 - 启用并视作警告（不影响退出）
• “error” 或 2 - 启用并视作错误（触发时退出代码为 1）

规则配置：官方文档 >> 传送门

欢迎关注我的个人公众号「「小枫学幽默」」一起成长，一起分享生活！！