Cocos creator 使用 Vscode 2017
2018-01-25 21:19
459 查看
Cocos creator 使用 Vscode 2017一般方法
迄今为止,在开发组工作人员的努力工作下,Cocos Creator编辑器不断完善,推出了新的1.8.0版本。目前,Cocos Creator内置的代码编辑器功能不完善,只适合快速浏览和做少量编辑的需要。对程序员来说,我们需要更成熟完善的代码编辑环境。所以已经被开发组抛弃了(众多开发者吐槽不好用)。Visual Studio Code
Visual Studio Code (以下简称 VS Code)是微软新 推出的轻量化跨平台IDE,支持 Windows、Mac、Linux 平台,安装和配置非常简单。通过下面介绍的设置方法,使用 VS Code 管理和编辑项目脚本代码,可以轻松实现语法高亮、智能代码提示等功能,还可以直接使用 VS Code 调试网页和原生版本的游戏,最新版本为2017。下载安装 Visual Studio Code
前往 VS Code 的官方网站,点击下载链接:点击打开链接即可下载。Mac 用户解压下载包后双击 Visual Studio Code 即可运行。
Windows 用户下载后运行 VSCodeSetup.exe 按提示完成安装即可运行
在Cocos creator中使用Vscode
1. 打开cocos creator左上角中的偏好设置,在数据编辑那里,通过浏览找到vscode 的程序,添加到其中,点击确定。2. 安装 cocos creator适配插件
在 Cocos Creator 中打开你的项目,然后选择主菜单里的 开发者/安装 VS Code 扩展插件。
该操作会将 Cocos Creator API 适配插件安装到 VS Code 全局的插件文件夹中,一般在用户 Home 文件夹中的 .vscode/extensions 目录下。这个操作只需要执行一次,如果 API 适配插件更新了,则需要再次运行来更新插件。
安装成功后在 控制台 会显示绿色的提示:VS Code extension installed to ...。这个插件的主要功能是为 VS Code 编辑状态下注入符合 Cocos Creator 组件脚本使用习惯的语法提示。
3. 在项目中生成只能提示
如果希望在代码编写过程中自动提示 Cocos Creator 引擎 API,需要通过菜单生成 API 智能提示数据并自动放进项目路径下。
选择主菜单的 开发者/更新 VS Code 智能提示数据。该操作会将根据引擎 API 生成的 creator.d.ts 数据文件复制到项目根目录下(注意是在 assets 目录外面),操作成功时会在 控制台 显示绿色提示:API data generated and copied to ...。
对于每个不同的项目都需要运行一次这个命令,如果 Cocos Creator 版本更新了,也需要打开您的项目重新运行一次这个命令,来同步最新引擎的 API 数据。
注意 从 VS Code 0.10.11 版开始,需要在项目根目录中添加 jsconfig.json 设置文件才能正确的使用包括智能提示在内的 JavaScript 语言功能,在执行上面的命令时,预设的 jsconfig.json 文件会和 creator.d.ts 一起拷贝到您的项目根目录中。
Vscode使用方法
1. 使用 vscode 激活脚本编译首先需要确保你的操作系统中可以运行 cURL 命令,如果在 Windows 操作系统的命令行中运行 curl 提示找不到命令,则需要先安装 curl 到你的系统:链接:点击打开链接密码:q78g 点击 curl-7.46.0-win64.exe 开始下载并安装
安装时请使用默认设置,安装完成后可以打开一个命令行窗口,输入 curl,如果提示 curl: try 'curl --help' or 'curl --manual' for more information 就表示安装成功了。
2. 添加 vscode 编译任务
要在 VS Code 中激活脚本编译,需要执行以下的工作流程:
在编辑器主菜单里执行 开发者->VS Code 工作流->添加编译任务。该操作会在项目的 .vscode 文件夹下添加 tasks.json 任务配置文件。
在 VS Code 里按下 Cmd/Ctrl+p,激活 快速打开 输入框,然后输入 task compile。
任务运行成功的话,会在 VS Code 窗口下方的输出面板中显示如下结果
3. 设置文件显示和搜索过滤
在 VS Code 的主菜单中选择 Code/Preferences/User Settings,这个操作会打开用户配置文件,在配置文件中加入以下内容:
上面的字段将为 VS Code 设置搜索时排除的目录,和在文件列表中隐藏的文件类型。由于 build, temp, library 都是编辑器运行时自动生成的路径,而且会包含我们写入的脚本内容,所以应该在搜索中排除。而 assets 目录下的每个文件都会生成一个 .meta 文件,一般来说我们不需要关心他的内容,只要让编辑器帮我们管理这些文件就可以了。
Vs Code 实用插件
在vscode中可以在拓展中下载安装自己需要的插件,实用插件如下:(1) Cocos Creator API auto completion :cocos creator中的api提示
(2)Color heightlight :颜色值在代码中高亮显示
(3) Bracket Pair Colorizer :对括号对进行着色,再也不会搞不清状况了。
(4) Color picker :拾色器
(5) Vscode-Icons :文件图标,方便区别、查找、定位文件
(6)Eslint:接管原声js提示,可以自定制体会规则。
(7) Beautiful:格式化代码的工具
相关文章推荐
- Cocos creator 使用 Vscode 2017
- VsCode中使用Emmet神器快速编写HTML代码
- 在Linux中使用VS Code编译调试C++项目(gcc/g++、Makefile入门、vs code)
- 使用严老师VS2017版PSINS程序计算没有ins结果好的问题解决
- 使用VS 2013的Bing Code Search插件写SharePoint代码
- 使用 VS Code 来编辑 markdown 文章
- 使用TypeScript拓展你自己的VS Code!
- Golang 使用VSCode搭建一个简单的游戏服务器
- 三、使用vscode在docker中debug
- 在vscode中使用pylint-django插件解决pylint的一些不必要的错误提示
- vs code 使用scss/sass
- 使用vs(visual studio code)写python代码遇到的import requests失败问题
- 使用VS Code开发TypeScript--定义变量推荐使用let
- codevs 5962 [SDOI2017]数字表格
- 虚拟机使用ubuntu运行VS code出现界面黑屏时的解决办法
- win7下使用vscode搭建unity开发环境
- 使用VSCode开发Nodejs
- Vscode中Javascript使用TypeScript文件实现智能提示
- VS Code First使用Mysql数据库详解
- 在CentOS上使用VS Code调试.Net Core应用程序