背景

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

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

使用 Eslint 流程

1. 安裝 Eslint

首先，先安裝 Eslint 到項(xiàng)目本地（全局安裝亦可）。

npm --save-dev install eslint

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

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

輸入上述命令之后，會(huì)出現(xiàn)詢問(wè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”，后面有一些問(wèn)題，根據(jù)實(shí)際進(jìn)行選擇。

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

2. 安裝 babel-eslint

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

npm install --save-dev babel-eslint

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

parser: "babel-eslint"

【注意】：若沒(méi)有該項(xiàng)，曾手動(dòng)增加

3. 安裝 eslint-plugin-react

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

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

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

plugins:
 - react

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

4. 安裝 Airbnb

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

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

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

extends: "airbnb"

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

檢查 Git 提交的代碼

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

首先在 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 對(duì)應(yīng)第 1 步中增加的腳本命令名。

完成之后，在每次提交代碼之前，pre-commit 都會(huì)攔截 Git 的 commit 操作，然后運(yùn)行 lint 命令進(jìn)行代碼檢測(cè)，若檢測(cè)到有違反校驗(yàn)規(guī)則的情況，則會(huì)返回錯(cuò)誤，從而導(dǎo)致 git commit 失敗。

遇到的問(wèn)題

1. 代碼檢查，.js 文件不支持 jsx。

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

此時(shí)需要增加配置以便支持在 .js 文件中支持使用 JSX 語(yǔ)法。

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

2. 代碼中 process.env 報(bào)錯(cuò)

此處需要支持 node 語(yǔ)法。增加配置：

env:
 node: true

3. 代碼檢查了 serviceWorker.js 等第三方組件文件

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

# node_modules
node_modules/

# build
build/

# dist
dist/

# serviceWorker
src/serviceWorker.js

總結(jié)

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論