認識 ESLint 和 Prettier

原文連接：https://ssshooter.com/2020-06...

• ESLint 和 Prettier 分別是什麼，有什麼關係？
• 直接用腳手架生成一個帶 ESLint 的項目，成天報錯有沒有很懵逼？
• 這些東西到底怎麼配置？

讀完就能解決這些疑問啦！

ESLint

先說是什麼：ESLint 是一個檢查代碼質量與風格的工具，配置一套規則，他就能檢查出你代碼中不符合規則的地方，部分問題支持自動修復。

使用這麼一套規則有什麼用呢？若是單人開發的話卻是沒什麼了，可是一個團隊如果存在兩種風格，那格式化以後處理代碼衝突就真的要命了，統一的代碼風格真的很重要！

（其實之前本身作一個項目的時候，公司電腦和家庭電腦的代碼風格配置不同，在家加班的時候也常常順手格式化了，這麼循環了幾回不一樣的風格，致使 diff 極其混亂 😂）

如何配置

用腳手架生產的配置可能會在 package.json 裏面，我的建議拆成單獨的 .eslintrc.json 文件，另外也可使用 js 文件 export 或者 yaml 格式。

默認 ESLint 不會有任何規則，不過你能夠直接用 "eslint:recommended" 套用一些經常使用規則（包括上面 rules 頁面打了勾的選項）。

我以前用 vue cli 建立的工程規則是 "@vue/standard"：

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": ["plugin:vue/essential", "@vue/standard"],
  "rules": {
    "semi": ["error", "never"],
    "quotes": ["error", "single"],
    "comma-dangle": ["error", "only-multiline"],
    "space-before-function-paren": ["error", "never"]
  },
  "parserOptions": {
    "parser": "babel-eslint"
  }
}

rules 部分是我按平時的風格本身加的，rules 中的定義會覆蓋 extends 裏配置組合中的設定。對於那些使用腳手架搭建的項目，遇到不符合團隊或本身代碼風格的地方能夠另外在 rules 裏配置。

實用提示

在 vscode 安裝 ESLint 插件以後，鼠標懸停於錯誤語句，就會看到錯誤緣由，點擊連接能夠直達該設定的詳情頁面，頁面內包括：

• 對該風格的描述
• 錯誤與正確的使用事例
• 配置可選項

經過這些信息能夠快速調整 rules 中的配置。

順帶一提，實例中多用數組舉例，其實簡單的開關配置用數字便可：

"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn't affect exit code)
"error" or 2 - turn the rule on as an error (exit code is 1 when triggered)

另外一個問題是 ESLint 格式化很麻煩，怎麼辦？

早就有人提出爲何右鍵格式化裏面不能選 ESLint 這個issue，裏面有不少可選方案，我比較喜歡下面這種：

修改 keybindings.json 文件，綁定一個快捷鍵到 eslint.executeAutofix 便可，再也看不到那些惱人的 error 啦！

Prettier

由於估計大部分人都不會編程式地使用 Prettier，因此下面講的都是 vscode 的 Prettier 插件。

Prettier 專一於代碼排版，但不會關心你的代碼質量。

說到這裏，既然 ESLint 已經包含了排版相關的校驗，爲何還須要 Prettier 呢？

我想到這麼三個緣由：一是 ESLint 安裝和配置比較麻煩，並且 lint 的速度並不快；二是使用 Prettier 並不僅針對 JavaScript，也就是安裝 Prettier 插件，就能夠格式化各類流行語言；三是配置沒那麼眼花繚亂。

畢竟是隻管代碼格式，Prettier 的選項原本就比 ESLint 少多了，並且即便只在樣式上，prettier 也不傾向於亂加選項，這一點還專門在選項的哲學裏說明了 Prettier 選項精簡的緣由。

說回配置方式，Prettier 與 ESLint 一樣可用 js、json、yaml 格式，下面舉例依然使用慣用的 .prettierrc.json。

https://prettier.io/docs/en/o...

最經常使用的配置也就這四項：tab 寬度、尾逗號、是否使用分號和是否使用單引號：

{
  "tabWidth": 2,
  "trailingComma": "es5", // comma-dangle
  "semi": false, // semi
  "singleQuote": true // quotes
}

除了縮進沒有管以外，另外三個選項對應的 ESLint 選項已經寫在註釋裏。Prettier 格式化的結果和 ESLint 衝突是常有的問題，官網 Integrating with Linters 部分也有提供了讓 Prettier 繼承 ESLint 配置的方法，須要另外安裝依賴。不過我看實在沒必要，按個人實際風格習慣本身配一下也就幾分鐘的事情。

關於這兩個工具就先寫到這了，但願你們能正確區分這兩個工具啦～

時代的眼淚

—— 下面一些不知道有沒有用的信息，能夠選擇不看 ——

下面兩個片斷都是 vscode 的 settings.json 文件

{
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false,
      "trailingComma": "es5",
      "singleQuote": true
    }
  }
}

好久之前依稀記得 vetur 須要像上面的配置同樣嵌套在 vetur 裏，如今查了資料才發現配置了 .prettierrc.json 的話一切以配置文件爲準，直接無視這裏的配置。還記得當年用 vetur 不知道要在裏面套 prettier 屬性，還折騰了一些時間呢。

{
  "prettier.semi": true,
  "prettier.trailingComma": "es5",
  "prettier.singleQuote": true
}

又像上面的配置同樣配置整個 vscode 的風格，實測如今是不能用的，即便沒有 .prettierrc.json 這樣配置也不生效，官網如今也沒有提到這種配置方法。

上面兩個配置不是本文主要內容，只是忽然想起來好像有這回事，而如今，可能已經成爲了時代眼淚吧。