ESLint学习笔记

一、安装并使用Eslint

本地项目安装：

// 放在开发依赖中
npm install eslint -D

向导配置：

npx eslint --init

运行eslint检测：

npx eslint xxx.js
// 可以使用通配符
npx eslint ./src/*.js

为了方便，可以在packages.json中配置执行脚本

"scripts":{
    "eslint":"eslint ./src/*.js"
}

// 在命令行中，执行该命令
yarn eslint

注意：eslint ./src/*.js只检测src下的js文件，不进入目录，若想检测src下所有文件和目录里的文件：

"scripts":{
    "eslint":"eslint src"
}

console错误

错误重现

mkdir proj
cd proj
yarn init -y && yarn add eslint && code .

创建文件：src/index.js

console.log("hello");

运行eslint配置向导。。。参考above，然后执行检测

npx eslint ./src/*.js

报错！！！

解决

由于使用了默认配置，默认配置不允许console，所以打开eslintrc.json文件，新增一条规则：

"rules":{
    "no-console":"off"
}

二、解读Eslint配置

env

当前eslint运行的环境，每套环境都包括一套全局变量

比如，window全局变量只在env=browser中，global全局变量只在env=node中，$()只在env=jquery中

相关规则在nodemodule中的globals里

相关变量可以查看文档

也可以通过注释指定环境：/* eslint-env node, mocha */

globals

这里放的是能额外访问的全局变量

在某个页面上当使用全局变量时会检测报错：使用未定义变量

解决方法：

1. 使用注释声明变量为全局变量：/* global xxx */

2. 在eslint配置文件中声明变量

   "globals": {
       "xxx": "readonly"
   }
   

   readonly字段也可以为true和false（同readonly）

rules

制定的检测规则

在使用单个属性修改时："no-console":"off"这样的为修改！

在使用[]赋值时："semi":["error","always"]为覆盖！

extends

设定使用的是规则样板中的哪一种，即继承哪一种，在eslint文档中，打勾的表示recommend配置

配合rules属性，可以自定义当前配置：继承extends配置，然后并修改

更详细配置：http://eslint.cn/

三、不同目录自定义配置规则

在需要作用的目录下创建.eslintrc.js文件，则eslint会在规则匹配时默认使用距离最近的规则

同时，如果package.json和eslintrc同时存在则会优先使用eslintrc

如果只有eslintrc，且与父目录中的package.json配置冲突，则会优先使用子文件中的eslintrc规则

四、在项目中配置Eslint

• JS配置文件
• YML配置文件
• JSON配置文件
• package.json文件中配置

前三种使用向导进行配置即可，最后一种在package.json中添加一个字段，然后将配置文件copy过来即可：

"eslintConfig": {
    "env": {
        ...
    },
    ...
},
"eslintIgnore": ["hello.js"]

注意：可以使用注释为某个文件单独配置

注释格式：/* eslint no-console: "off" */，多个配置使用逗号分隔

如果不想检查本文件，在文件开头加上：/* eslint-disable */

五、Eslint插件配置

插件在extends字段中进行配置

六、Glob路径匹配

用于按路径改写规则

如前面定义了规则，在下面加入overrides字段可以按照路径来覆盖前面的规则

"rules":{
    "quotes":["error","double"]
},
"overrides":[
    {
        "files":['*.test.js','test/**.js'],
        "excludeFiles":['test/*/*.js'],
        "rules":{
            "quotes":["error","double"]
        }
	}
]

以上将结尾为.test.js的和test目录下的所有包括子目录的js引号改为双引号验证规则，这个规则不包括test目录下的子目录里的js文件

七、在提交代码时运行检测

git的特性，在提交前进行处理，然后再配置文件package.json中：

pre-commit插件

"scripts":{
    "lint":"eslint src",
},
"pre-commit":["lint"]

husky插件

"husky":{
	"hooks":{
        "pre-commit":"npm run lint"
    }
}

该插件可以在git的多个阶段来执行