使用 Prettier Like a Pro 格式化您的程式碼

不要像這個人一樣－不要成為一個笨蛋。

為什麼需要格式化程式碼

格式化有助於建立您編寫的程式碼行，使其更易於閱讀和理解。當與多個開發人員一起開發程式碼庫時，這一點至關重要，所有開發人員都有自己的風格和對程式碼結構的偏好。擁有統一格式的程式碼庫有助於防止合併時的麻煩，並創建您和您的團隊可以在此基礎上建立的標準​​。

有多種方法可以為您自己和您的團隊設定格式範本。在本文中，我們將探討較受歡迎的選項之一：Prettier。

根據 State of JS 2021 調查，83% 的受訪者經常使用 Prettier 作為他們選擇的格式化程序，比上一年的調查增加了 13%。許多著名的團隊（例如 Facebook、Webflow、Jest、Dropbox、Spotify 和 PayPal 的團隊）都使用 Prettier 來確保其程式碼庫中的格式一致。

Prettier 可以透過多種方式配置和運作。在此範例中，我將示範如何使用 Git 掛鉤設定 Prettier，以在 VS Code 中自動化。更多範例和配置，請造訪 Prettier 的文檔。

---

開始之前

雖然不是必需的，但了解您將配置的選項及其用途很有幫助。您需要建立兩個檔案並將它們放置在專案的根層級。請記住，這些格式選項是特定於項目的，因此您需要為每個新項目重複此過程。這些檔案將包含您可以選擇的選項，您可以修改或刪除不適合您專案需求的選項。

---

.prettierrc

此文件位於專案的根級別，定義 Prettier 的基本格式規則。它使用 JSON 結構，可以根據您團隊的標準進行自訂。這是一個例子：

---

.editorconfig

即使在 Prettier 運作之前，該檔案也可確保編輯器設定的一致性。它還涵蓋了 .prettierrc 沒有的選項。這是一個例子：

---

設定工作流程

為了方便使用，兩個檔案都可以複製到文末。建立並配置 .prettierrc 和 .editorconfig 檔案後，您就可以繼續。安裝這三個 npm 套件以簡化格式化過程：

npm install --save-dev prettier lint-staged husky

然後初始化Husky

npx 哈士奇初始化

這些步驟可完成以下任務：

• 安裝 Prettier 進行格式化。
• 安裝 lint-staged 以在提交之前僅格式化暫存檔案。
• 安裝 Husky 以設定 Git 掛鉤以實現自動化。
• 初始化 Husky，這會建立必要的依賴項和預提交檔案。

---

設定新文件

另外兩個檔案需要設定：pre-commit 和 .lintstagedrc

預提交

該文件由 Husky 自動創建，用於指導自動化過程。它位於初始化期間創建的 Husky 資料夾內。配置如下圖：

.lintstagedrc

在根專案資料夾中建立此檔案（沒有類似 .editorconfig 和 .prettierrc 的副檔名）。它透過 Git hook 縮小了 Prettier 格式檔案的範圍。以下是一個範例，但您可以根據專案的文件類型進行調整：

---

測試工作流程

所有四個檔案就位（.prettierrc、.editorconfig、.lintstagedrc 和預先提交）後，您就可以測試工作流程。

1. 對 .js 檔案進行簡單的格式變更（例如，新增不必要的空格或縮排）。
2. 暫存您的變更： git添加-A
3. 提交測試訊息 git commit -m“測試格式化工作流程”

如果一切設定正確，您的終端應該顯示一條成功訊息，並且格式變更將自動套用。

---

就是這樣！

您現在有了一種簡單而有效的方法來利用 Prettier 和 git hooks 來自動格式化程式碼。

我很想聽聽你的想法！如果這有幫助或您遇到任何問題，請在評論中告訴我 - 我隨時為您提供幫助！

---

複製貼上文件範例

.prettierrc

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

.editorconfig

# Top-most EditorConfig file
root = true

# Global settings
[*]
indent_style = space
indent_size = 2
tab_width = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

# Overrides
[*.md]
trim_trailing_whitespace = false
max_line_length = off

[*.yml]
indent_style = space
indent_size = 2

[*.ts]
indent_style = space
indent_size = 4

[Makefile]
indent_style = tab

[*.html]
indent_size = 2

[*.json]
indent_size = 2

以上是使用 Prettier Like a Pro 格式化您的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！