eslint

description

每个人写代码都有自己的风格。
比如有的人喜欢吧代码写在一行很长。
有的人不喜欢在结尾加;觉得不好看。
有的人可能忘记写var了，直接使用name=‘nameString’。
对于一个大型项目而言可能有很多开发者开发维护，那我们是希望不同的人能遵循同一套coding rule这样更有利于项目的维护
eslint就可以帮我们做这个事情。

usage

install

前提是默认你已近安装好了node

npm i --save-dev eslint

init

安装好eslint之后就需要初始化，运行下面命令生成对应的配置文件

npx eslint --init

or

yarn run eslint --init

会有一些列的交互式问题，主要是问怎么使用，在哪些场景下使用eslint以及选择校验eslint的模板，如下。

安装完之后在package.json中添加配置

在最后也会引导你安装对应的包，直接yes即可

config

"scripts": { 
    "lint": "eslint src",
},

第一条命令是使用eslint校验那个文件夹下面的代码，一般前端都是src
如果是node的话可能会是app文件夹，对应修改即可。一般我们除了校验之外也期望eslint帮我们修复一些简单的问题，所以一般会在后面加上 --fix

"scripts": { 
    "lint": "eslint src --fix",
},

其实这样就算完事一大半了。每次运行 npm run lint 的时候都会按照airbnb的eslint模板来检查我们的代码。如果有些规则我们需要修改的话可以在 .eslint.js中设置对应的rule，设置之后这个优先级是要高于模板的。这里其实不必要每一条规则都很熟悉，根据自己业务中的实际情况按需设置即可。
这里有个配置规则的网站按需配置
eslint规则配置表
当然如果觉得自己有非常好用的一套eslint标准也可以分享出去，这样其他团队也可以使用
share eslint

.eslintrc.js

对这个文件的主要字段做一些说明，可以看到默认的配置文件主要有env、extends、parserOptions、rules这借个字段

1. env主要是标记我们的代码是运行在何种环境中
2. extends即我们选的eslint的模板一般选airbnb-base而不是默认的eslint:recommended
3. parserOptions 解析器的一些配置，比如 ecmaVersion属性用来指定使用的ECMAScript 版本。如果使用了jsx或者其他框架语言，就得配置下 ecmaFeatures让eslint知道用的是何种特性,同样与之同级别的plugins属性和env三者配合一起就是让eslint能够检测到对应的语法
4. rules 这个可能是我们改的比较多的，一般而言在这里设置的权重会比默认 extends的规则要大。能够起到覆盖作用他的值一般是三种分别如下：

• “off” 或 0 - 关闭规则
• “warn” 或 1 - 开启规则，使用警告级别的错误：warn 程序不会崩掉
• “error” 或 2 - 开启规则，使用错误级别的错误：error 程序会挂掉，这种级别的就是非改不可的，比较严重的了

rule中的配置就看各自具体的场景来按需配置了。详细的可以查看[eslint详细规则配置]http://eslint.cn/docs/rules/

skip lint

有的时候可能有些特殊的代码，不需要去校验，这个 时候有两种办法

1. 使用行内注释 // eslint-disable-line 跳过该行的eslint检查
2. 配置 .eslintignore 文件，eslint会跳过配置文件中的文件

.eslintignore

create

touch .eslintignore

config

一般而言在 .eslintignore可以有如下常见配置

node_modules
dist/
test
build/

也可以按需增加

husky && lint-staged

我们没必要每次都对项目中的所有文件都进行eslint检查，特别是在多和合作的项目中。往往 我们只关注自己修改的代码是否符合eslint的标准，所以就需要 husky 和 lint-staged 工具来做这个事情
husky是一个集成了git的所有钩子的插件，一般我们会在 提交代码前进行检查代码规范，如果不通过eslint的检查就提交不了。

install

npm i --save-dev lint-staged husky

config

在package.json中添加相应的配置

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
    }
  }

这样每次代码提交前都会对修改了的代码进行eslint检查

检查代码

我们在src文件夹下新建index.js写上一些代码试一下

const name = 'yangjian'

然后运行下面的命令来进行eslint检测

npm run lint

发现如下报错

可以看到会有详细哪一行因为什么原因报错了

我们把上面的空行删除，并修改代码如下：

const name = 'yangjian';
console.log(name);

再次npm run lint 会发现之前的error都消失了。
当然也可以在.eslintrc.js文件中配置对应的rule，这个就是按需配置了。

more

有个关于husky的issue提一下，可能会有人经常遇到

这个时候可以查看本地项目中 .git有木有hooks文件，如果没有那说明husky没有继承git，如果有的话就rm -rf .git/hooks然后重新安装下husky。这是一个closed issue