穩定版

編輯

安裝

首先，在本地安裝 Prettier

npm install --save-dev --save-exact prettier
yarn add --dev --exact prettier
pnpm add --save-dev --save-exact prettier
bun add --dev --exact prettier

接著，建立一個空的設定檔，讓編輯器和其他工具知道您正在使用 Prettier

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

下一步，建立一個 .prettierignore 檔案，讓 Prettier 命令列介面和編輯器知道哪些檔案不要格式化。以下是一個範例

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"

小技巧！如果在執行 Prettier 的目錄中存在 .gitignore 檔案，Prettier 將會遵循其中的規則。您也可以將 .prettierignore 基於 .eslintignore（如果您有的話）。

另一個小技巧！如果您的專案尚未準備好格式化某些檔案，例如 HTML 檔案，請新增 *.html。

現在，使用 Prettier 格式化所有檔案

npx prettier . --write

npx 是什麼？npx 隨附於 npm，可讓您執行本地安裝的工具。為了簡潔起見，在本檔案的其餘部分中，我們將省略 npx 部分！

注意：如果您忘記先安裝 Prettier，npx 將會暫時下載最新版本。在使用 Prettier 時，這不是一個好主意，因為我們在每個版本中都會更改程式碼的格式化方式！在您的 package.json 中鎖定 Prettier 的版本非常重要。而且速度也更快。

yarn prettier . --write

開頭的 yarn 在做什麼？yarn prettier 會執行本地安裝的 Prettier 版本。為了簡潔起見，在本檔案的其餘部分中，我們將省略 yarn 部分！

pnpm exec prettier . --write

開頭的 pnpm 在做什麼？pnpm prettier 會執行本地安裝的 Prettier 版本。為了簡潔起見，在本檔案的其餘部分中，我們將省略 pnpm 部分！

bun prettier . --write

開頭的 bun 在做什麼？bun prettier 會執行本地安裝的 Prettier 版本。為了簡潔起見，在本檔案的其餘部分中，我們將省略 bun 部分！

prettier --write . 非常適合格式化所有檔案，但對於大型專案來說可能需要一些時間。您可以執行 prettier --write app/ 來格式化特定目錄，或執行 prettier --write app/components/Button.js 來格式化特定檔案。或者使用萬用字元，例如 prettier --write "app/**/*.test.js" 來格式化目錄中的所有測試檔案（請參閱 fast-glob 以了解支援的萬用字元語法）。

如果您有 CI 設定，請將以下程式碼作為其中的一部分執行，以確保每個人都執行 Prettier。這可以避免合併衝突和其他協作問題！

npx prettier . --check

--check 與 --write 類似，但僅檢查檔案是否已格式化，而不是覆寫它們。prettier --write 和 prettier --check 是執行 Prettier 最常見的方式。

設定您的編輯器

從命令列進行格式化是一個很好的入門方式，但您可以透過從編輯器中執行 Prettier 來獲得最佳效果，可以透過快速鍵或在每次儲存檔案時自動執行。當您在編碼時，某一行變得太長而無法容納在螢幕上時，只需按下一個按鍵，即可看到它神奇地被換行成多行！或者，當您貼上一些程式碼且縮排全部亂掉時，讓 Prettier 為您修復它，而無需離開編輯器。

請參閱 編輯器整合 以了解如何設定您的編輯器。如果您的編輯器不支援 Prettier，您可以改為 使用檔案監控器執行 Prettier。

注意： 不要跳過常規的本地安裝！編輯器插件將會選擇您本地的 Prettier 版本，確保您在每個專案中都使用正確的版本。（您不希望您的編輯器因為使用比您的專案更新的 Prettier 版本而意外造成大量更改！）

而且能夠從命令列執行 Prettier 仍然是一個很好的備用方案，並且是 CI 設定所必需的。

ESLint（和其他程式碼檢查工具）

如果您使用 ESLint，請安裝 eslint-config-prettier 讓 ESLint 和 Prettier 能夠良好地協同運作。它會關閉所有不必要或可能與 Prettier 衝突的 ESLint 規則。Stylelint 也有類似的設定：stylelint-config-prettier

（請參閱 Prettier 與程式碼檢查工具的比較 以進一步了解格式化與程式碼檢查的差異，與程式碼檢查工具整合 以取得關於設定程式碼檢查工具的更深入資訊，以及 相關專案 以取得更多整合的可能性，如果需要的話。）

Git hooks

除了從命令列執行 Prettier（`prettier --write`）、在 CI 中檢查格式，以及從編輯器中執行 Prettier 之外，許多人還喜歡將 Prettier 作為 pre-commit hook 執行。這可以確保您所有的 commit 都經過格式化，而無需等待 CI 建置完成。

例如，您可以執行以下操作，讓 Prettier 在每次 commit 之前執行

  1. 安裝 husky 和 lint-staged
npm install --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"
yarn add --dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"

如果您使用 Yarn 2，請參閱 https://typicode.github.io/husky/#/?id=yarn-2

pnpm add --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','pnpm exec lint-staged\n')"
bun add --dev husky lint-staged
bunx husky init
bun --eval "fs.writeFileSync('.husky/pre-commit','bunx lint-staged\n')"
  1. 將以下程式碼新增到您的 package.json
{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

注意：如果您使用 ESLint，請確保 lint-staged 在 Prettier 之前執行，而不是之後。

請參閱 Pre-commit Hook 以取得更多資訊。

總結

總而言之，我們學習了

  • 在您的專案中本地安裝特定版本的 Prettier。這確保專案中的每個人都使用完全相同的 Prettier 版本。即使是 Prettier 的修補程式版本也可能導致格式略有不同，因此您不希望團隊成員使用不同的版本並來回格式化彼此的變更。
  • 新增一個 .prettierrc 檔案，讓您的編輯器知道您正在使用 Prettier。
  • 新增一個 .prettierignore 檔案，讓您的編輯器知道哪些檔案*不要*觸碰，並且能夠執行 prettier --write . 來格式化整個專案（而不會損壞您不想要的檔案，或在產生的檔案上出錯）。
  • 在 CI 中執行 prettier --check . 以確保您的專案保持格式化。
  • 從您的編輯器執行 Prettier 以獲得最佳體驗。
  • 使用 eslint-config-prettier 讓 Prettier 和 ESLint 能夠良好地協同工作。
  • 設定 pre-commit hook，以確保每次提交都已格式化。
← 原理說明忽略程式碼 →