如何在 React 項目中整合 Eslint 和 Prettier

文章同時在 segmentfault.com 以及 掘金 發佈

前言

當咱們來到一個新的團隊，或者接手一個新的項目時，必定會遇到代碼規範的問題。隨着前端應用愈來愈複雜，代碼規範的問題也日益獲得你們的重視。本文就帶着你們來從 0 開始整合一個 React 前端應用的相關配置。

項目實例代碼能夠參考： eslint-prettier-react-demo

建立項目

首先，咱們使用官方提供的腳手架 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 -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

修改配置文件

下面，讓咱們須要根據 Eslint 的文檔來配置這些插件。在控制檯運行下面命令：

./node_modules/.bin/eslint --init

咱們能夠根據項目的需求，來選則相應的配置。執行完畢以後能夠看到項目的根目錄多了一個 .eslintrc.js 文件。

Eslint 支持多種格式的配置文件，優先級以下：

• 一、 .eslintrc.js
• 二、 .eslintrc.yaml
• 三、 .eslintrc.yml
• 四、 .eslintrc.json
• 五、 .eslintrc
• 六、 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 搭配使用。

配置應用

一、 安裝依賴

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

二、 修改 Exlint 配置，打開 .eslintrc.js 文件，在擴展中增長 "plugin:prettier/recommended" ：

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

三、 增長 prettier 配置文件，在根目錄建立 .prettierrc.js ：

module.exports = {
  "printWidth": 120, //一行的字符數，若是超過會進行換行，默認爲80
  "tabWidth": 2, //一個tab表明幾個空格數，默認爲2
}

提交時校驗

若是，咱們想要使用 git 提交代碼時，經過 prettier 來優化代碼，還須要藉助一些工具來完成。

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

一、 安裝依賴

npm i lint-staged husky -D

二、 增長配置

// 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"
    ]
  }
  ...
}

三、 測試 commit 命令

這是咱們嘗試增長一個組件，並提交代碼。這時發現提交不了，有報錯：

這個是由於 prettier 的默認規則，和 airbnb 規則不一致致使的。
這裏能夠參考git示例中的配置，調整一下 .eslintrc.js 文件便可。
這時候再提交代碼就會看到：

配置 VS Code 編輯器

一、 在 VS Code 商店中尋找並安裝插件 ESlint，Prettier

二、 編輯 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,

這樣當咱們在保存文件的時候，就會自動優化文件格式了。

到這裏，整個項目的搭建，以及編輯器的設置就完成了！🎉🎉🎉

參考

• How to integrate Eslint & Prettier in React
• 使用 ESLint && Prettier 規範代碼格式
• 使用ESLint+Prettier來統一前端代碼風格
• 使用ESLint+Prettier規範React+Typescript項目
• ESLint 在中大型團隊的應用實踐
• prettier
• eslint