一、設(shè)置文件顯示和搜索過濾步驟

為了提高搜索效率以及文件列表中隱藏不需要顯示的文件， VS Code 需要設(shè)置排除目錄用于過濾。

比如 cocoscreator 中，編輯器運(yùn)行時會自動生成一些目錄：build、temp、library， 所以應(yīng)該在搜索中排除。

而 assets 目錄下的每個文件都會生成一個 .meta 文件，我們不需要關(guān)心它的內(nèi)容，也可以隱藏。

1、打開用戶配置文件： USER SETTINGS

具體操作：在VS Code 設(shè)置按鈕，彈出菜單中選擇 setting ，打開配置文件。

如圖：

2、搜索框中輸入 exclude 搜索

（1）、找到 Files: Exclude 模塊

（2）、點擊 “add pattern” 按鈕 補(bǔ)充以下內(nèi)容：

**/*.meta
library/
local/
temp/
    

添加后如圖：

（3）、找到 Search: Exclude 模塊

（4）、點擊 “add pattern” 按鈕 補(bǔ)充以下內(nèi)容：

**/node_modules
**/bower_components
build/
temp/
library/
**/*.anim

添加后如圖：

二、VS Code 擴(kuò)展的使用

為了便于輔助開發(fā)，我們可以給 VS Code 配置工作流，添加編譯任務(wù) 和 添加Chrome Debug 。

• 添加編譯任務(wù)：用于在 VS Code 中觸發(fā) Creator 的腳本編譯。
• 添加Chrome Debug ：用于調(diào)試網(wǎng)頁版游戲。

1、 添加編譯任務(wù)，VS Code 中觸發(fā) Creator 腳本編譯

我們希望在 VS Code 中修改腳本代碼后，不需要返回 Cocos Creator 就能觸發(fā)腳本編譯， 這時就需要添加編譯任務(wù)。

添加編譯任務(wù)是通過一個預(yù)覽服務(wù)器的 API 向特定地址發(fā)送請求來激活 Creator 的編譯。

（1）、確保系統(tǒng)中安裝 CURL

檢測Windows系統(tǒng)中是否安裝了 curl，命令行，執(zhí)行命令：

curl -help

如果已安裝，則提示如下：

如果提示找不到命令，則需要先安裝 curl 到操作系統(tǒng)。

curl 安裝步驟如下：

第一步、瀏覽器中打開curl 下載地址：

http://www.confusedbycode.com/curl/

第二步、完成人機(jī)身份驗證（若無法正常顯示控件，請科學(xué)上網(wǎng)）

第三步、直接點擊 curl-7.46.0-win64.exe 下載

第四步、安裝時請使用默認(rèn)設(shè)置。

由于我的環(huán)境已經(jīng)安裝了curl ，這里就不再演示。

安裝完成后，可以使用上面的命令行檢測方法， 檢測curl 是否安裝成功。

（2）、添加 VS Code 編譯任務(wù)

在VS Code 中激活腳本編譯，需要執(zhí)行以下步驟：

第一步，在 Creator 頂部菜單欄點擊 開發(fā)者 -> VS Code 工作流-> 添加編譯任務(wù)。

執(zhí)行完以上操作后，會在項目目錄的 .vscode 文件夾下添加 tasks.json 任務(wù)配置文件。

如圖：

第二步， 在 VS Code 里按下快捷鍵 Ctrl + P 打開輸入框，然后輸入 task cocoscreator compile，再選擇 CocosCreator compile。

任務(wù)運(yùn)行完成，會在 VS Code 窗口下方的輸出面板中顯示結(jié)果：

這樣以后在 VS Code 編輯腳本完成后，執(zhí)行第二步即可觸發(fā) Creator 的腳本編譯，不需要返回 Creator。

第三步，為編譯任務(wù)配置快捷鍵

在左下角設(shè)置按鈕->keybord shortcuts->搜索task：

以后在 VS Code 中按下快捷鍵 Ctrl + Shift + B 便會自動顯示 CocosCreator compile，執(zhí)行即可，不需要再手動搜索。

（2）、添加Chrome Debug 用于調(diào)試網(wǎng)頁版游戲

我們可以直接在VS Code 源碼工程中調(diào)試網(wǎng)頁版游戲程序。

安裝步驟如下：

第一步，需要安裝Chrome（谷歌瀏覽器）

第二步，安裝VS Code 插件 JavaScript Debugger：

首先，點擊 VS Code 左側(cè)導(dǎo)航欄的 擴(kuò)展 按鈕打開擴(kuò)展面板：

然后，在搜索框中輸入 JavaScript Debugger

點擊install安裝，安裝完成后如下：

第三步， 在 Cocos Creator 頂部菜單欄中點擊 開發(fā)者 -> VS Code 工作流 -> 添加 Chrome Debug 配置

執(zhí)行完以上操作，會在項目文件夾下添加一個 .vscode/launch.json 文件作為調(diào)試器的配置：

文件內(nèi)容如下：

調(diào)試依賴 Cocos Creator 編輯器內(nèi)置的 Web 服務(wù)器，所以需要在編輯器啟動狀態(tài)下才能進(jìn)行調(diào)試。

如果編輯器預(yù)覽游戲時使用的端口不是默認(rèn)端口，則需要手動修改 launch.json 里的 url 字段，將正確的端口添加上去。

第四步，在 VS Code 中點擊左側(cè)欄的 調(diào)試 按鈕打開調(diào)試面板

在最上方的調(diào)試配置中選擇 Cocos Creator Launch Chrome against localhost，然后點擊左側(cè)綠色的開始按鈕進(jìn)行調(diào)試。

調(diào)試過程中，可以在源碼文件上直接下斷點，進(jìn)行監(jiān)控。

此時會打開一個Chrome 瀏覽器窗口，并在控制臺的debug console 中輸出日志：

至此， VS Code 編輯器的配置到此結(jié)束。文章來源地址http://www.zghlxwxcb.cn/news/detail-687199.html

到了這里，關(guān)于CocosCreator3.8研究筆記（二）windows環(huán)境 VS Code 編輯器的配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！