不要像這個(gè)人一樣－不要成為一個(gè)笨蛋。

為什麼需要格式化程式碼

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

有多種方法可以為您自己和您的團(tuán)隊(duì)設(shè)定格式範(fàn)本。在本文中，我們將探討較受歡迎的選項(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 來(lái)確保其程式碼庫(kù)中的格式一致。

Prettier 可以透過(guò)多種方式配置和運(yùn)作。在此範(fàn)例中，我將示範(fàn)如何使用 Git 掛鉤設(shè)定 Prettier，以在 VS Code 中自動(dòng)化。更多範(fàn)例和配置，請(qǐng)?jiān)煸L Prettier 的文檔。

---

開(kāi)始之前

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

---

.prettierrc

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

---

.editorconfig

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

---

設(shè)定工作流程

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

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

然後初始化Husky

npx 哈士奇初始化

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

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

---

設(shè)定新文件

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

預(yù)提交

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

.lintstagedrc

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

---

測(cè)試工作流程

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

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

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

---

就是這樣！

您現(xiàn)在有了一種簡(jiǎn)單而有效的方法來(lái)利用 Prettier 和 git hooks 來(lái)自動(dòng)格式化程式碼。

我很想聽(tīng)聽(tīng)你的想法！如果這有幫助或您遇到任何問(wèn)題，請(qǐng)?jiān)谠u(píng)論中告訴我 - 我隨時(shí)為您提供幫助！

---

複製貼上文件範(fàn)例

.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)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！