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

為什么需要格式化代碼

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

有多種方法可以為您自己和您的團(tuán)隊(duì)設(shè)置格式模板。在本文中，我們將探討更流行的選項(xiàng)之一：Prettier。

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

Prettier 可以通過多種方式配置和運(yùn)行。在此示例中，我將演示如何使用 Git 掛鉤設(shè)置 Prettier，以在 VS Code 中實(shí)現(xiàn)自動化。更多示例和配置，請?jiān)L問 Prettier 的文檔。

---

開始之前

雖然不是必需的，但了解您將配置的選項(xiàng)及其用途很有幫助。您需要創(chuàng)建兩個文件并將它們放置在項(xiàng)目的根級別。請記住，這些格式選項(xiàng)是特定于項(xiàng)目的，因此您需要為每個新項(xiàng)目重復(fù)此過程。這些文件將包含您可以選擇的選項(xiàng)，您可以修改或刪除不適合您項(xiàng)目需求的選項(xiàng)。

---

.prettierrc

此文件位于項(xiàng)目的根級別，定義 Prettier 的基本格式規(guī)則。它使用 JSON 結(jié)構(gòu)，可以根據(jù)您團(tuán)隊(duì)的標(biāo)準(zhǔn)進(jìn)行定制。這是一個例子：

---

.editorconfig

即使在 Prettier 運(yùn)行之前，該文件也可確保編輯器設(shè)置的一致性。它還涵蓋了 .prettierrc 沒有的選項(xiàng)。這是一個例子：

---

設(shè)置工作流程

為了方便使用，兩個文件都可以復(fù)制到文末。創(chuàng)建并配置 .prettierrc 和 .editorconfig 文件后，您就可以繼續(xù)。安裝這三個 npm 包以簡化格式化過程：

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

然后初始化Husky

npx 哈士奇初始化

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

• 安裝 Prettier 進(jìn)行格式化。
• 安裝 lint-staged 以在提交之前僅格式化暫存文件。
• 安裝 Husky 以設(shè)置 Git 掛鉤以實(shí)現(xiàn)自動化。
• 初始化 Husky，這會創(chuàng)建必要的依賴項(xiàng)和預(yù)提交文件。

---

配置新文件

另外兩個文件需要配置：pre-commit 和 .lintstagedrc

預(yù)提交

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

.lintstagedrc

在根項(xiàng)目文件夾中創(chuàng)建此文件（沒有類似于 .editorconfig 和 .prettierrc 的擴(kuò)展名）。它通過 Git hook 縮小了 Prettier 格式文件的范圍。以下是一個示例，但您可以根據(jù)項(xiàng)目的文件類型進(jìn)行調(diào)整：

---

測試工作流程

所有四個文件就位（.prettierrc、.editorconfig、.lintstagedrc 和預(yù)提交）后，您就可以測試工作流程。

1. 對 .js 文件進(jìn)行簡單的格式更改（例如，添加不必要的空格或縮進(jìn)）。
2. 暫存您的更改： git添加-A
3. 提交測試消息 git commit -m“測試格式化工作流程”

如果一切設(shè)置正確，您的終端應(yīng)該顯示一條成功消息，并且格式更改將自動應(yīng)用。

---

就是這樣！

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

我很想聽聽你的想法！如果這有幫助或者您遇到任何問題，請?jiān)谠u論中告訴我 - 我隨時為您提供幫助！

---

復(fù)制粘貼文件示例

.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 格式化您的代碼的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！