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

Toki Lee
11 min readDec 12, 2020

--

產生自 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 eslintyarn 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 或其他幾個功能時所採用的設定。

--

--

Toki Lee

沒有技術上不可行,只是時間上做不到⋯