Visual Studio Code 中安裝和配置 Prettier – Code formatter 插件

Prettier – Code formatter 是一個非常流行的 Visual Studio Code 擴展插件，用於自動格式化代碼，確保代碼風格的一致性。它可以自動調整代碼的縮進、換行、引號等，使代碼更加整潔和易讀。

步驟 1：安裝 Prettier – Code formatter 插件

1. 打開 Visual Studio Code：
   • 啟動您的 Visual Studio Code 編輯器。
2. 訪問擴展插件市場：
   • 點擊左側工具欄上的 Extensions 圖標，或按下快捷鍵 Ctrl+Shift+X，這將打開擴展插件市場。
3. 搜索 Prettier – Code formatter 插件：
   • 在 Extensions 面板的搜索框中輸入 “Prettier – Code formatter”。
4. 安裝 Prettier – Code formatter 插件：
   • 在搜索結果中找到由 Prettier 發布的 Prettier – Code formatter 插件，然後點擊 Install 按鈕進行安裝。
5. 等待安裝完成：
   • 安裝過程會自動進行。安裝完成後，插件狀態會顯示為 Installed，這表明您已成功安裝 Prettier 插件。

步驟 2：配置 Prettier – Code formatter 插件

安裝完成後，您可以進行一些配置來確保 Prettier 能夠自動格式化您的代碼，並與 PHP Intelephense 插件配合使用。

1. 啟用 Format on Save 功能：
   
   • 點擊左下角的 齒輪圖示（設定），並選擇 Settings，或者使用快捷鍵 Ctrl+, 打開設定界面。
   • 在設定搜索框中輸入 “format on save”，然後勾選 Editor: Format on Save 選項，確保這個功能是開啟的。這樣，每次保存文件時，Prettier 都會自動格式化代碼。
2. 與 PHP Intelephense 配合使用：
   
   • 為了讓 Prettier 更好地與 PHP Intelephense 配合工作，您需要進一步配置：
   • 在設定搜索框中輸入 “intelephense.stubs”。
   • 點擊 Add Item，將 wordpress 添加到清單中。這樣，PHP Intelephense 將會識別和補全 WordPress 相關的代碼結構，並與 Prettier 共同作用，保持代碼的一致性和整潔性。
3. 其他配置選項（可選）：
   • 您可以根據個人偏好調整 Prettier 的格式化規則，例如使用單引號還是雙引號、最大換行長度、是否加上分號等。這些選項可以在 Settings 中搜索 “Prettier” 來進行配置。

步驟 3：使用 Prettier 自動格式化代碼

1. 手動格式化代碼：
   • 除了自動格式化，您也可以隨時通過右鍵菜單選擇 Format Document 或使用快捷鍵 Shift+Alt+F 來手動格式化當前文件。
2. 檢查代碼風格：
   • 在每次保存文件時，Prettier 都會自動格式化代碼。這能幫助您保持代碼的一致性，讓整個項目的代碼風格統一。
3. 與團隊協作：
   • 當與團隊合作時，您可以在項目的根目錄下創建一個 .prettierrc 配置文件，將格式化規則保存其中，這樣所有團隊成員都可以使用相同的代碼風格。