ESLint 用於發現程式碼錯誤，統一程式碼風格。
Prettier 專門用來美化格式、統一程式碼風格，在這個方面比 ESLint 更強大。

本文記錄一下我給一個專案新增 ESLint + Prettier 的過程，以及遇到的問題和注意的點。

專案是 ts + react 開發的元件庫，樣式使用 scss，通過 webpack4 打包。

過程

安裝配置 ESLint

安裝需要的包

分開寫，更清晰：

npm i eslint -D
npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
npm i eslint-plugin-react -D
npm i eslint-config-alloy -D
npm i eslint-loader -D
 

• 首先要安裝 eslint，eslint 預設使用 Espree 進行解析，無法識別 ts 的一些語法，所以需要安裝一個 ts 的解析器 @typescript-eslint/parser，用它來代替預設的解析器，然後由 @typescript-eslint/eslint-plugin 來提供有關 ts 的規則補充。
• 由於是 react 專案，所以還需要外掛 eslint-plugin-react 來支援 .tsx。
• eslint 規則眾多，且有些原生規則在 ts 中不相容，推薦 alloy 的這套配置 eslint-config-alloy，它提供了 ts + react 的版本，並且不包含程式碼格式的部分，與 Prettier 完全相容。
• 最後是提供給 webpack 的 eslint-loader，可以在使用 webpack-dev-server 開發中實時檢查，越早發現錯誤越好解決。

寫配置檔案

接下來在專案根目錄建立 .eslintrc.json 檔案

{
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "@typescript-eslint/eslint-plugin"
    ],
    "extends": [
        "alloy",
        "alloy/react",
        "alloy/typescript"
    ],
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "env": {
        // 您的環境變數（包含多個預定義的全域性變數）
        // Your environments (which contains several predefined global variables)
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    "globals": {
        // 您的全域性變數（設定為 false 表示它不允許被重新賦值）
        // Your global variables (setting to false means it's not allowed to be reassigned)
        //
        // myGlobal: false
    },
    "rules": {
        // 自定義您的規則
        // Customize your rules
    }
}
 

如上，把解析器、外掛、擴充套件的規則集都配置進去。

新增script指令

在 package.json 的 scripts 中新增指令，就可以使用了

// package.json

{
    "scripts": {
        "lint": "eslint '{components,example}/**/*.{ts,tsx,js,jsx}'",
        "lint_fix": "eslint '{components,example}/**/*.{ts,tsx,js,jsx}' --fix"
    }
}

以上指令表示對 components 和 example 資料夾下的 .ts .tsx .js .jsx 檔案進行檢查。
上面是 glob 的形式，也可以像下面這樣寫成資料夾形式，就需要通過 --ext 來對擴充套件的檔案型別進行指定。

// package.json

{
    "scripts": {
        "lint": "eslint {components,example} --ext .ts,.tsx,.js,jsx",
        "lint_fix": "eslint {components,example} --ext .ts,.tsx,.js,jsx --fix"
    }
}

注意：
glob 形式下檔案路徑要加引號。
--ext 只能搭配資料夾形式，對 glob 形式無效。

給 webpack 新增 eslint-loader

module: {
        rules: [
            {
                test: /\.(jsx|js|ts|tsx)$/,
                include: [
                    path.resolve(__dirname, '../components'),
                    path.resolve(__dirname, '../example')
                ],
                exclude: [/node_modules/],
                use: ['eslint-loader'],
                enforce: 'pre'
            }
      ]
}

注意：
要把它放在 rules 的第一項，或者新增 enforce: 'pre' 來保證首先應用 eslint-loader，因為是要對我們的原始碼進行檢查，檢查要在 babel-loader 等其他編譯之前。

安裝 vscode 的 eslint 外掛

外掛中搜 eslint 直接安裝，就可以在編輯器擁有實時錯誤標紅。
然後在 settings.json 中新增：

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

就可以在儲存檔案時自動 fix。

怎麼開啟 settings.json ？左下角齒輪 -> 第一行 command ... -> 輸入 open settings.json

新增 .eslintignore 檔案

編輯器中的檢測沒有指定路徑，所以會檢查 components 和 example 之外的檔案，如果有些不想讓它檢查，可以根目錄新增 .eslintignore 檔案。

build/
dist/

預設包含 node_modules/

ESLint 就配置好了，包括 配置檔案 + 執行指令碼 + webpack + 編輯器。

安裝配置 Prettier

安裝 Prettier 包

npm i prettier -D

新建 prettier.config.js 檔案配置規則

prettier 的配置規則很少，推薦一套作為參考。

// prettier.config.js or .prettierrc.js
module.exports = {
    // 一行最多 100 字元
    printWidth: 100,
    // 使用 4 個空格縮排
    tabWidth: 4,
    // 不使用縮排符，而使用空格
    useTabs: false,
    // 行尾需要有分號
    semi: true,
    // 使用單引號
    singleQuote: true,
    // 物件的 key 僅在必要時用引號
    quoteProps: 'as-needed',
    // jsx 不使用單引號，而使用雙引號
    jsxSingleQuote: false,
    // 末尾不需要逗號
    trailingComma: 'none',
    // 大括號內的首尾需要空格
    bracketSpacing: true,
    // jsx 標籤的反尖括號需要換行
    jsxBracketSameLine: false,
    // 箭頭函式，只有一個引數的時候，也需要括號
    arrowParens: 'always',
    // 每個檔案格式化的範圍是檔案的全部內容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要寫檔案開頭的 @prettier
    requirePragma: false,
    // 不需要自動在檔案開頭插入 @prettier
    insertPragma: false,
    // 使用預設的折行標準
    proseWrap: 'preserve',
    // 根據顯示樣式決定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 換行符使用 lf
    endOfLine: 'lf'
};

執行檢查

npx prettier --test .  // 全部檔案
npx prettier --test components/  // 特定檔案

執行修復

npx prettier --write .  // 全部檔案
npx prettier --write components/  // 特定檔案

安裝 vscode 的外掛，自動格式化

實際上不用執行，直接安裝編輯器外掛，儲存檔案就直接自動格式化了。
vscode 搜 prettier 直接安裝，然後在 settings.json 中新增配置：

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

遇到的問題

1.eslint 匹配不到檔案會報錯

剛開始 eslint 總是會報錯

Oops! Something went wrong!