讓開發效率飆升的 Cocos Creator 使用小技巧，你一定用得上！

一個優秀的開發工作流能大大提高開發效率，加速作業流程。本文將基於

Cocos Creator 3.3.1

分享一些有意思的

開發小技巧

，希望能幫助開發者們最佳化自己的開發工作流，更快更好地用 Cocos Creator 做出自己滿意的產品。

章節目錄

PART 1。編輯器使用

PART 2。程式碼編寫

PART 3。 Visual Studio Code 使用

PART 4。實用外掛

PART 1

編輯器使用

相信大家對 Cocos Creator 編輯器都已經有了一定的瞭解，但你知道編輯器還有這些「隱藏小技巧」嗎

檢視切換

當

場景編輯器

為

3D 檢視

時，與原先的 2D 檢視相比有了不小的變化，但是 3D 檢視下也提供了快捷鍵，可以幫助開發者快速移動和定位場景編輯器的檢視：

滑鼠左鍵 + Alt：

以檢視中心點為中心旋轉。

滑鼠右鍵 + QEWASD：

攝像機漫遊。Shift + 滑鼠右鍵 + QEWASD：攝像機加速漫遊。

克隆節點

你是否還在用 Ctrl + C、Ctrl + V 克隆節點？Creator 提供了更為簡潔的快捷鍵

Ctrl + D

，能更快速方便地克隆節點。

如果需要克隆節點到另一個節點的子節點中，

按下 Ctrl + 拖動節點

即可實現。

快捷鍵管理器

快捷鍵管理器是管理編輯器快捷鍵的的面板。開發者可以透過主選單的

Cocos Creator -> 快捷鍵

開啟該面板。

我們可以將任意鍵位或鍵位組合繫結到 Cocos Creator 編輯器中，例如將開啟

構建面板

的快捷鍵由 Shift+Ctrl+B 變更為 B 鍵，即可透過按下 B 鍵開啟

構建面板

。

如果在該面板上出現了鍵位衝突，快捷鍵管理器則會顯示出帶有衝突序號的紅色圓點。

對齊/平均分佈節點

當

場景編輯器

為

2D 檢視

時，左上角有一排按鈕可以用來在選中多個節點時將這些節點對齊或者平均分佈。具體的規則如下：

假設三個 Label 節點都已經選中，從左到右的 6 個對齊按鈕會依次將這些節點：

頂部對齊，按照最靠近上方的節點約束框邊界對齊

垂直居中對齊，按照整體的水平中線對齊

底部對齊，按照最靠近下方的邊界對齊

左對齊，按照最靠近左邊的邊界對齊

水平居中對齊，按照整體的垂直中線對齊

右對齊，按照最靠近右邊的邊界對齊

後半部分從左到右的 6 個分佈按鈕會依次將這些節點：

頂部分佈，按照節點的上邊界平均分佈

垂直居中分佈，按照節點的水平中線平均分佈

底部分佈，按照節點的下邊界平均分佈

左分佈，按照節點的左邊界平均分佈

水平居中分佈，按照節點的垂直中線平均分佈

右分佈，按照節點的右邊界平均分佈

注意：

不管是一開始測定左右邊界和中線還是之後將每個節點對齊/平均分佈時的參照，都是

節點約束框

的中心或某條邊界，而不是節點的位置座標。

例如下圖中我們將三個寬度不同的 Label 節點向右對齊後，得到的是三個節點約束框的右邊界對齊，而不是三個節點位置的 x 座標變成一致。

節點鎖定

在

層級管理器

中，將滑鼠移到節點上會看到左側有一個鎖定按鈕，點選鎖定後則無法在

場景編輯器

內選中該節點。該功能可以有效避免誤選和誤編輯複雜場景中的節點。

如果需要將該節點的子節點也進行鎖定，可以

按下 Alt 鍵再點選鎖定

，即可將子節點也一起鎖定。

屬性提示

在開發過程中，開發者可能會遇到一些陌生的屬性，不知道它的含義和用法。對此，Cocos Creator 提供了

屬性提示

的智慧特性。在 Creator 面板中，將滑鼠移動到屬性的上方，即會出現該屬性的簡單介紹。

注意：

目前屬性提示還在不斷完善中，如果遇到沒有提示的屬性，可以先查詢官方文件，稍後反饋給官方人員。

參考圖設定

在根據美術提供的效果圖進行 UI 拼接的時候，很多開發者會採用將效果圖直接拉進專案場景中進行對比的方式，但是這樣的方式容易在拼接完成後忘記刪除或者只刪除資源，沒有刪除節點導致報錯。

考慮到這一情況，Cocos Creator 推出了

參考圖面板

，這是一種無侵入的方式，主要用於輔助開發人員在

場景編輯器

中拼接 UI 時作為對照參考。

透過點選

場景編輯器

右上角的按鈕，即可開啟

參考圖

面板。點選面板上的新增按鈕新增 UI 參考圖，並可以在下拉框處切換當前顯示的參考圖。

PART 2

程式碼編寫

在編寫程式碼的過程中，養成好的

編碼習慣

、使用強大的

編寫軟體及外掛

能大大降低返工機率，提高開發效率。

書寫規範

開發者在開發專案的時候，經常是團隊協作共同開發，此時，好的程式碼書寫習慣就顯得尤為重要：

程式碼命名要規範，結構要清晰。關於

程式碼命名規範、語法規範和書寫規範

的更多詳細要求，可以參考文章［推薦編碼規範］。

避免使用生僻的語法、用法、元件等，讓程式碼升級的時候更方便。

在 update 中避免使用節點查詢等，可以考慮用變數在初始化的時候，把常用的節點，元件儲存起來。

每個函式儘可能保持足夠的簡單，功能單一。

複雜的演算法，可以考慮預先計算好，用空間換時間。

書寫工具

使用一個好的程式碼編寫軟體，是一件非常「美妙」的事情，它可以幫助我們做很多事情。在 Cocos Creator 開發工作流中，推薦使用

Visual Studio Code

編寫程式碼，我們將在下一部分為大家詳細介紹 Visual Studio Code 的使用。

PART 3

Visual Studio Code 使用

程式碼高亮與智慧提示

Visual Studio Code 提供了非常好用的程式碼高亮與智慧提示功能。Cocos Creator 3。x 在建立專案時，專案目錄下會自動生成一個 tsconfig。json 檔案，裡面配置了一個程式碼提示用的目錄檔案路徑，用 VS Code 開啟專案編寫程式碼時便會自動提示 Cocos Creator 引擎 API。若專案升級，引擎 API 也會自動更新。

啟動 VS Code 後選擇主選單的

File -> Open Folder...

，在彈出的對話方塊中選擇專案根目錄，也就是 assets、project。json 所在的路徑。然後新建一個指令碼，或者開啟原有的指令碼進行編輯時，就會有語法提示了。

若書寫出現問題，報錯的下方將會出現紅線。

巧用 jsdoc 註釋

好的程式碼註釋習慣能使程式碼更易於閱讀。除了普通的註釋，這裡為大家介紹一下 jsdoc 註釋：

如上圖所示，寫好一個完整的 jsdoc 註釋，可以讓其他開發者快速瞭解函式的作用和方法，在函式呼叫時將會更加清晰。我們只需要將滑鼠懸浮於呼叫處即可顯示出來：

在 Visual Studio Code 上使用 Git

開發者經常使用 Git 來進行專案管理，其實在 Visual Studio Code 上也是可以使用 Git 來進行專案管理的，詳細的方法可以檢視［使用 GitHub］。

點選跳轉 API

開發過程中經常會遇到需要進行 API 資訊查詢、原始碼檢視和了解用法等情況，一般的操作是到官網的 API 查詢介面中查詢，但其實 Cocos Creator 專案中已經內建了 API 的資訊查詢和用法瞭解的說明，都在 cc。d。ts 指令碼中。我們只需要將滑鼠懸浮在 Cocos Creator 的 API 上，按下

Ctrl 鍵

，再點選該 API，即可跳轉到 cc。d。ts 指令碼中檢視說明。

開發者也可以在 cc。d。ts 指令碼中搜索查詢 API 的用法，不需要每一次都到官網中查詢，這可以省下來不少時間。

除錯程式碼

Visual Studio Code 有著優秀的除錯能力，我們可以直接在原始碼工程中除錯網頁版遊戲程式。除錯過程中可以在原始碼檔案上直接下斷點、進行監控，這比使用 Chrome 內建的 DevTools 除錯更加方便友好。具體的除錯方式可以檢視［程式碼除錯］。

設定檔案顯示和搜尋過濾

在 VS Code 的主選單中選擇

檔案（Windows）／Code（Mac）-> 首選項 -> 設定

，或者選擇左下角中的

Setting

選項，這個操作會開啟使用者配置檔案

USER SETTINGS

：

此時在上方的搜尋框中輸入

exclude

搜尋，找到

Files: Exclude

和

Search: Exclude

模組：

然後點選

新增模式

補充以下內容中缺少的部分：

{

“files。exclude”： {

“**/。git”： true，

“**/。DS_Store”： true，

“**/*。meta”： true，

“library/”： true，

“local/”： true，

“temp/”： true

}，

“search。exclude”： {

“**/node_modules”： true，

“**/bower_components”： true，

“build/”： true，

“temp/”： true，

“library/”： true，

“**/*。anim”： true

}

以上欄位將為 VS Code 設定搜尋時排除的目錄，以及在檔案列表中隱藏的檔案型別。由於 build、temp、library 都是編輯器執行時自動生成的路徑，而且會包含我們寫入的指令碼內容，所以應該在搜尋中排除。而 assets 目錄下的每個檔案都會生成一個。meta 檔案，一般來說我們不需要關心它的內容，只要讓編輯器幫我們管理這些檔案就可以了。

實用快捷鍵

簡單粗暴又好用的快捷鍵，能極大幫助我們提高編寫程式碼的效率。Visual Studio Code 日常開發工作中常用的快捷鍵可查詢文件［VSCode 鍵盤快捷鍵中英文］。

實用外掛

Visual Studio Code 擁有豐富且強大的外掛系統，這裡向大家介紹幾款實用的外掛。

Code Spell Checker