在使用 Cocos Creator 開發項目的過程中，為了提高開發效率我們開發了很多擴展插件，本文介紹常用的幾款，拋磚引玉，希望給大家帶來幫助。

騰訊開心鼠英語

網頁擴展：運行時查看場景節點樹

Cocos Creator 本地項目通常會在 Chrome 上調試運行，借助 Chrome 強大的開發者工具，我們可以對網頁的性能、網絡、腳本邏輯等進行調試優化。然而對于游戲來說，場景中的節點組件信息并沒有辦法直觀的獲取和修改，無法快速定位問題。為了解決這個痛點，我們可以修改 Cocos Creator 預覽時的網頁模版，讓其顯示更多的場景信息。

下面是修改過后的預覽游戲界面

擴展了如下功能：

• 場景節點樹實時顯示，節點、組件屬性實時顯示更改
• 可視化緩存資源
• 標記場景中節點位置
• 輸出節點、組件引用到控制臺

源碼：

https://github.com/potato47/ccc-devtools

此頁面使用了 vue + vuetify 開發，對于單頁面應用來說 vue 是非常好的選擇，大家也可以基于這種方式來定制自己項目的預覽界面。

VS Code 擴展：JavaScript 代碼支持函數跳轉

Cocos Creator 支持 JavaScript 和 TypeScript 兩種語言，如果你是用 VS Code 來開發 Cocos Creator 的 js 項目，那你的編程體驗應該不是很好，因為 Cocos Creator 的組件腳本是一套自定義的結構，

const?mylog?=?require('mylog');

cc.Class({
??properties:?{
????node1:?cc.Node,
????node2:?cc.Node,
????label1:?cc.Label,
????label2:?cc.Label,
??},

??start:?function()?{
????this.method1();
??},

??method1:?function()?{
????console.log('method1');
??},

??method2:?function()?{
????console.log('method2');
??},
});

在這個結構下，VS Code 不能識別 this，當你在 start 方法里輸入 this. 的時候無法準確的獲得可以訪問的屬性和方法，也無法通過點擊方法名或者模塊名來跳轉到定義位置。

好在 VS Code 有豐富的擴展 API，通過學習文檔^[1]，我們開發出了一款讓 js 代碼支持函數跳轉，屬性提示的插件。大家可以在 VS Code 插件商店里搜索 “Cocos Creator JS“ 來下載使用。

下面是預覽效果:

• js代碼支持函數跳轉

• js代碼提示

• 模塊跳轉

源碼：

https://github.com/potato47/vscode-cocos-creator-js

編輯器擴展：微信小游戲子包依賴檢查

得益于 Cocos Creator 優秀的跨平臺能力，我們的項目上線了 Android、iOS、Web 和微信小游戲平臺。由于微信平臺對代碼包大小有限制，在上線微信小游戲時我們使用了代碼分包功能，但是項目開發過程中有些模塊互相耦合，導致分包后主包與子包或者子包之間有依賴，在被依賴包加載前就對其進行導入會導致程序出錯。為了解決這個問題我們開發了一款 Creator 插件，可以對子包依賴自動檢測。效果如下:

點擊檢查依賴按鈕后，插件會自動檢查所有子包間的依賴，并可視化的顯示出來，點擊文件名定位到腳本位置，根據修改建議修改即可。

源碼：

https://github.com/potato47/wx-subpackage-helper

編輯器擴展：快速打開場景

在使用 Cocos Creator 編輯器過程中個人體驗最不好的就是資源管理器里的搜索功能了，在 1.x 版本搜索資源時每輸入一個字母都會調用一次全局過濾資源的函數，輸入過程中就會感覺到持續的卡頓，在 2.x 版本稍微優化了一下體驗，改為敲回車再執行過濾函數，但在資源繁多的項目里搜索依然會卡頓。為了解決這個不大但影響心情的問題，我們開發了一款搜索插件，可以快速搜索打開場景或者預制體資源。無需等待，無需鼠標。

源碼：

https://github.com/potato47/cocos-creator-quick-open-x

控制臺擴展：控制臺查看節點樹，節點屬性

通過 Chrome 的開發者工具我們可以直接對原生平臺中 Cocos Creator 的 JavaScript 代碼進行遠程調試，但一些 UI 相關問題依然不好定位，如果能在控制臺里查看節點樹就會方便很多。

首先介紹一下 console.group 和 console.groupEnd 這兩個函數，它們可以組成一個可以折疊的標簽，用于將輸出信息分組，console.group 默認展開，相應的還有一個 console.groupCollapsed 默認折疊，顯然我們可以用它們輸出樹形結構。

function?tree(node?=?cc.director.getScene())?{
????let?style?=?`color:?${node.parent?===?null?||?node.activeInHierarchy???'green'?:?'grey'};`;
????if?(node.childrenCount?>?0)?{
????????console.groupCollapsed(`%c${node.name}`,?style);
????????node.children.forEach(child?=>?tree(child));
????????console.groupEnd();
????}?else?{
????????console.log(`%c${node.name}`,?style);
????}
}

將上述代碼粘貼到控制臺，然后輸入 tree(), 就可以查看當前場景的節點樹結構了。

上面的功能還很簡陋，經過擴展我們可以獲得更多的功能

每個節點后邊會附帶常見的幾個屬性和唯一id，通過 cc.cat(id) 即可獲得這個節點的引用，提高調試效率。

源碼：

https://github.com/potato47/ccc-devtools/blob/master/libs/js/cc-console-utils.js

適用于 Cocos 的 JSC 加解密工具

Cocos Creator 在構建的時候支持對腳本進行加密和壓縮。

然而，官方并沒有提供一個解壓和解密的工具。這給 jsc 的二次修改和重用帶來了不便。

本工具彌補了這個不足：提供了與 Cocos Creator 相同的加密、解密、壓縮、解壓的方法。可以很方便地對構建得到的 jsc 進行解密、解壓得到 js ，也可以將 js 壓縮、加密回 jsc 。

源碼：

https://github.com/OEDx/cocos-jsc-endecryptor

參考

• Cocos Creator 擴展編輯器文檔^[2]
• Cocos Creator 自定義網頁預覽文檔^[3]
• VS Code 插件開發文檔^[4]

參考資料

[1]

文檔: https://code.visualstudio.com/api/language-extensions/programmatic-language-features

[2]

Cocos Creator 擴展編輯器文檔: https://docs.cocos.com/creator/manual/zh/extension/

[3]

Cocos Creator 自定義網頁預覽文檔: https://docs.cocos.com/creator/manual/zh/advanced-topics/custom-preview-template.html

[4]

VS Code 插件開發文檔: https://code.visualstudio.com/api/get-started/your-first-extension

總結

以上是生活随笔為你收集整理的vscode函数跳转插件_人生苦短，我们为 Cocos Creator 开发的插件和工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。