如何在项目中使用ESLint提升代码质量

先认识一下，我是ESLint

ESLint是一个语法规则和代码风格的检查工具。

和学习所有编程语言一样，想要入门ESLint，首先要去它的官网看看：https://eslint.org/。

为什么我们要在项目中使用ESLint

ESLint可以校验我们写的代码，给代码定义一个规范，项目里的代码必须按照这个规范写。

加入ESLint有非常多的好处，比如说可以帮助我们避免一些非常低级的错误，一些格式上的问题导致我们在运行生产环境的时候出现一些不明所以的报错。还有就是在跟团队协作的时候，每个人都保持同一个风格进行代码书写，这样团队内部相互去看别人的代码的时候，就可以更容易的看懂。

ESLint实战揭秘

EsLint具体如何使用呢，首先我们需要进行安装：

$ npm install eslint

至于是本地安装还是全局安装，你们可以看项目需求。这里只提供在公司项目中快速上手ESLint的技巧，以及在实战项目中碰到的问题的解决方案。

借别人的轮子一用

第一个小秘诀来了，现在网上有个叫eslint-config-standard的标准的ESLint规则，我们直接继承这个规则就可以了。这样的话我们项目里按照这个标准规则去开发代码就OK了。

首先，我们要先安装eslint所使用到的东西：

npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

这些都是eslint-config-standard这个npm包里推荐我们去安装的，因为它的校验规则要依赖于这些plugins进行去验证。

然后，我们要去项目的根目录里面手动创建一个.eslintrc文件，然后在里面敲入以下代码：

{
	"extends": "standard"
}

执行完以上步骤，我们就可以使用ESLint这个工具来校验项目里的代码。

在react项目里，我使用了ES6的语法，那么这个时候我们需要去安装一个工具
npm install babel-eslint --save，
为了ESLint识别一个文件里面的JS代码，所以.eslintrc文件里面新增这么一段：

{
	"plugins": [
        "react"
    ]
}

执行完以上步骤后，我们跳转到package.json文件里面的scripts里面新增一条命令：

"lint": "eslint --ext .js src/"

–ext后面需要写上指定检测文件的后缀，如.js等，紧接着后面要写上一个参数，这个参数就是我们要检测哪个目录下面的文件，一般项目文件都在src下面，所以在后面写上src/就好。

现在我们就可以到terminal里面输入$ npm run lint，来检验项目里的代码是否符合ESLint的规则。

一般来说，我们项目在前期没有加入ESLint的时候，后期我们加入了之后跑一下，基本上都会出现非常的多报错，一执行检查就是满屏的error和warning，简直是丧心病狂不堪入目~

听说git 和ESLint更配哦

为了保证每次提交的 git 代码是正确的，为此我们可以使用 eslint 配合 git hook， 在进行git commit 的时候验证eslint规范

如果 eslint 验证不通过，则不能提交。

我们需要安装一个 git 的 hook 工具 – husky

npm install husky --save-dev

因为之前已经在package.json scripts下面加入esliint的命令验证 eslint的规则，接下来在package.json 下面加入 husky 的配置项：

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

意思是在进行 git commit 的时候 先去执行 pre-commit 里面的命令 ： 我们在这里输出 husky 并且执行 npm run lint (我们之前加上的验证eslint的命令)

如果eslint验证通过了，则会进行commit 操作，否则会报eslint的错误提示

当然husky不止是能验证 commit ，也可以进行 push 等操作验证，具体可以参照npm husky

Q&A

1. Extra semicolon(额外的分号)

ESLint默认一个语句结束是不带分号的，但如果带了该怎么解决呢？只需要在.eslintrc的rules中加上如下配置：

"semi": 0

2. ‘fetch’ is not defined

fetch is a global method from browser environment. To silent eslint warning, you can put this in your eslint config file.
fetch是一种来自浏览器环境的全局方法。 对于eslint警告，可以将其放入eslint配置文件中，即.eslintrc中加入以下配置：

 "globals": {
        "fetch": false
  }

其他配置可去ESLint的rules查看。

如遇其他问题，可扫一扫添加“凌晨书桌”一起探讨交流。