在React项目中使用Eslint代码检查工具

原文连接：http://www.qfxulai.cn/blog/20...

背景

最近使用 create-react-app 建立了一个项目。可是众所周知的是，这个脚手架建立的项目并无默认加入 Eslint 等 lint 插件来规范代码。
考虑到项目中不少项目没有使用相似的代码检查工具，为了规范开发。此次有必要记录一下流程。

使用 Eslint 流程

1. 安装 Eslint

首先，先安装 Eslint 到项目本地（全局安装亦可）。

npm --save-dev install eslint

安装完成以后，咱们先建立基础的 .eslintrc.yml （建议使用 .yml 格式，json/js 格式也能够）：

./node_modules/.bin/eslint --init ## 全局安装，可用 `eslint --init`

输入上述命令以后，会出现询问界面：

? How would you like to configure ESLint? (Use arrow keys)
  Use a popular style guide
❯ Answer questions about your style
  Inspect your JavaScript file(s)

选择“Answer questions about your style”，后面有一些问题，根据实际进行选择。

上述操做完成以后，会帮咱们建立一个基础的 .eslintrc.yml 文件。咱们也可使用 touch .eslintrc.yml 自行建立。

2. 安装 babel-eslint

因为项目中须要使用到 ES2015 的语言规范，所以须要安装 babel-eslint ：

npm install --save-dev babel-eslint

安装完成以后，咱们须要在 .eslintrc.yml 中修改配置

parser: "babel-eslint"

【注意】：若没有该项，曾手动增长

3. 安装 eslint-plugin-react

项目中须要使用 React 框架，须要识别出 React 特定的语法规则和要求，须要安装 eslint-plugin-react ：

npm install --save-dev eslint-plugin-react

安装完成以后，咱们须要引入该 Eslint 组件。修改 .eslintrc.yml 配置：

plugins:
  - react

特别提醒：YML语法规则中表示数组格式：- 开头，后面为数组元素，如此处的 react。属性值中若不含特殊字符，能够不加上双引号。

4. 安装 Airbnb

到如今为止，咱们只使用了一些默认建立的校验规则，为了不咱们本身按照 Eslint 的规则一个一个来个性化定制规则，非常麻烦。这里咱们使用 GitHub - airbnb/javascript: JavaScript Style Guide 规范来定义规则。这就须要安装以下插件：

npm i --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y

接着，咱们修改 .eslintrc.yml 配置，将扩展插件变动为 Airbnb ：

extends: "airbnb"

到此，静态代码检查工具安装结束。

检查 Git 提交的代码

除了静态代码检查，咱们还设置一道关卡来保证提交的代码符合规范。这就须要使用到咱们主角 pre-commit 钩子。
这里假设项目中使用 Git 进行代码的提交操做。

1. 首先在 package.json 中增长以下脚本指令：

   {
     "scripts": {
       "lint": "eslint --ext .js --ext .jsx src"
     }
   }

   这里将检查目录 src 下面全部以 .js或.jsx 格式结尾的代码文件。

2. 而后，安装 pre-commit ，以便检查提交操做：
   先执行安装 npm install --save-dev pre-commit，而后在 package.json 中增长下面配置。

   {
     "pre-commit": [
       "lint"
     ]
   }

   这里的 lint 对应第 1 步中增长的脚本命令名。

完成以后，在每次提交代码以前，pre-commit 都会拦截 Git 的 commit 操做，而后运行 lint 命令进行代码检测，若检测到有违反校验规则的状况，则会返回错误，从而致使 git commit 失败。

遇到的问题

1. 代码检查，.js 文件不支持 jsx。

error  JSX not allowed in files with extension '.js'  react/jsx-filename-extension

此时须要增长配置以便支持在 .js 文件中支持使用 JSX 语法。

rules:
  react/jsx-filename-extension: 
    - warn
    - extensions:
      - ".js" # .js 文件适用
      - ".jsx"

2. 代码中 process.env 报错

此处须要支持 node 语法。增长配置：

env:
  node: true

3. 代码检查了 serviceWorker.js 等第三方组件文件

有时项目中存在一些已经编译好的的JS文件，无需进行代码检查，此时须要增长 .eslintignore 文件来告诉 Eslint 忽略一下文件的检查，如：

# node_modules
node_modules/

# build
build/

# dist
dist/

# serviceWorker
src/serviceWorker.js

总结

一句话总结，咱们须要Eslint插件实现代码检查，须要 Airbnb 来简化校验规则的编写，须要 pre-commit 来拦截提交操做，最大限度保证仓库中的代码是符合规范要求的。其余项目（如Vue项目）须要使用到 Eslint 和 pre-commit，如上配置便可，不一样支持在因而否配置支持 react。