CocosCreator2.0的API在VScode中自动提示和编辑

如果希望在代码编写过程中自动提示 Cocos Creator 引擎 API,需要通过菜单生成 API 智能提示数据并自动放进项目路径下。

选择主菜单的 开发者 -> VS Code 工作流 -> 更新 VS Code 智能提示数据。该操作会将根据引擎 API 生成的 creator.d.ts 数据文件复制到项目根目录下(注意是在 assets 目录外面),操作成功时会在 控制台显示绿色提示:API data generated and copied to ...。

对于每个不同的项目都需要运行一次这个命令,如果 Cocos Creator 版本更新了,也需要打开您的项目重新运行一次这个命令,来同步最新引擎的 API 数据。

使用 VS Code 打开和编辑项目
现在可以运行我们之前下载安装好的 VS Code 了,启动后选择主菜单的 File -> Open...,在弹出的对话框中选择您的项目根目录,也就是 assets, project.json 所在的路径。

现在新建一个脚本,或者打开原有的脚本编辑时,就可以享受智能语法提示的功能了。
CocosCreator2.0的API在VScode中自动提示和编辑_第1张图片

注意 creator.d.ts 文件必须放在 VS Code 打开的项目路径下,才能使用智能提示功能。

使用 VS Code 激活脚本编译

使用外部文本编辑器修改项目脚本后,要重新激活 Cocos Creator 窗口才能触发脚本编译,在新版本的 Creator 中增加了一个预览服务器的 API,可以通过向特定地址发送请求来激活编辑器的编译。

安装 cURL
首先需要确保你的操作系统中可以运行 cURL 命令,如果在 Windows 操作系统的命令行中运行 curl 提示找不到命令,则需要先安装 curl 到你的系统:

  • 前往 http://www.confusedbycode.com/curl/
  • 点击下图箭头所示的控件,完成人机身份验证(若无法正常显示控件,请科学上网(找个梯子))

CocosCreator2.0的API在VScode中自动提示和编辑_第2张图片

  • 点击 curl-7.46.0-win64.exe 开始下载并安装

安装时请使用默认设置,安装完成后可以打开一个命令行窗口,输入 curl,如果提示 curl: try 'curl --help' or 'curl --manual' for more information 就表示安装成功了。

添加 VS Code 编译任务
要在 VS Code 中激活脚本编译,需要执行以下的工作流程:

  1. 在 Creator 编辑器主菜单里执行 开发者 -> VS Code 工作流 -> 添加编译任务。该操作会在项目的 .vscode 文件夹下添加 tasks.json 任务配置文件。
  2. 在 VS Code 里按下 Cmd/Ctrl+p,激活 快速打开 输入框,然后输入 task compile
    CocosCreator2.0的API在VScode中自动提示和编辑_第3张图片
  3. 任务运行成功的话,会在 VS Code 窗口下方的输出面板中显示如下结果

CocosCreator2.0的API在VScode中自动提示和编辑_第4张图片

Cocos Creator VSCode 窗口输出面板显示乱码

CocosCreator2.0的API在VScode中自动提示和编辑_第5张图片

对应项目工程目录下:E:\CocosCreator_workspace\HelloWorld\.vscode\task.json文件打开

CocosCreator2.0的API在VScode中自动提示和编辑_第6张图片

改成以上路径配置即可。

VS Code 还可以为任务配置快捷键,请打开主菜单的 Code -> 首选项 -> 键盘快捷方式,并在右侧的 keybindings.json 里添加以下条目:


[
    {
        "key": "ctrl+p", //请配置自己习惯的快捷键
        "command": "workbench.action.tasks.runTask",
        "args": "compile"
    }
]

接下来就可以在 VS Code 里一键完成项目脚本编译了!更多关于 VS Code 中配置和执行任务的信息,请参阅 Integrate with External Tools via Tasks 文档。

你可能感兴趣的:(cocos,creator游戏开发)