背景

最近使用 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 鉤子。