在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。