Cocos 篇:基于 Cocos Creator v1.9 配置代码编辑环境

LZ-Says:微笑面对生活,努力活出自己想要的样子~!

![这里写图片描述](https://img-blog.csdn.net/20180705095843738)

前言

Enmmm,如果给你俩次机会,让你可以选择回到过去的俩个时间节点,你最想回去的是什么时候?

嘀嘀嘀,开车

由于编辑器内置的代码编辑器功能并不完善,只适合快速浏览和做少量编辑的需要。对我们来说,我们需要更成熟完善的代码编辑环境,So,下面,开启我们配置编辑环境之路吧~

1. Visual Studio Code

Visual Studio Code(以下简称 VS Code)是微软推出的轻量化跨平台IDE,支持 Windows、Mac、Linux 平台,安装和配置非常简单。通过下面介绍的设置方法,使用 VS Code 管理和编辑项目脚本代码,可以轻松实现语法高亮、智能代码提示等功能,还可以直接使用 VS Code 调试网页和原生版本的游戏。

Step 1:安装 VS Code

下面附上官方地址:

https://code.visualstudio.com/

点击选择适合你当前运行环境安装包下载即可。

Enmmm,Windows 伙计也可以直接点击下方云盘直接下载:

链接: https://pan.baidu.com/s/1lHj2cQBDj9lKX8t0agDAkw 密码: fp6s

Enmmm,按照步骤进行安装,这一步没啥可说的。

Step 2:安装 Cocos Creator API 适配插件

在 Cocos Creator 中打开你的项目,然后选择主菜单里的 开发者 -> VS Code 工作流 -> 安装 VS Code 扩展插件。

该操作会将 Cocos Creator API 适配插件安装到 VS Code 全局的插件文件夹中,一般在用户 Home 文件夹中的 .vscode/extensions 目录下。这个操作只需要执行一次,如果 API 适配插件更新了,则需要再次运行来更新插件。

安装成功后在 控制台 会显示绿色的提示:VS Code extension installed to …。

这个插件的主要功能是为 VS Code 编辑状态下注入符合 Cocos Creator 组件脚本使用习惯的语法提示。

Step 3:在项目中生成智能提示数据

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

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

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

Step 4:使用 VS Code 打开和编辑项目

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

现在新建一个脚本,或者打开原有的脚本编辑时,就可以享受智能语法提示的功能了。

![这里写图片描述](https://img-blog.csdn.net/2018070510390518)

Step 5:设置文件显示和搜索过滤

在 VS Code 的主菜单中选择 文件 -> 首选项 -> 设置,这个操作会打开用户配置文件,在配置文件中加入以下内容:

{
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "build/": true,
        "temp/": true,
        "library/": true,
        "**/*.anim": true
    },
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/*.meta": true,
        "library/": true,
        "local/": true,
        "temp/": true
    }
}

上面的字段将为 VS Code 设置搜索时排除的目录,和在文件列表中隐藏的文件类型。由于 build, temp, library 都是编辑器运行时自动生成的路径,而且会包含我们写入的脚本内容,所以应该在搜索中排除。而 assets 目录下的每个文件都会生成一个 .meta 文件,一般来说我们不需要关心他的内容,只要让编辑器帮我们管理这些文件就可以了。

![这里写图片描述](https://img-blog.csdn.net/20180710154834554) ![这里写图片描述](https://img-blog.csdn.net/2018071015494616)

过滤后,是不是看得很明了?

Step 6:CUrl 配置失败

![这里写图片描述](https://img-blog.csdn.net/20180710163309534)

查看官方之后才发现:

![这里写图片描述](https://img-blog.csdn.net/20180710163538930)

enmmm,版本变了不说,内容还发生改动,MMP~!!!

问题对应得 CUrl 怎么玩?

2. Cocos Creator 1.9 基本环境配置

Step 2.1:指定数据编辑外部脚本编辑器为我们安装得 VS Code:

![这里写图片描述](https://img-blog.csdn.net/20180710155737173)

Step 2.2:设置原生开发环境

![这里写图片描述](https://img-blog.csdn.net/20180710160051439)

对应添加本地安装位置即可。

个人公众号

不定期发布博文,感谢大家关注~

![这里写图片描述](https://img-blog.csdn.net/20180630201222168)

参考资料

  1. 官方地址:http://docs.cocos.com/creator/manual/zh/getting-started/coding-setup.html;
  2. VS Code:http://docs.cocos.com/creator/manual/zh/getting-started/coding-setup.html;
HLQ_Struggle CSDN认证博客专家 Android Flutter 伪前端
一枚96年Android鼠,热衷分享个人笔记,希望帮助一些小伙伴。目前除了Android老本行,涉猎Flutter、伪前端等,欢迎一起交流学习~
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:C马雯娟 返回首页