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

news2024/12/28 17:43:37

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


为了提高搜索效率以及文件列表中隐藏不需要显示的文件, 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 编辑器的配置到此结束。


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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

视频批量智能剪辑分发管理系统----开发

短视频矩阵系统源码开发----视频批量剪辑工具,一键分发 抖音智能剪辑,视频批量发布,多账号管理,抖音搜索排名系统源码搭建 抖音seo,视频剪辑,批量发布,企业号管理,自动询盘锁定客户…

企业架构师,和技术架构师、java架构师有什么区别

一、企业架构师(Enterprise Architect): 企业架构师关注于整个企业的战略目标、业务流程、技术体系等,致力于确保企业的各项业务和技术活动能够协调一致、有效运作。他们通常从全局的角度出发,制定和规划企业级的技术…

【UE 材质】模型部分透明

材质节点如下,这里简单解释一下。首先通过“Mask”节点将"Texture Coordinate" 节点中的“G”通道分离出来,然后通过“if”节点进行判断,当值小于0.5时为透明,当颜色不小于5时为不透明。可以通过一个参数来控制模型透明…

开发一个npm包

1 注册一个npm账号 npm https://www.npmjs.com/ 2 初始化一个npm 项目 npm init -y3编写一段代码 function fn(){return 1+2 }exports.hello=fn; </

Linux:Jupyterhub多用户远程登录安装、使用经验

1、安装 首先&#xff0c;打开官网帮助文档&#xff1a; JupyterHub 官方安装帮助文档 一般安装都是参考官方最新版安装文档。 1.1环境条件 本次安装 JupyterHub的软件环境&#xff1a; 基于 Linux Centos系统&#xff1b;Python 3.9或更高版本&#xff1b;安装 nodejs/n…

《王道24数据结构》课后应用题——第二章

文章目录 第二章【2.2】01、02、03、04、05、06、07、08、09、10、11、12、13、14、 【2.3】01、02、03、04、05、06、07、08、09、10、11、 编程题须知&#xff1a; 编程题不限语言。也可以用标准库函数&#xff0c;如C中<vector>&#xff0c;<string>等。编程题…

2023长沙/上海/深圳CSPM-3国标项目管理中级认证招生

CSPM-3中级项目管理专业人员评价&#xff0c;是中国标准化协会&#xff08;全国项目管理标准化技术委员会秘书处&#xff09;&#xff0c;面向社会开展项目管理专业人员能力的等级证书。旨在构建多层次从业人员培养培训体系&#xff0c;建立健全人才职业能力评价和激励机制的要…

Python中的os模块:walk函数与listdir函数的深度解析

Python中的os模块&#xff1a;walk函数与listdir函数的深度解析 os.walk()函数listdir()函数使用场景案例一&#xff1a;遍历目录树并处理文件案例二&#xff1a;列出目录中的文件名并执行某些操作 总结 在Python中&#xff0c;os模块提供了许多与操作系统交互的功能&#xff0…

Linux查看文件或目录大于1G的目录

du -h / | egrep "^[0-9.]*G" 首先&#xff0c;“du"命令用于计算目录或文件的磁盘使用情况。参数”-h"表示以人类可读的方式显示大小&#xff0c;即使用易读的单位&#xff08;如KB、MB、GB&#xff09;表示文件大小。 然后&#xff0c;“|”&#xff0…

【正点原子STM32连载】第二十三章 高级定时器互补输出带死区控制实验 摘自【正点原子】APM32F407最小系统板使用指南

第二十三章 高级定时器互补输出带死区控制实验 本章将介绍使用APM32F407输出带死区和刹车控制的两路互补PWM。通过本章的学习&#xff0c;读者将学习到高级定时器的互补输出、死区插入和刹车的功能的使用。 本章分为如下几个小节&#xff1a; 23.1 硬件设计 23.2 程序设计 23.…

深度剖析:数据服务API的安全性与隐私保护

随着互联网技术的飞速发展&#xff0c;数据服务API已经成为了企业和个人获取、处理和分析数据的重要工具。然而&#xff0c;数据服务API的安全问题也日益凸显&#xff0c;尤其是在用户隐私保护方面。本文将深入剖析数据服务API的安全性与隐私保护问题&#xff0c;并结合产品FDL…

【STM32】IIC使用中DMA传输时 发送数据总少一个的问题

问题描述 在使用STM32 I2C数据发送过程中&#xff0c;发现每轮实际发送出去的数据总比在DMA配置中设定的传输数据个数要少一个。比方说&#xff1a;DMA配置里设定的传输数据个数是10个&#xff0c;结果发现在总线上只能发出9个&#xff0c;经过进一步发现是少了最后一个数据。…

MongoDB实验——MongoDB shell操作

MongoDB shell操作 实验原理 MongoDB shell是一个可执行文件&#xff0c;是MongoDB自带的一个交互式JavaScript shell&#xff0c;位于MongoDB安装路径下的/bin文件夹中。要启动MongoDB shell&#xff0c;可执行命令mongo。这将在控制台提示符中启动该shell&#xff0c;Mongo…

Spark及其生态简介

一、Spark简介 Spark 是一个用来实现快速而通用的集群计算的平台&#xff0c;官网上的解释是&#xff1a;Apache Spark™是用于大规模数据处理的统一分析引擎。 Spark 适用于各种各样原先需要多种不同的分布式平台的场景&#xff0c;包括批处理、迭代算法、交互式查询、流处理…

歌尔股份半年报解读:越过山丘,前路如何?

2023年上半年&#xff0c;消费电子市场仍然表现低迷。Canalys数据显示&#xff0c;2023年第一季度同比下滑12%&#xff0c;第二季度同比下降11%&#xff0c;全球智能手机出货量连续第五个季度下滑。 这让外界议论纷纷&#xff0c;移动互联网的红利消失后&#xff0c;消费电子厂…

JDK源码-Synchronized

1. Synchronized 1.1 Synchronized定义 如果某一个资源被多个线程共享&#xff0c;为了避免因为资源抢占导致资源数据错乱&#xff0c;需要对线程进行同步&#xff0c;那么synchronized就是实现线程同步的关键字 synchronized的作用是保证在同一时刻&#xff0c; 被修饰的代…

Python Tcp编程

网络连接与通信是我们学习任何编程语言都绕不过的知识点。Python 也不例外&#xff0c;本文就介绍因特网的核心协议 TCP &#xff0c;以及如何用 Python 实现 TCP 的连接与通信。 TCP 协议 TCP协议&#xff08;Transmission Control Protocol&#xff0c; 传输控制协议&#…

Centos误删系统自带python2.7,yum报错恢复方法

使用wget分别下载python以及yum的rpm包 资源地址如下&#xff1a; http://vault.centos.org mkdir /usr/local/src/pythoncd /usr/local/src/pythonwget http://vault.centos.org/7.6.1810/os/x86_64/Packages/python-backports-1.0-8.el7.x86_64.rpmwget ht…

“处暑”即“出暑”?警惕秋老虎,收好这份初秋养生秘籍

“处暑”虽过&#xff0c;不过并不意味着“出暑”&#xff0c;尽管昼夜温差变大&#xff0c;但白天有时仍然很热&#xff0c;也多了换季感冒的风险。面对秋老虎的“烤”验&#xff0c;请收下这份健康养生指南&#xff0c;帮助我们安然度过夏末秋初&#xff01; 养生秘籍一&…

suricata安装与配置

一、功能介绍 1、概述 suricata来源于经典的nids系统snort&#xff0c;是一套基于网络流量的威胁检测引擎&#xff0c;整合了ids,ips&#xff0c;network security monitoring(NSM)和PCAP processing等功能。 2、IDS功能 通过监听网卡流量并匹配规则引擎进行入侵实时监测和…