Cocos Creator JS 代碼格式化完整指南：快捷鍵與配置技巧

從 Cocos2d-x C++ 版本轉戰 Cocos Creator 的開發者，常會遇到一個令人頭痛的問題：內建編輯器寫 JavaScript 時，找不到代碼格式化功能，也沒有快捷鍵說明。這篇文章將為你詳細介紹如何在 Cocos Creator 中實現代碼格式化，提升開發效率。

為什麼內建編輯器沒有格式化功能？

Cocos Creator 早期版本的內建代碼編輯器功能相對簡陋，並未內置代碼格式化（Beautify/Format）的快捷鍵或選單選項。這讓習慣了 IDE 強大編輯功能的開發者感到不便。

解決方案：導入代碼格式化配置文件

最直接的解決方法是下載現成的代碼格式化配置文件（如 .jsbeautifyrc 或 prettierrc），並根據你使用的外部編輯器（VS Code、Sublime Text、WebStorm 等）進行導入配置。建議採用 VS Code + Prettier 或 ESLint + Prettier 組合，獲得最佳體驗。

推薦工作流：外部編輯器 + Cocos Creator

1. 在 Cocos Creator 偏好設定中，將「腳本編輯器」指向 VS Code 或其他專業 IDE。
2. 在外部編輯器安裝 Prettier 擴充套件，並啟用「存檔時自動格式化」。
3. 專案根目錄新增 .prettierrc 配置檔，統一團隊代碼風格。

常用快捷鍵參考（以 VS Code 為例）

• 格式化文檔：Shift + Alt + F (Windows/Linux) / Shift + Option + F (macOS)
• 格式化選區：Ctrl + K Ctrl + F (Windows/Linux) / Cmd + K Cmd + F (macOS)
• 快速修復 / ESLint 自動修復：Ctrl + . (Windows/Linux) / Cmd + . (macOS)

總結

雖然 Cocos Creator 內建編輯器缺乏格式化功能，但透過「外部專業編輯器 + 自動化格式化工具」的組合，不僅能解決問題，更能獲得更強大的代碼提示、重構與除錯體驗。建議團隊統一配置，避免代碼風格不一致導致的 Diff 噪音。