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

2023-11-04


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


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


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • VSCode编码特效

    下载插件 Power Mode 然后来到settings json文件进行修改配置 如果找不到 可以只搜索settings 代码中继续追加这部分代码 explorer confirmDelete false powermode enable
  • 用Vscode编辑verilog代码配置

    这篇教程感觉很详细了 我这里分享一下vscode和插件的安装包链接 都是官网下载的 放心食用 用VSCode编辑verilog代码 iverilog编译 自动例化 自动补全 自动格式化等常用插件 链接 https pan baidu com
  • Windows下VSCode开发及运行Web程序环境配置

    前言 本文主要介绍在Windows操作系统下如何配置Visual Studio Code VSCode 开发和运行调试网页 一 安装VSCode 1 下载Visual Studio Code 以下简称VSCode 安装文件 下载地址为 ht
  • VSCode连接WSL2及VMware,WSL2安装GUI应用

    一 VScode 连接WSL2 参考文章 巨硬官方文档 知乎大佬教程 知乎大佬教程2 1 开启WSL2 支持 使用管理员权限的 Shell 才能安装 WSL2 按 Win X 找到 Windows PowerShell 管理员 并复制执行命
  • react脚手架配置别名并自动提示[VSCode]

    1 安装三方库 craco craco yarn add craco dev npm install craco craco save dev 2 配置craco config js const path require path modu
  • vsCode开发STM32设置头文件宏定义

    一 问题描述 使用 HAL 库新建 STM32 工程后 使用 vsCode 打开工程文件夹 会提示找不到头文件 以及比变量没有定义 如 uint32 t 不是一个有效类型等错误提示 如下图所示 二 原因分析 vsCode 中没有配置头文件路
  • 【css】overflow溢出隐藏

    overflow scroll 溢出部分显示滚动条 不溢出也显示滚动条 overflow auto 溢出的时候才显示滚动条 不溢出不显示滚动条
  • 在VS Code中使用Kotlin

    在VS Code中使用Kotlin 当前Google有意用Kotlin来替代Java 今后在Android开发中 可能Kotlin会成为标准语言 Kotlin语言是由JetBrains公司开发的 就是做IntelliJ IDEA的那家公司
  • vscode实现文件单步调试保姆级教程

    第一步 第二步 第三步 第四步 第五步 第六步 第七步 第八步 第九步 第十步 点击终端 gt 配置任务 第十一步 第十二步 第十三步 第十四步 设置完毕 可以在源程序打断点按F5执行了
  • [VScode]终端回应“pnpm : 无法将“pnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。“解决思路

    问题概述 遇到问题 在VScode终端输入pnpm install有错误提示 pnpm 无法将 pnpm 项识别为 cmdlet 函数 脚本文件或可运行程序的名称 请检查名称的拼写 如 果包括路径 请确保路径正确 然后再试一次 所在位置 行
  • CocosCreator波浪Shader

    waveEffect effect Copyright c 2017 2020 Xiamen Yaji Software Co Ltd CCEffect techniques passes vert sprite vs vert frag
  • Verilog中if- else if语句和case语句用法:

    一 if语句 1 两种情况 if 条件语句 begin end else begin end 2 多种情况 if 条件语句 begin end else if 条件语句 begin end else if 条件语句 begin end el
  • vscode的Document This插件

    Document This插件 主要针对JavaScript 和 TypeScript 语言生成注释 光标放在函数名上 连续按 两下 Ctrl Alt D description param number x param number y
  • TensorFlow.js预测鸢尾花种类

    源码连接 TensorFlow js实现鸢尾花种类预测 机器学习文档类资源 CSDN下载 一 加载IRIS数据集 创建index html入口文件 跳转到script主文件 在script js文件夹中利用预先准备好的脚本生成鸢尾花数据集
  • 3WebGL shader准备工具

    VSCode安装 VSCode 全称 Visual Studio Code 是一款由微软开发且跨平台的免费源代码编辑器 该软件支持语法高亮 代码自动补全 又称 IntelliSense 代码重构 查看定义功能 并且内置了命令行工具和 Git
  • Python in Visual Studio Code 2023年9月更新

    作者 Courtney Webster Program Manager Python Extension in Visual Studio Code 排版 Alan Wang 我们很高兴地宣布 Visual Studio Code 的 Py
  • VSCode设置中文

    https www somode com softjc 30980 html
  • vscode开发python环境配置

    前言 vscode作为一款好用的轻量级代码编辑器 不仅支持代码调试 而且还有丰富的插件库 可以说是免费好用 对于初学者来说用来写写python是再合适不过了 下面就推荐几款个人觉得还不错的插件 希望可以帮助大家更好地写代码 安装CPytho
  • VSCode 代码高亮 变量类型、函数名、类名没有颜色 - 设置主题即可

    https zhuanlan zhihu com p 630401039 之前应该设置主题了 但不知道为啥C 里面只有 int 有高亮 其他像 cv Mat 函数名 类名都没有颜色 解决方案是重新设置一下主题 File preference
  • VScode配置mingw C语言环境变量

    C语言IDE VScode VScode是个人比较喜欢的一款IDE软件 鄙人曾同时在VScode软件中运行三个终端 开发Python Golang和C语言 下载地址如下 code visualstudio com VScode配置mingw

随机推荐

  • 复制文件夹所有内容 和 删除整个文件夹的2个函数

    选择自 hycapril 的 Blog 实现一个静态方法将指定文件夹下面的所有内容copy到目标文件夹下面 如果目标文件夹为只读属性就会报错 April 18April2005 In STU public static void CopyD
  • keil4 破解心得

    keil4 破解心得 Obj STM32 FD SDCard MP3 axf error L6047U The size nb 在编译时出现 Obj STM32 FD SDCard MP3 axf error L6047U The size
  • bes2300之环境搭建(一)

    目录 环境搭建 sdk文件结构介绍 编译 烧录 配置烧录选项 选择端口 启动升级 简单使用 环境搭建 安装编译工具链 gcc arm none eabi 4 9 2014q4 20141203 win32 exe make 3 81 exe
  • GPIO工作模式

    参考链接 STM32 STM32F4 GPIO八种模式及工作原理详解 Z小旋 CSDN博客 stm32io口的八种工作模式 GPIO 即通用I O 输入 输出 端口 是STM32可控制的引脚 STM32芯片的GPIO引脚与外部设备连接起来
  • [备忘]域用户登陆出现“此工作站和主域间的信任关系失败”错误解决方法

    症状 登陆域用户 出现错误 此工作站和主域间的信任关系失败 并无法登陆 解决方案 1 使用本地用户登录 更改当前 域 为 工作组 如默认的WORKGROUP等 并输入具有域管理权限的用户名 密码 随后此电脑上的 域 将会被删除 2 重启电脑
  • Flink入门看完这篇文章就够了

    文章目录 第一章 概述 第一节 什么是Flink 第二节 Flink特点 第三节 Flink应用场景 第四节 Flink核心组成 第五节 Flink处理模型 流处理和批处理 第六节 流处理引擎的技术选型 拓展 什么是最多一次 最少一次和仅一
  • 算法基础之数组理论

    算法基础之数组理论 1 前言 2 数组基础定义 3 数组增删改查 3 1基本功能 3 2添加元素 3 3查询和修改元素 3 4包含 搜索和删除元素 3 5其他 3 6检验 4 动态数组及其时间复杂度 4 1动态数组的实现 4 2增删改查时间
  • 阿里云通义千问向全社会开放,近期将开源更大参数规模大模型

    9月13日 阿里云宣布通义千问大模型已首批通过备案 并正式向公众开放 广大用户可登录通义千问官网体验 企业用户可以通过阿里云调用通义千问API 通义千问在技术创新和行业应用上均位居大模型行业前列 IDC最新的AI大模型评估报告显示 通义千问
  • 【YModem】YModem串口IAP升级例程+YModem串口工具

    目录 YModem协议传输的过程 IAP例程 YModem串口工具 YModem技术手册 手把手教你如何实现自动固件更新 YModem协议是由XModem协议演变而来的 每包数据可以达到1024字节 是一个非常高效的文件传输协议 Ymode
  • ChatGPT多场景应用之基本应用

    人工智能 AI 无疑是近年来最流行和最先进的技术之一 生成式 AI模型正在促进众多任务 实现效率和自动化 目前 ChatGPT是风靡互联网的主要生成人工智能模型 据 Similar Web 称 自 2022 年 11 月发布以来 其访问量已
  • 【c语言五子棋】自定义类型五子棋/井字棋:胜负判断

    一 算法思路 由于五子棋规则比较简单 我们可以胜负判断分为以下几个方面分别判断 1 横向判断 2 竖向判断 3 斜向判断 从左下到右上 4 斜向判断 从左上到右下 二 算法原理 算法来源 参考字符串匹配的处理方法 具体可以参考 从头到尾彻底
  • 腾讯COS,Cloudbase API用法教程详细

    Chinar blog www chinar xin 腾讯云 COS Cloudbase API 本文提供全流程 中文翻译 Chinar 的初衷是将一种简单的生活方式带给世人 使有限时间 具备无限可能 Chinar 心分享 心创新 助力快速
  • 使用GCC和Makefile编译c文件

    Ubuntu下使用GCC和Makefile编译c文件 目录 Ubuntu下使用GCC和Makefile编译c文件 前言 一 GGC命令行模式 1 vim创建文件 2 gcc编译 1 编译出目标文件 2 链接为可执行文件 3 运行 二 VS2
  • 没有苹果开发者账号能否创建ios证书-最新

    在2020年以前 注册苹果开发者账号后 就可以使用香蕉云编生成证书 但2020年后 因为注册苹果开发者账号需要使用Apple Developer app注册开发者账号 所以需要缴费才能创建ios证书了 所以新政策出来后 只能使用香蕉云编 注
  • quill富文本编辑器 自定义字体和大小 以及提交和回显

    第一步 引入quill样式 我是下载到本地了 第二步 引入js
  • 网购平台用户行为分析

    1 背景 对于电子商务网站来说 每天都会产生海量的关于用户的行为数据 分析用户的行为对于企业来说至关重要 从海量用户行为数据中可以挖掘出网购用户的个人喜好 行为特征 购买倾向等隐藏信息 从而为电子商务服务商提供有价值的信息 本文基于SQL从
  • kex_exchange_identification: Connection closed by remote host问题解决

    今天动了一下代码 打算提交到github 结果使用git push 的时候报错 kex exchange identification Connection closed by remote host 在网上找了半天各种方法都试过了 终于找
  • 个人学习日记—CSS字体样式属性调试工具

    font字体 font size 大小 作用 font size属性用于设置字号 p font size 20px 单位 可以使用相对长度单位 也可以使用绝对长度单位 相对长度单位比较常用 推荐使用像素单位px 绝对长度单位使用较少 注意
  • Spring系列之依赖注入---手动注入

    本文内容 主要介绍xml中依赖注入的配置 构造器注入的3种方式详解 set方法注入详解 注入容器中的其他bean的2种方式 其他常见类型注入详解 依赖回顾 通常情况下 系统中类和类之间是有依赖关系的 如果一个类对外提供的功能需要通过调用其他
  • CocosCreator3.8研究笔记(二)windows环境 VS Code 编辑器的配置

    一 设置文件显示和搜索过滤步骤 为了提高搜索效率以及文件列表中隐藏不需要显示的文件 VS Code 需要设置排除目录用于过滤 比如 cocoscreator 中 编辑器运行时会自动生成一些目录 build temp library 所以应该