背景

最近使用 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 進行代碼的提交操作。

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

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

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

然后，安裝 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_modulesnode_modules/# buildbuild/# distdist/# serviceWorkersrc/serviceWorker.js

總結

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。