[筆記] React 專案配置 ESLint + stylelint + Prettier

產生自 Meme 梗圖倉庫

為了控制程式碼的品質或是統一團隊的程式碼風格，一個專案多少會使用到一些檢查工具，但若是開發後期才意識要導入 Linter ，可能會發現一堆的問題，最後只能默默的把 Rules 給關掉了呢（笑）。

那麼在前端的開發中主要就是 JavaScript 也就是 ESLint，而之前也了解到了 styleLint ，可以對類 CSS 的語言做檢查，而這邊就打算建立一個使用到 ESLint + styleLint + Prettier 的專案，那麼這邊就先以 Create React App 開個新專案做範例吧。

npx create-react-app lint-ex
cd lint-ex

ESLint

說到 JavaScript 的 Linter ，那就是 ESLint 了，如大部分人所熟知的 Airbnb, Google, Standard 三種主要的風格，這些在 ESLint 都有對應的套件可以安裝：

1. eslint-config-standard
2. eslint-config-airbnb
3. eslint-config-google

一般來說我偏好 Standard 的風格，或者使用 Airbnb 的風格並去掉結尾分號，不過每個使用者都還是會有些個人的偏好風格，建議可以以這三個主流的風格去調整，而這邊就先採用 Standard 的風格。

安裝套件：

yarn global add eslint
yarn add -D eslint \
eslint-plugin-react \ 
eslint-config-standard \
eslint-plugin-promise \
eslint-plugin-import \
eslint-plugin-node \

VSCode Extension ：

ESLint 的 VSCode Extension

並在專案目錄加入設定檔 .eslintrc.json 在專案目錄：

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es6": true,
    "node": true,
    "commonjs": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "standard"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off"  // 似乎 React 17 React 會自動 import 所以應該可以拿掉
  }
}

來稍微看看設定檔的內容：

1. extends延伸設定檔
   使用 extends 可以加上一些第三方設定好的設定檔，一般建議先設定個 recommended ，裡面會有比較基本的該有的 rules，這部分也都能在 rules 裡覆蓋掉。
   另外 "standard" 指的是剛剛安裝的套件 eslint-config-standard。這是因為 extend 這個欄位在填寫的時候可以省略掉 eslint-config- 的部分（而在 plugin 的欄位則是可以省略掉 eslint-plugin-）。
2. parserOptions
   parserOptions 能夠設定一些解析的設定，比如 es6 和 import export 或 react jsx 的支援。

沒設置 parserOptions.sourceType.module 為 module 的情況

這些都設置完之後，就會開始跳出一些錯誤：

standard 的一個特點是結尾不加分號

除了一個一個去進行修正外，我們可以使用指令 eslint特定目錄下的特定檔案，配合 --fix 能夠找出檔案並自動修正。

另外可以選擇加上 Formatter ，這樣就只要 save 後就能夠自動修正了，要達到這件事並不困難，只要在 VSCode 的 settings.json 中加上 codeActionsOnSave 的相關設定即可：

// settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  }
}

只要這樣每次存檔時，就會自動修正囉，這邊我會建議設定在 Workspace 或是 remote 的 settings.json中，因為總會有些專案可能不期望使用到 Formatter 的功能。

stylelint

對應 JavaScript 的部分有 Linter ，而 CSS 的部分 也有 stylelint 可以使用。其實之前正好接觸過 scss-lint 這個工具，只是說實在當時使用的體驗不怎麼好，而且目前在官方的 Github 上面也建議使用者使用其他的工具，所以也是建議可以嘗試看看 stylelint。

stylelint 除了有許多社群上的使用者，也支援大部分類 CSS 的語言，如 CSS/SASS/LESS 之類的 ，大多都能找到套件或其他人設定好的設定檔可以支援。另外可以嘗試看看 stylelint Config Generator 可以簡單的產生屬於你自己的 rules。

就開始來安裝套件吧：

yarn add -D stylelint \
stylelint-config-standard

而 VSCode 的 Extension 是這個：

stylelint 的 VSCode Extension

目前這裡就直接使用 stylelint-config-standard 的設定檔，看起來是相對簡單，因為在 CSS 的風格上，我並沒有特別去了解，不太了解不同社群風格的主要差異，但 stylelint-config-standard 在 Github 上有說明其採納了 Google, Airbnb, Idiomatic CSS Principles 的風格。

在專案目錄加入 .stylelintrc.json 設定檔：

// .stylelintrc.json
{
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-standard"
  ]
}

加完後一樣就會看到些錯誤：

說明 Block 間要分換行

與上面 ESLint 相同，我們可能會想要加入 Formmater，一樣在 settings.json 中加上 source.fixAll.stylelint的設置即可：

// settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true,
  }
}

這樣就完成 stylelint 基本的設置了。

Prettier

最後來說明 Prettier ，比起 ESLint 來說，Prettier 看起更是處理「風格」的部分。舉例來說， ESLint 我們可能會看到強制 var, let, const 變數宣告在不同情況的使用，而 stylelint 可能是檢查在一個區塊中是否重複使用了相同屬性，或先後順序可能會導致某些 class 沒有效用的問題。所以 ESLint 應該是比較適合處理程式碼「品質」這樣的問題。

也就是說，配合 Prettier 與 Linter 的使用，可以打造出「漂亮」且有品質的開發環境。

在已經導入 ESLint 與 stylelint 的情況下，若要導入 Prettier 的話，需要加入些對應的 plugin 和 config 才能一起使用。

yarn add -D eslint-config-prettier \
eslint-plugin-prettier \
stylelint-config-prettier\
stylelint-prettier

記得也要安裝 VSCode 的 Extensions：

Prettier 的 VSCode Extension

在專案目錄加入 .prettierrc.json 並修改.stylelintrc.json與.eslintrc.json

// .prettierrc.json
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "useTabs": false,
  "quoteProps": "preserve"
}
// 修改後的 .eslintrc.json
{
  "env": {
    "browser": true,
    "es6": true,
    "node": true,
    "commonjs": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "standard",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "react/react-in-jsx-scope": "off"
  },
  "plugins": [
    "prettier"
  ]
}
// 修改後的 .stylelintrc.json
{
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-standard",
    "stylelint-prettier/recommended",
    "stylelint-config-prettier"
  ],
  "plugins": [
    "stylelint-prettier"
  ],
  "rules": {
    "prettier/prettier": [
      true,
      {
        "singleQuote": false
      }
    ]
  }
}

上面的部分可以看到，只要在 Extension 和 Plugin 中加入對應的 Prettier 套件，並在 rules 中加入 prettier/prettier 的規則後就能把 Prettier 的規則加到 Linter 中了。

其中在 .stylelintrc.json 中我調整了 “singleQuote”: false ，是因為 .prettierrc.json 的部分設定為單引號，但在 CSS 檔案的部分我習慣使用雙引號，所以會需要做個覆蓋。

另外有一點要注意的是，Linter 與 Prettier 的 rules 有可能會互相影響，而extends 的排序也會影響到結果，所以在設置上如果有更多複雜的設定，或者配合其他的 Plugin 設定時，可能會產生不同的衝突，在這邊我是把 Prettier 的部分放到最後面，就沒遇到設置上的衝突。

結論

其實大部分的設置只要跟隨一個特定風格，都有很完整第三方設定好的 config 或套件，主要還是有想要複雜的功能，像是設定 SCSS 或 CSS modules 時踩了一些坑…，我想如果有時間時我想要再補 SCSS 或其他幾個功能時所採用的設定。