建立專案

首先，我們使用官方提供的腳手架 create-react-app 來建立一個專案：

npx create-react-app eslint-prettier-react-demo/
cd eslint-prettier-react-demo/

Eslint

安裝依賴

Eslint 是一個可以檢驗程式碼，並給出報告的工具。它的目標是保證程式碼的一致性，避免錯誤。Eslint 為我們提供了 ECMAScript/JavaScript規範的程式碼校驗，我們可以根據個人/團隊的程式碼風格進行配置，也可以使用開源的配置方案，本文會採用eslint-config-airbnb來配置。

Eslint 的強大得益於它活躍的開源社群，以及靈活的外掛機制。本文中，我們需要去配置一個 React 專案，就可以去選擇一些開源社群合適的外掛，來幫助我們完成目標。

• eslint-plugin-import：此外掛主要為了校驗import/export語法，防止錯誤拼寫檔案路徑以及匯出名稱的問題
• eslint-plugin-jsx-a11y：提供jsx元素可訪問性校驗
• eslint-plugin-react：校驗 React
• eslint-plugin-react-hooks：根據 Hooks API 校驗 Hooks 的使用

接下來，我們安裝這些依賴：

npm i -Deslint eslint-config-airbnb eslint-plugin-importeslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
 

修改配置檔案

下面，讓我們需要根據 Eslint 的文件來配置這些外掛。在控制檯執行下面命令：

./node_modules/.bin/eslint --init

我們可以根據專案的需求，來選則相應的配置。執行完畢之後可以看到專案的根目錄多了一個.eslintrc.js檔案。

Eslint 支援多種格式的配置檔案，優先順序如下：

• 1、 .eslintrc.js
• 2、 .eslintrc.yaml
• 3、 .eslintrc.yml
• 4、 .eslintrc.json
• 5、 .eslintrc
• 6、 package.json

我們使用官方推薦的.eslintrc.js格式就好。

接下來，讓我們使用喜歡的編輯器來開啟這個檔案，為了便於理解，我增加了一些註釋：

module.exports = {
    // 為我們提供執行環境，一個環境定義了一組預定義的全域性變數
    "env": {
        "browser": true,
        "es6": true
    },
    // 一個配置檔案可以被基礎配置中的已啟用的規則繼承。
    "extends": [
        "airbnb"
    ],
    // 自定義全域性變數
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "_": true,
        "$": true,
    },
    // ESLint 預設使用Espree作為其解析器，你可以在配置檔案中指定一個不同的解析器
    // "parser": "@typescript-eslint/parser",
    // 配置解析器支援的語法
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    // ESLint 支援使用第三方外掛。在使用外掛之前，你必須使用 npm 安裝它。
    // 在配置檔案裡配置外掛時，可以使用 plugins 關鍵字來存放外掛名字的列表。外掛名稱可以省略 eslint-plugin- 字首。
    "plugins": [
        "react",
        // "@typescript-eslint"
    ],
    // ESLint 附帶有大量的規則。你可以使用註釋或配置檔案修改你專案中要使用的規則。要改變一個規則設定，你必須將規則 ID 設定為下列值之一：
    // "off" 或 0 - 關閉規則
    // "warn" 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程式退出)
    // "error" 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程式會退出)
    "rules": {
        semi: 0,
        'no-unused-vars': [
            1,
            {
                vars: 'all',
                args: 'after-used',
                ignoreRestSiblings: true,
                varsIgnorePattern: '^_',
                argsIgnorePattern: '^_|^err|^ev' // _xxx, err, error, ev, event
            }
        ],
        'no-useless-escape': 2,
    }
};

Prettier

我們可以藉助 Eslint 來提高我們編碼的質量，但是卻無法保證統一程式碼風格。一個統一的程式碼風格對於團隊來說是很有價值的，所以為了達到目的，我們可以選擇使用Prettier在儲存和提交程式碼的時候，將程式碼修改成統一的風格。這樣做同時也降低了 Code Review 的成本。它不會代替 Eslint，所以需要和 Eslint 搭配使用。

配置應用

1、 安裝依賴

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

2、 修改 Exlint 配置，開啟.eslintrc.js檔案，在擴充套件中增加"plugin:prettier/recommended"：

    "extends": [
        "airbnb",
        "plugin:prettier/recommended"
    ]

3、 增加 prettier 配置檔案，在根目錄建立.prettierrc.js：

module.exports = {
  "printWidth": 120, //一行的字元數，如果超過會進行換行，預設為80
  "tabWidth": 2, //一個tab代表幾個空格數，預設為2
}

提交時校驗

如果，我們想要使用git提交程式碼時，通過 prettier 來優化程式碼，還需要藉助一些工具來完成。

• husky：一個方便用來處理pre-commit、pre-push等githooks的工具
• lint-staged：對 git 暫存區的程式碼，執行 linters 的工具

1、 安裝依賴

npmi lint-staged husky -D

2、 增加配置

// package.json
{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/*.{js,jsx,mjs,ts,tsx}": [
      "node_modules/.bin/prettier --write",
      "node_modules/.bin/eslint --fix",
      "git add"
    ],
    "src/*.{css,scss,less,json,html,md,markdown}": [
      "node_modules/.bin/prettier --write",
      "git add"
    ]
  }
  ...
}

3、 測試 commit 命令

這是我們嘗試增加一個元件，並提交程式碼。這時發現提交不了，有報錯：

這個是因為 prettier 的預設規則，和airbnb規則不一致導致的。
這裡可以參考git示例中的配置，調整一下.eslintrc.js檔案即可。
這時候再提交程式碼就會看到：

廣州VI設計公司https://www.houdianzi.com

配置 VS Code 編輯器

1、 在 VS Code 商店中尋找並安裝外掛 ESlint，Prettier

2、 編輯settings.json，通過下面路徑，可以找到相應的配置檔案：

• Windows%APPDATA%\Code\User\settings.json
• macOS$HOME/Library/Application Support/Code/User/settings.json
• Linux$HOME/.config/Code/User/settings.json

然後增加如下引數：

  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "eslint.autoFixOnSave": true,
  "eslint.enable": true,

這樣當我們在儲存檔案的時候，就會自動優化檔案格式了。到這裡，整個專案的搭建，以及編輯器的設定就完成了！