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 编辑器的配置到此结束。


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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《存储IO路径》专题:IO块设备的创建

今天我们来一起学习一下Linux块设备层。它就像是一位大厨,为我们准备各种数据的饕餮盛宴。这个大厨非常厉害,不仅能够读取和写入数据,还能对数据进行各种复杂的操作,比如切割、合并、复制等等。那么,块设备层是如何实现…

SpringBoot初级开发--整体应用的统一性异常管理(7)

在整个系统中,通常会要求有统一性的异常抛出,统一的异常格式,统一的异常界面,而不是把整个堆栈错误信息抛出,这样对整个系统的安全性以及错误定位都非常不好,接下来我们紧接上一章的源码,加上统…

JVM之程序计数器和栈

Java虚拟机(JVM)是运行Java程序的关键组件,它负责将Java源代码转换为可执行的字节码,并在运行时管理内存、执行程序等。在JVM的内部,有许多重要的组成部分,如下图: 1. JVM程序计数器 程序计数器…

CSRF(跨站请求伪造)和SSRF(服务端请求伪造)漏洞复现:风险与防护方法

这篇文章旨在用于网络安全学习,请勿进行任何非法行为,否则后果自负。 环境准备 一、CSRF(跨站请求伪造) 示例:假设用户在银行网站A上登录并保持会话活动,同时他也在浏览其他网站。攻击者在一个不可信任…

聊聊Http服务化改造实践

在微服务架构体系中远程RPC调用主要包括Dubbo与Http调用两个大类,由于Dubbo拥有服务注册中心,并且起服务的命名非常规范,使用包名.类名.方法名进行描述。 而http调用通常都是使用httpclient等相关类库,这些在使用上并没有问题&am…

18.2 【Linux】rsylog.service:记录登录文件的服务

rsyslogd 可以负责主机产生的各个信息的登录,而这些信息本身是有“严重等级”之分的。每个 Linux distributions 放置的登录文件文件名可能会有所差异。 基本上, rsyslogd 针对各种服务与讯息记录在某些文件的配置文件就是 /etc/rsyslog.conf&#xff0…

工厂人员作业行为动作识别检测算法

工厂人员作业行为动作识别检测算法通过yolov7python深度学习算法框架模型,工厂人员作业行为动作识别检测算法实时识别并分析现场人员操作动作行为是否符合SOP安全规范流程作业标准,如果不符合则立即抓拍告警提醒。Python是一种由Guido van Rossum开发的通…

【Docker】网络

文章目录 Docker 网络基础Docker网络管理Docker网络架构CNMLibnetwork驱动 常见的网络类型 Docker 网络管理命令docker network createdocker network inspectdocker network connectdocker network disconnectdocker network prunedocker network rmdocker network ls docker …

机器学习和数据挖掘02-Gaussian Naive Bayes

概念 贝叶斯定理: 贝叶斯定理是概率中的基本定理,描述了如何根据更多证据或信息更新假设的概率。在分类的上下文中,它用于计算给定特征集的类别的后验概率。 特征独立性假设: 高斯朴素贝叶斯中的“朴素”假设是,给定…

一个简单的vim例子

一.欢迎来到我的酒馆 在本章节介绍vim工具。 目录 一.欢迎来到我的酒馆二.什么是vim三.开始使用vim 二.什么是vim 2.1什么是vim vim是一种Linux命令行类型的文本编辑器。vim指的是"vi improved",意思是vi工具的升级版。vim是基于vi实现的&#x…

Redis问题集合(三)在Redis容器里设置键值对

前言 前提是已经拉取了Redis镜像并创建了对应的容器做个记录,方便后续查看 步骤 查看Redis容器的ID:docker ps -a 进入容器:docker exec -it 容器ID /bin/bash进入redis命令行:redis-cli输入密码:auth 配置密码 查看…

(笔记六)利用opencv进行图像滤波

(1)自定义卷积核图像滤波 import numpy as np import matplotlib.pyplot as plt import cv2 as cvimg_path r"D:\data\test6-6.png" img cv.imread(img_path)# 图像滤波 ker np.ones((6, 6), np.float32)/36 # 构建滤波器(卷积…