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

為什麼需要格式化程式碼

格式化有助於建立您編寫的程式碼行，使其更易於閱讀和理解。當與多個開發(fā)人員一起開發(fā)程式碼庫時，這一點至關(guān)重要，所有開發(fā)人員都有自己的風格和對程式碼結(jié)構(gòu)的偏好。擁有統(tǒng)一格式的程式碼庫有助於防止合併時的麻煩，並創(chuàng)建您和您的團隊可以在此基礎(chǔ)上建立的標準??。

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

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

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

---

開始之前

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

---

.prettierrc

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

---

.editorconfig

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

---

設(shè)定工作流程

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

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

然後初始化Husky

npx 哈士奇初始化

這些步驟可完成以下任務(wù)：

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

---

設(shè)定新文件

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

預提交

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

.lintstagedrc

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

---

測試工作流程

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

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

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

---

就是這樣！

您現(xiàn)在有了一種簡單而有效的方法來利用 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 格式化您的程式碼的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！