CocosCreator3.8研究笔记(二)windows环境 VS Code 编辑器的配置

简介: CocosCreator3.8研究笔记(二)windows环境 VS Code 编辑器的配置

一、设置文件显示和搜索过滤步骤


为了提高搜索效率以及文件列表中隐藏不需要显示的文件, VS Code 需要设置排除目录用于过滤。


比如 cocoscreator 中,编辑器运行时会自动生成一些目录:buildtemplibrary, 所以应该在搜索中排除。


assets 目录下的每个文件都会生成一个 .meta 文件,我们不需要关心它的内容,也可以隐藏。


1、打开用户配置文件: USER SETTINGS


具体操作:在VS Code 设置按钮,弹出菜单中选择 setting ,打开配置文件。


如图:



2、搜索框中输入 exclude 搜索


(1)、找到 Files: Exclude 模块


![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/fc4ebeead1ea43a0978190235d0b1c1a.png#pic_center)

(2)、点击 “add pattern” 按钮 补充以下内容:

**/*.meta
library/
local/
temp/


添加后如图:


(3)、找到 Search: Exclude 模块


(4)、点击 “add pattern” 按钮 补充以下内容:

**/node_modules
**/bower_components
build/
temp/
library/
**/*.anim


添加后如图:


二、VS Code 扩展的使用


为了便于辅助开发,我们可以给 VS Code 配置工作流,添加编译任务 和 添加Chrome Debug 。

  • 添加编译任务:用于在 VS Code 中触发 Creator 的脚本编译。
  • 添加Chrome Debug :用于调试网页版游戏。


1、 添加编译任务,VS Code 中触发 Creator 脚本编译


一般来说,使用外部编辑器修改项目脚本代码后,需要返回 Cocos Creator 才能触发脚本编译。

我们希望在 VS Code 中修改脚本代码后,不需要返回 Cocos Creator 就能触发脚本编译, 这时就需要添加编译任务。


添加编译任务是通过一个预览服务器的 API 向特定地址发送请求来激活 Creator 的编译。


(1)、确保系统中安装 CURL

检测Windows系统中是否安装了 curl,命令行,执行命令:

curl -help


如果已安装,则提示如下:


如果提示找不到命令,则需要先安装 curl 到操作系统。

curl 安装步骤如下:

第一步、浏览器中打开curl 下载地址:

http://www.confusedbycode.com/curl/

第二步、完成人机身份验证(若无法正常显示控件,请科学上网)


第三步、直接点击 curl-7.46.0-win64.exe 下载


第四步、安装时请使用默认设置。

由于我的环境已经安装了curl ,这里就不再演示。

安装完成后,可以使用上面的命令行检测方法, 检测curl 是否安装成功。


(2)、添加 VS Code 编译任务

在VS Code 中激活脚本编译,需要执行以下步骤:

第一步,在 Creator 顶部菜单栏点击 开发者 -> VS Code 工作流-> 添加编译任务。



执行完以上操作后,会在项目目录的 .vscode 文件夹下添加 tasks.json 任务配置文件


如图:



第二步, 在 VS Code 里按下快捷键 Ctrl + P 打开输入框,然后输入 task cocoscreator compile,再选择 CocosCreator compile



任务运行完成,会在 VS Code 窗口下方的输出面板中显示结果:


这样以后在 VS Code 编辑脚本完成后,执行第二步即可触发 Creator 的脚本编译,不需要返回 Creator。


第三步,为编译任务配置快捷键

在左下角设置按钮->keybord shortcuts->搜索task



以后在 VS Code 中按下快捷键 Ctrl + Shift + B 便会自动显示 CocosCreator compile,执行即可,不需要再手动搜索。


(2)、添加Chrome Debug 用于调试网页版游戏

我们可以直接在VS Code 源码工程中调试网页版游戏程序。

安装步骤如下:

第一步,需要安装Chrome(谷歌浏览器)


第二步,安装VS Code 插件 JavaScript Debugger:

首先,点击 VS Code 左侧导航栏的 扩展 按钮打开扩展面板:



然后,在搜索框中输入 JavaScript Debugger



点击install安装,安装完成后如下:


第三步, 在 Cocos Creator 顶部菜单栏中点击 开发者 -> VS Code 工作流 -> 添加 Chrome Debug 配置



执行完以上操作,会在项目文件夹下添加一个 .vscode/launch.json 文件作为调试器的配置:


文件内容如下:

调试依赖 Cocos Creator 编辑器内置的 Web 服务器,所以需要在编辑器启动状态下才能进行调试。

如果编辑器预览游戏时使用的端口不是默认端口,则需要手动修改 launch.json 里的 url 字段,将正确的端口添加上去。



第四步,在 VS Code 中点击左侧栏的 调试 按钮打开调试面板

在最上方的调试配置中选择 Cocos Creator Launch Chrome against localhost,然后点击左侧绿色的开始按钮进行调试。

调试过程中,可以在源码文件上直接下断点,进行监控。



此时会打开一个Chrome 浏览器窗口,并在控制台的debug console 中输出日志:


至此, VS Code 编辑器的配置到此结束。


相关文章
|
XML 存储 搜索推荐
Omnissa Dynamic Environment Manager 2503 - 个性化动态 Windows 桌面环境管理
Omnissa Dynamic Environment Manager 2503 - 个性化动态 Windows 桌面环境管理
199 7
Omnissa Dynamic Environment Manager 2503 - 个性化动态 Windows 桌面环境管理
|
9月前
|
C++ Windows
Windows10添加自定义右键菜单VS Code
本文介绍了如何在Windows 10中通过修改注册表,将VS Code添加到右键菜单,实现右键文件、文件夹或空白处时使用VS Code打开。方法同样适用于其他程序,如Sublime Text 3。
|
6月前
|
Linux iOS开发 计算机视觉
GIMP 3.0.6 (Linux, macOS, Windows) 发布 - 免费开源图像编辑器
GIMP 3.0.6 (Linux, macOS, Windows) 发布 - 免费开源图像编辑器
522 0
|
11月前
|
Python
在VScode环境下配置Python环境的方法
经过上述步骤,你的VSCode环境就已经配置好了。请尽情享受这扇你为自己开启的知识之窗。如同你在冒险世界中前行,你的探索之路只有越走越广,你获得的知识只会越来越丰富,你的能力只会越来越强。
1059 37
|
12月前
|
Ubuntu 数据库 虚拟化
Windows 环境下 Odoo 安装保姆级教程
本教程详细介绍了在 Windows 系统上通过虚拟机部署 Odoo 的完整流程。首先确认硬件需求,确保 CPU、内存和磁盘空间满足最低配置;接着安装 VMware Workstation Pro 并创建 Ubuntu 虚拟机,配置桥接网络以实现主机与虚拟机的通信;随后借助微聚云快速安装预配置好的 Odoo 环境,简化复杂环境搭建;最后通过浏览器访问虚拟机 IP,完成 Odoo 数据库初始化及基础设置。整个过程清晰易懂,适合新手快速上手 Odoo 部署。
1487 4
|
存储 运维 监控
提升Windows Server环境安全性:ADAudit Plus的五大关键优势
在Windows Server环境中,内置的安全审计工具虽有用,但存在专业门槛高、耗时及功能缺失等问题。第三方工具ADAudit Plus应运而生,其五大优势包括:日志聚合、关键活动检测、定制化报告、灵活安全配置和长期日志保留,有效提升系统监控与合规能力。选择ADAudit Plus,助力企业更高效应对审计挑战,强化安全性。
307 2
|
弹性计算 开发框架 安全
基于云效 Windows 构建环境和 Nuget 制品仓库进行 .Net 应用开发
本文将基于云效 Flow 流水线 Windows 构建环境和云效 Packages Nuget 制品仓库手把手教你如何开发并部署一个 .NET 应用,从环境搭建到实战应用发布的详细教程,帮助你掌握 .NET 开发的核心技能。
|
Dart 搜索推荐 IDE
Windows下Zed编辑器配置Dart环境
本文介绍了Dart编程语言及其主要框架Flutter的优势,并推荐使用轻量级编辑器Zed进行Dart开发。详细步骤包括Dart环境的安装与配置,Zed编辑器的安装与个性化设置,以及如何在Zed中编写并运行Dart的HelloWorld程序。通过自定义任务实现Dart文件的快速运行,提高了开发效率。
1037 2
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
2725 4
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境

热门文章

最新文章