大家好，我是前端西瓜哥。今天帶大家來(lái)學(xué)習(xí) Prettier。

為什么要用 Prettier？

Prettier 是一款流行的代碼格式化工具。它支持的語(yǔ)言相當(dāng)多。

它很純粹，就一個(gè)代碼格式化工具，并不會(huì)做代碼質(zhì)量的檢查（比如聲明了一個(gè)未被使用的變量）。

Prettier 會(huì)強(qiáng)制使用統(tǒng)一的代碼風(fēng)格，原理就是解析語(yǔ)言生成 AST 抽象語(yǔ)法樹(shù)，然后用自己的一套風(fēng)格寫回到文件。

Prettier 的優(yōu)點(diǎn)：

1. 開(kāi)箱即用。它本身就自帶了一套代碼風(fēng)格，風(fēng)格還很好看。我們不需要特意找一個(gè)基礎(chǔ)風(fēng)格包，然后再加上一長(zhǎng)串的自定義規(guī)則；
2. 支持多種語(yǔ)言。除了 JS，還支持 TS、CSS、JSON、Less 等各種語(yǔ)言。不用一個(gè)個(gè)找每個(gè)語(yǔ)言對(duì)應(yīng)的格式化工具。

但 Prettier 堅(jiān)持自己的品味，它更希望用戶使用它精心挑選出來(lái)的代碼風(fēng)格，只提供較少的自定義配置規(guī)則。

比如有個(gè) printWidth 的配置（默認(rèn)值為 80），當(dāng)一行代碼超過(guò)特定字符數(shù)時(shí)會(huì)對(duì)其做拆分換行。這個(gè)配置無(wú)法關(guān)閉，你必須得設(shè)置一個(gè)值。

上手 Prettier

下面我們就來(lái)上手 Prettier。

先是安裝：

yarn add --dev --exact prettier
# 或者是
npm install --save-dev --save-exact prettier

這里我們用了 exact 配置項(xiàng)來(lái)鎖定版本號(hào)，這是因?yàn)椴煌姹?prettier 的代碼風(fēng)格可能有細(xì)微的不同。prettier 并不保證主版本相同的版本下風(fēng)格是一致的。

使用命令對(duì)項(xiàng)目下所有文件進(jìn)行格式：

npx prettier --write .

你也可以指定目錄，比如 /src；或是用通配符指定特定的文件，比如 app 目錄下的所有 .test.js 結(jié)尾的文件可以用 app/**/*.test.js。

另外，你可以創(chuàng)建 .prettierignore 文件來(lái)指定不需要格式化的文件。如：

# Ignore artifacts:
build
coverage
# Ignore all HTML files:
*.html

保存時(shí)自動(dòng)格式化

如果你想要在保存時(shí)格式化，一般都是要用到編輯器的插件。對(duì)于 VSCode 來(lái)說(shuō)，你需要安裝一個(gè)名為 Prettier 的插件，然后再加上 VSCode 配置（項(xiàng)目下加一個(gè) .vscode/setting.json 文件）：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 默認(rèn)格式器改為 prettier
  "editor.formatOnSave": true // 開(kāi)啟 “保存自動(dòng)格式化”
}

或者你不開(kāi)啟保存自動(dòng)格式化，可以在覺(jué)得需要的時(shí)候右鍵選擇 “Format Document“，或者用快捷鍵。

Prettier 和 ESLint 比較

ESLint 是一種 Linter，能夠分析代碼并準(zhǔn)確定位錯(cuò)誤。它支持 代碼質(zhì)量 以及 代碼風(fēng)格 

代碼質(zhì)量，比如啟用 "no-unused-vars"，變量如果聲明卻未被使用會(huì)被認(rèn)為不正確。

代碼風(fēng)格的能力類似 Prettier，比如 "semi": "error"? 表示必須用分號(hào)結(jié)尾，對(duì)應(yīng) Prettier 的 "semi": true。

Prettier 不會(huì)標(biāo)識(shí)哪些地方出問(wèn)題，在編輯器中用波浪線標(biāo)出來(lái)。我用 ESLint 寫新的功能時(shí)，因?yàn)榇a是半成品，總能看到一堆的錯(cuò)誤提示，體驗(yàn)確實(shí)不好。

總的來(lái)說(shuō)，Prettier 只做代碼格式化；ESLint 既能做代碼質(zhì)量檢查，也能做代碼風(fēng)格檢查和修正。

一般來(lái)說(shuō)，項(xiàng)目最好加上 ESLint，這對(duì)我們改善代碼質(zhì)量很有幫助。對(duì)于代碼格式化，我們可以用 ESLint 或是 Prettier。

如果想用 Prettier 格式化 JS，你需要在 ESLint 配置文件中使用 eslint-config-prettier，將 eslint 中和 prettier 沖突的規(guī)則關(guān)閉。否則你會(huì)看到代碼被格式化了兩次，總是會(huì)不符合其中一方的規(guī)則。

另外，ESLint 不支持格式化 CSS，還是有必要裝上 Prettier 或 stylelint 的。

TypeScript 團(tuán)隊(duì)在實(shí)現(xiàn) typescript-eslint 時(shí)，認(rèn)為 ESLint 不應(yīng)該做代碼格式化，而應(yīng)該是一個(gè)真正的只檢查錯(cuò)誤的 Linter（可能他們被格式化的實(shí)現(xiàn)弄煩了），而像是 Prettier 這類的 Formatter 才應(yīng)該做代碼格式化工作。具體可以看下面這篇文章：

https://typescript-eslint.io/docs/linting/troubleshooting/formatting/。

結(jié)尾

Prettier 是一款代碼格式化工具，開(kāi)箱即用，默認(rèn)支持語(yǔ)言眾多，風(fēng)格優(yōu)美，可以讓我們輕裝上陣。如果你自己做一些小項(xiàng)目，用方便的 Prettier 是不錯(cuò)的選擇。