在 WebStorm 中配置保存時自動使用 Prettier 格式化代碼，能有效統一代碼風格。以下彙總了關鍵的配置方法和注意事項。
| 配置步驟 | 關鍵操作 | 説明/參考 |
|---|---|---|
| ① 安裝 Prettier | 在項目根目錄執行 npm install prettier --save-dev |
確保在項目中本地安裝 Prettier。 |
| ② 啓用與關聯 | Settings > Languages & Frameworks > JavaScript > Prettier | 勾選 "Enable"，並設置 "Prettier package" 為項目中的 node_modules/prettier 路徑。 |
| ③ 觸發方式 | 方式1 (推薦): 同②位置，勾選 "On 'Reformat Code' action" 和 "On Save"。<br>方式2: Settings > Tools > File Watchers，添加 Prettier 並啓用。 | "On Save" 最直接。File Watchers 也可實現保存時自動格式化。 |
| ④ 設為默認 | 同②位置，勾選 "On 'Reformat Code' action"。 | 這樣使用 WebStorm 默認格式化快捷鍵 (Ctrl+Alt+L) 時會調用 Prettier。 |
💡 配置注意事項
-
規則衝突：如果項目中同時配置了 ESLint，其規則可能與 Prettier 衝突。建議在 ESLint 配置中擴展
"prettier"，並使用"prettier/prettier": "error"規則，讓 ESLint 報告 Prettier 格式問題。這能避免自動修復時的循環衝突。 -
團隊配置：為了團隊代碼風格一致，項目根目錄下應有
.prettierrc配置文件，定義具體規則（如單引號、縮進等）。WebStorm 會優先採用這些規則。 -
共享設置：若想團隊共享 WebStorm 的 Prettier 配置（如開啓"On Save"），可以嘗試將
.idea目錄下的prettier.xml文件納入版本控制。但注意，其他 IDE 設置也可能在此目錄，需謹慎處理。
完成配置後，可以創建一個代碼格式稍顯凌亂的文件，保存一下看看 Prettier 是否會自動將其格式化。如果遇到問題，可以檢查 Prettier 在項目中是否能獨立正常運行，以及 WebStorm 中的 Prettier 包路徑是否正確。
希望這些步驟能幫助你順利配置好自動格式化。
