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


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


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


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


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


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


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


如图:

在这里插入图片描述


在这里插入图片描述


2、搜索框中输入 exclude 搜索


(1)、找到 Files: Exclude 模块


![在这里插入图片描述](https://img-blog.csdnimg.cn/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 编辑器的配置到此结束。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/98462.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

云计算的三个主要服务模型:IaaS、PaaS 和 SaaS

文章目录 介绍基础设施即服务(Infrastructure as a Service,IaaS)平台即服务(Platform as a Service,PaaS)软件即服务(Software as a Service,SaaS) 区别基础设施即服务&…

C++面试题(吴)-计算机网络部分(2)和常见设计模式

目录 1.网络部分 3.32 说说浏览器从输入 URL 到展现页面的全过程 3.33 简述 HTTP 和 HTTPS 的区别? 3.34 说说 HTTP 中的 referer 头的作用 3.35 说说 HTTP 的方法有哪些 3.36 简述 HTTP 1.0,1.1,2.0 的主要区别 3.37 说说 HTTP 常见的…

vue组装模板(侧边栏+顶部+主体)--项目阶段4

目录 一、前言介绍 二、结构解析 三、页面拆分 (一)页面拆分 1.侧边栏页面(固定)--Aside.vue 2.顶部页面(固定)--Header.vue 3.主体页面(不固定的)--示例用UserView…

PYTHON用户流失数据挖掘:建立逻辑回归、XGBOOST、随机森林、决策树、支持向量机、朴素贝叶斯和KMEANS聚类用户画像...

原文链接:http://tecdat.cn/?p24346 在今天产品高度同质化的品牌营销阶段,企业与企业之间的竞争集中地体现在对客户的争夺上(点击文末“阅读原文”获取完整代码数据)。 “用户就是上帝”促使众多的企业不惜代价去争夺尽可能多的客…

C#,《小白学程序》第七课:列表(List)应用之一“编制高铁车次信息表”

1 文本格式 /// <summary> /// 车站信息类 class /// </summary> public class Station { /// <summary> /// 编号 /// </summary> public int Id { get; set; } 0; /// <summary> /// 车站名 /// </summary>…

bug复刻,解决方案---在改变div层级关系时,导致传参失败

问题描述&#xff1a; 在优化页面时&#xff0c;为了实现网页顶部遮挡效果&#xff08;内容滚动&#xff0c;顶部导航栏不随着一起滚动&#xff0c;并且覆盖&#xff09;&#xff0c;做法是将内容都放在一个div里面&#xff0c;为这个新的div设置样式&#xff0c;margin-top w…

查漏补缺 - JS三 WebAPI

目录 BOMhistory DOM操作DOM1&#xff0c;dom.children 和 dom.childNodes 区别2&#xff0c;dom.remove()3&#xff0c;其他常用 API DOM 属性1&#xff0c;标准属性2&#xff0c;自定义属性 DOM 内容DOM样式DOM事件 JavaScript 包括 EcmaScript 和 WebAPI EcmaScript 包括 语…

25 Linux可视化-Webmin和bt运维工具

25 Linux可视化-Webmin和bt运维工具 文章目录 25 Linux可视化-Webmin和bt运维工具25.1 Web运行环境简介25.2 Webmin的安装及使用25.2.1 安装webmin25.2.2 Webmin使用演示 25.3 bt(宝塔)的安装及使用25.3.1 安装宝塔25.3.2 宝塔Web登录Linux服务器25.3.3 找回宝塔登录密码 学习视…

客路旅行(KLOOK)面试(部分)(未完全解析)

一面 用过Chatgpt的哪个版本&#xff0c;了解Chatgpt版本之间的差异吗 什么是优雅部署&#xff1f;newBing: 服务启动时&#xff0c;检查依赖的组件或容器是否就绪&#xff0c;如果不就绪&#xff0c;等待或重试&#xff0c;直到就绪后再注册到服务中心&#xff0c;对外提供服…

Java之API详解之BigDecimal类的详细解析

7 BigDecimal类 7.1 引入 首先我们来分析一下如下程序的执行结果&#xff1a; public class BigDecimalDemo01 {public static void main(String[] args) {System.out.println(0.09 0.01);}} 这段代码比较简单&#xff0c;就是计算0.09和0.01之和&#xff0c;并且将其结果…

Mapbox-gl 关闭所有Popup,以及关闭按钮出现黑色边框bug

1.官方示例 var popup new mapboxgl.Popup().addTo(map);popup.remove(); 很明显&#xff0c;需要记录popup对象&#xff0c;管理起来比较麻烦。 2.本人采用div的方式关闭所有的popup&#xff0c;在map对象上新增加方法 map.closePopupmapView.popupClear function(){$(&q…

ceph架构及 IO流程

CEPH是由多个节点构成的集群&#xff0c;它具有良好的可扩展性和可靠性。节点之间相互通信以达到&#xff1a; 存储和检索数据 数据复制 监控集群的健康状况 保证数据的完整性 检测故障并恢复 基本架构如下图&#xff1a; 分布式对象存储系统RADOS是CEPH最为关键的技术&a…

WebRTC音视频通话-WebRTC推拉流过程中日志log输出

WebRTC音视频通话-WebRTC推拉流过程中日志log输出 之前实现iOS端调用ossrs服务实现推拉流流程。 推流&#xff1a;https://blog.csdn.net/gloryFlow/article/details/132262724 拉流&#xff1a;https://blog.csdn.net/gloryFlow/article/details/132417602 在推拉流过程中的…

第 3 章 栈和队列(用递归函数求解迷宫问题(求出所有解))

1. 背景说明&#xff1a; 若迷宫 maze 中存在从入口 start 到出口 end 的通道&#xff0c;则求出所有合理解并求出最优解 迷宫示意图&#xff1a; 输入文本&#xff1a; 10 10181 3 1 7 2 3 2 7 3 5 3 6 4 2 4 3 4 4 5 4 6 2 6 6 7 2 7 3 7 4 7 6 7 7 8 11 18 8 2. 示例代码…

【计算机组成 课程笔记】3.1 算数运算和逻辑运算

课程链接&#xff1a; 计算机组成_北京大学_中国大学MOOC(慕课) 3 - 1 - 301-算术运算和逻辑运算&#xff08;13-7--&#xff09;_哔哩哔哩_bilibili 计算机的核心功能就是运算&#xff0c;运算的基本类型包括算数运算和逻辑运算。想要了解计算机是如何实现运算的&#xff0c;我…

Vlan和Trunk

文章目录 一、VLAN的定义与背景1. 传统以太网的问题&#xff08;广播域&#xff09;2. 用VLAN隔离广播域3. VLAN的优点与应用 二、VLAN的转发过程举例三、802.1Q标签&#xff1a;帧格式与作用四、VLAN工作原理交换机端口类型AccessTrunkHybrid PVID&#xff08;Port VLAN ID&am…

【基于空间纹理的残差网络无监督Pansharpening】

Unsupervised Pansharpening method Using Residual Network with Spatial Texture Attention &#xff08;基于空间纹理的残差网络无监督泛锐化方法&#xff09; 近年来&#xff0c;深度学习已经成为最受欢迎的泛锐化工具之一&#xff0c;许多相关方法已经被研究并反映出良好…

android 实现本地一键打包,告别繁琐的studio操作

前言 在实际开发项目中&#xff0c;我们的工程目录往往是多个app在一个工程下的&#xff0c;每次打包都需要手动的用studio点击Build->Generate Signed Bundle or APK->APK 选择app&#xff0c;签名等&#xff0c;甚至有的app签名还不一样&#xff0c;还需要手动的来回切…

【esp32】解决以太网+mqtt堆栈溢出问题 报错 no mem for receive buffer

本文主要记录了 esp32 + 以太网 +mqtt 功能时遇到的堆栈溢出的情况,千里之堤毁于蚁穴,开发过程的不细心导致多付出了一天多的时间,记录于此,共勉 📋 个人简介 💖 作者简介:大家好,我是喜欢记录零碎知识点的小菜鸟。😎📝 个人主页:欢迎访问我的 Ethernet_Comm 博…

小游戏分发平台如何以技术拓流?

2023年&#xff0c;小游戏的发展将受到多方面的影响&#xff0c;例如新技术的引入、参与小游戏的新玩家以及游戏市场的激烈竞争等。首先&#xff0c;新技术如虚拟现实&#xff08;VR&#xff09;、增强现实&#xff08;AR&#xff09;和机器人技术都可以带来新颖的游戏体验。其…