[程式設計] 如何快速建立使用 Prettier + ESLint 自動排版程式碼專案

2017-09-09

排版對程式設計來說，一直是個一大問題。

安裝相關套件

1
2
> yarn add eslint eslint-plugin-prettier eslint-config-prettier babel-eslint prettier -D -E
> npm install eslint eslint-plugin-prettier eslint-config-prettier babel-eslint prettier --save-dev --save-exact

建立 .eslintrc 設定檔

以下是純粹 prettier 的組態：

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "extends": ["prettier"], // 套用 eslint-config-prettier 規則
  "plugins": ["prettier"], // 啟動 eslint-plugin-prettier 作為自動修復錯誤
  "rules": {
    "prettier/prettier": [ // 設定相關 prettier 規則
      "warn", // 錯誤提示的部分可以改為警告，避免導致錯誤提示混雜
      {
        "singleQuote": true, // JS 建議使用單引號
        "trailingComma": "es5" // 結尾逗號建議使用 es5 合法
      }
    ]
  }
}

以下是集合常見的 eslint 組態：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
  "parser": "babel-eslint", // 用 babel 解析器比較通用
  "parserOptions": {
    "ecmaVersion": 7, // 指定使用的 ECMAScript 版本
    "sourceType": "module" // 模組還是一般的 script
  },
  "env": { // 加入內建的環境組態讓程式不會報錯
    "browser": true,
    "node": true,
    "es6": true,
    "jquery": true
  },
  "extends": ["prettier", "eslint:recommended"], // 加入其他規則
  "plugins": ["prettier"], // 加入其他 plugin
  "rules": {
    "prettier/prettier": [ // 設定相關 prettier 規則
      "warn",
      {
        "singleQuote": true,
        "trailingComma": "es5"
      }
    ],
    "eqeqeq": ["error", "alway"] // 加入其他的規則
  }
}

新增 npm scripts

官方指令參考：https://eslint.org/docs/user-guide/command-line-interface

  • eslint：執行 eslint
  • src：指定目錄
  • --fix：自動修復可修復的錯誤或警告
    1
    2
    3
    4
    5
    {
      "scripts": {
        "eslint": "eslint src --fix"
      }
    }

結合 eslint-loader 即時檢查

在不藉助使用者自行安裝編輯器套件的情況下，想要達到在開發者 commit 前做好 eslint 檢查和 prettier 排版修正，除了下面還會提到的 pre-commit 方法外，就是結合 eslint-loader 讓 webpack 在持續監視的情況即時套用修正。

安裝 eslint-loader

1
$ yarn add -D eslint-loader

設定 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
  module: {
    rules: [
      {
        enforce: 'pre', // 確保 lint 的結果是最原始的檔案內容
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          fix: true, // 自動修正可修正的項目
        }
      }
    ]
  }
}

其他選項請參考 eslint-loader 網站說明。

設定 commit 前重新排版

官方在提供了三種方式，這裡則提供另一個作者覺得比較好的解決方案。

安裝 pre-commit 套件。

1
$ yarn add -D pre-commit

修改 package.json 的內容，新增後就會有這樣的效果：在 commit 動作之前先執行 store-add 把當前已 add 的檔案暫存在 gittoadd ，接著繼續執行 eslint 和 prettier 重新排版，之後透過 git update 把暫存在 gittoadd 的檔案清單重新 add 回去，最後繼續執行 commit。

1
2
3
4
5
6
7
8
{
  "scripts": {
    "eslint": "eslint src --fix",
    "store-add": "git diff --name-only --cached  --diff-filter=ACMRT > gittoadd",
    "git-update": "cat ./gittoadd | xargs git add"
  },
  "pre-commit": ["store-add", "eslint", "git-update"]
}

最後記得把 gittoadd 這個暫存用檔案加入 .gitignore 中，避免被 git 監視。

雖然比起平常執行 commit 的速度要慢上不少，但是這樣就可以真正的做到自動化，就算多人開發時，某些開發者沒有安裝 prettier 的編輯器套件也可以確實地在 commit 之前根據排版規整理過。

安裝編輯器套件

參考資料