長按關注
獲取更多筆記和源碼
公衆號:CocosCreator筆記
導讀
Creator 對 VS Code 擴展
更新 VS Code 智能提示數據
添加 Chrome Debug 配置
安裝插件
中文語言包
Debugger for Chrome
Cocos Effect
Bookmarks
配色主題
代碼格式化
過濾文件
斷點調試
官方文檔：配置代碼編輯環境https://docs.cocos.com/creator/manual/zh/getting-started/coding-setup.html
1Creator對VS Code擴展
1.開發者 -> VS Code 工作流 -> 更新 VS Code 智能提示數據
該操作會將根據引擎 API 生成的 creator.d.ts 數據文件複製到項目根目錄下
d.ts：TypeScript Declaration File，存放一些聲明，類似於C/C++的.h頭文件，用於編輯器的智能提示
目前 creator.d.ts 並不是100%的完善，所以經常會遇見 VS Code 提示錯誤，這時可以根據需要自行修改 creator.d.ts 文件，也可以在ts文件中添加標記：
標記後面一行不做類型檢測
//@ts-ignore
標記此文件不做類型檢測（需放在文件頂部）
//@ts-nocheck
2.開發者 -> VS Code 工作流 -> 添加 Chrome Debug 配置
該操作會在你的項目文件夾下添加一個 .vscode/launch.json 文件作爲調試器的配置
2安裝插件
Chinese (Simplified) Language Pack for Visual Studio Code
此中文（簡體）語言包爲 VS Code 提供本地化界面
Debugger for Chrome
通過 VS Code 調試在 Google Chrome 中運行的 TypeScript 代碼
支持設置斷點（包括在啓用源映射時在源文件中的斷點），步進（包括Chrome頁面上的按鈕）等功能
Cocos Effect
在 VS Code 中爲 Cocos Effect 文件提供語法高亮
Cocos Effect 是一種基於 YAML 和 GLSL 的單源碼嵌入式領域特定語言
Bookmarks
它可以幫助您導航代碼，輕鬆快速地在重要位置之間移動
側邊欄可以更方便的管理書籤
3配色主題
F1>theme
4代碼格式化
F1>Format
5
文件效果
ts：
effect：
6過濾文件
爲 VS Code 設置搜索和文件列表中排除的目錄及文件類型
由於 build, temp, library 都是編輯器運行時自動生成的路徑，而且會包含我們寫入的腳本內容，所以應該在搜索中排除
而 assets 目錄下的每個文件都會生成一個 .meta 文件，一般來說我們不需要關心他的內容，只要讓編輯器幫我們管理這些文件就可以了
1.左側活動欄 -> 管理 - > 設置
2.配置在搜索中排除的文件
搜索 search.exclude ，添加模式：
**/*.anim
build/
library/
temp/
3.配置在文件列表中排除的文件
搜索 files.exclude ，添加模式：
**/*.meta
library/
local/
temp/
7
斷點調試
F5
或者
左側活動欄 -> 運行 - > 開始調試
如果出現下面的錯誤
需要打開launch.json，配置 runtimeExecutable 字段，其值爲Chrome瀏覽器的路徑
{"version": "1.4.0","configurations": [{"name": "Creator Debug: Launch Chrome","type": "chrome","request": "launch","url": "http://localhost:7456","sourceMaps": true,"userDataDir": "${workspaceFolder}/.vscode/chrome","diagnosticLogging": false,"pathMapping": {"/preview-scripts/assets": "${workspaceFolder}/temp/quick-scripts/dst/assets","/": "${workspaceFolder}"},"runtimeExecutable":"D:/Program Files (x86)/Google/Chrome/Application/chrome.exe"}]}
保存後再次運行，就可以斷點調試了
長按關注
獲取更多筆記和源碼
公衆號:CocosCreator筆記