在React項目中使用Eslint代碼檢查工具及常見問題

背景

最近使用 create-react-app 創(chuàng)建了一個項目。但是眾所周知的是，這個腳手架創(chuàng)建的項目并沒有默認加入 Eslint 等 lint 插件來規(guī)范代碼。

考慮到項目中很多項目沒有使用類似的代碼檢查工具，為了規(guī)范開發(fā)。這次有必要記錄一下流程。

使用 Eslint 流程

1. 安裝 Eslint

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

npm --save-dev install eslint

安裝完成之后，我們先創(chuàng)建基礎的 .eslintrc.yml （建議使用 .yml 格式，json/js 格式也可以）：

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

輸入上述命令之后，會出現(xiàn)詢問界面：

? 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”，后面有一些問題，根據(jù)實際進行選擇。

上述操作完成之后，會幫我們創(chuàng)建一個基礎的 .eslintrc.yml 文件。我們也可以使用 touch .eslintrc.yml 自行創(chuàng)建。

2. 安裝 babel-eslint

由于項目中需要使用到 ES2015 的語言規(guī)范，因此需要安裝 babel-eslint ：

npm install --save-dev babel-eslint

安裝完成之后，我們需要在 .eslintrc.yml 中修改配置

parser: "babel-eslint"

【注意】：若沒有該項，曾手動增加

3. 安裝 eslint-plugin-react

項目中需要使用 React 框架，需要識別出 React 特定的語法規(guī)則和要求，需要安裝 eslint-plugin-react ：

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

安裝完成之后，我們需要引入該 Eslint 組件。修改 .eslintrc.yml 配置：

plugins:
 - react

特別提醒：YML語法規(guī)則中表示數(shù)組格式：- 開頭，后面為數(shù)組元素，如此處的 react。屬性值中若不含特殊字符，可以不加上雙引號。

4. 安裝 Airbnb

到現(xiàn)在為止，我們只使用了一些默認創(chuàng)建的校驗規(guī)則，為了避免我們自己按照 Eslint 的規(guī)則一個一個來個性化定制規(guī)則，很是麻煩。這里我們使用 GitHub - airbnb/javascript: JavaScript Style Guide 規(guī)范來定義規(guī)則。這就需要安裝如下插件：

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

接著，我們修改 .eslintrc.yml 配置，將擴展插件變更為 Airbnb ：

extends: "airbnb"

到此，靜態(tài)代碼檢查工具安裝結(jié)束。

檢查 Git 提交的代碼

除了靜態(tài)代碼檢查，我們還設置一道關卡來保證提交的代碼符合規(guī)范。這就需要使用到我們主角 pre-commit 鉤子。
這里假設項目中使用 Git 進行代碼的提交操作。

首先在 package.json 中增加如下腳本指令：

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

這里將檢查目錄 src 下面所有以 .js或.jsx 格式結(jié)尾的代碼文件。

然后，安裝 pre-commit ，以便檢查提交操作：

先執(zhí)行安裝 npm install --save-dev pre-commit，然后在 package.json 中增加下面配置。

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

這里的 lint 對應第 1 步中增加的腳本命令名。

完成之后，在每次提交代碼之前，pre-commit 都會攔截 Git 的 commit 操作，然后運行 lint 命令進行代碼檢測，若檢測到有違反校驗規(guī)則的情況，則會返回錯誤，從而導致 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 等第三方組件文件

有時項目中存在一些已經(jīng)編譯好的的JS文件，無需進行代碼檢查，此時需要增加 .eslintignore 文件來告訴 Eslint 忽略一下文件的檢查，如：

# node_modules
node_modules/

# build
build/

# dist
dist/

# serviceWorker
src/serviceWorker.js

總結(jié)

一句話總結(jié)，我們需要Eslint插件實現(xiàn)代碼檢查，需要 Airbnb 來簡化校驗規(guī)則的編寫，需要 pre-commit 來攔截提交操作，最大限度保證倉庫中的代碼是符合規(guī)范要求的。

其他項目（如Vue項目）需要使用到 Eslint 和 pre-commit，如上配置即可，不同支持在于是否配置支持 react。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。