不要像這個人一樣－不要成為一個笨蛋。
格式化有助於建立您編寫的程式碼行，使其更易於閱讀和理解。當與多個開發人員一起開發程式碼庫時，這一點至關重要，所有開發人員都有自己的風格和對程式碼結構的偏好。擁有統一格式的程式碼庫有助於防止合併時的麻煩，並創建您和您的團隊可以在此基礎上建立的標準。
有多種方法可以為您自己和您的團隊設定格式範本。在本文中，我們將探討較受歡迎的選項之一：Prettier。
根據 State of JS 2021 調查，83% 的受訪者經常使用 Prettier 作為他們選擇的格式化程序，比上一年的調查增加了 13%。許多著名的團隊（例如 Facebook、Webflow、Jest、Dropbox、Spotify 和 PayPal 的團隊）都使用 Prettier 來確保其程式碼庫中的格式一致。
Prettier 可以透過多種方式配置和運作。在此範例中，我將示範如何使用 Git 掛鉤設定 Prettier，以在 VS Code 中自動化。更多範例和配置，請造訪 Prettier 的文檔。
雖然不是必需的，但了解您將配置的選項及其用途很有幫助。您需要建立兩個檔案並將它們放置在專案的根層級。請記住，這些格式選項是特定於項目的，因此您需要為每個新項目重複此過程。這些檔案將包含您可以選擇的選項，您可以修改或刪除不適合您專案需求的選項。
此文件位於專案的根級別，定義 Prettier 的基本格式規則。它使用 JSON 結構，可以根據您團隊的標準進行自訂。這是一個例子：
即使在 Prettier 運作之前，該檔案也可確保編輯器設定的一致性。它還涵蓋了 .prettierrc 沒有的選項。這是一個例子：
為了方便使用，兩個檔案都可以複製到文末。建立並配置 .prettierrc 和 .editorconfig 檔案後，您就可以繼續。安裝這三個 npm 套件以簡化格式化過程：
npm install --save-dev prettier lint-staged husky
然後初始化Husky
npx 哈士奇初始化
這些步驟可完成以下任務：
另外兩個檔案需要設定：pre-commit 和 .lintstagedrc
該文件由 Husky 自動創建，用於指導自動化過程。它位於初始化期間創建的 Husky 資料夾內。配置如下圖：
在根專案資料夾中建立此檔案（沒有類似 .editorconfig 和 .prettierrc 的副檔名）。它透過 Git hook 縮小了 Prettier 格式檔案的範圍。以下是一個範例，但您可以根據專案的文件類型進行調整：
所有四個檔案就位（.prettierrc、.editorconfig、.lintstagedrc 和預先提交）後，您就可以測試工作流程。
如果一切設定正確，您的終端應該顯示一條成功訊息，並且格式變更將自動套用。
您現在有了一種簡單而有效的方法來利用 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中文網其他相關文章！
