长按关注
获取更多笔记和源码
公众号: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笔记