使用 Visual Studio Code 开发白鹭项目

• 日期: 2023/12/30 5:15:55

  编译完成后，自动删除多出的 @egret 文件夹。 否则以后使用 EgretWing 打开时，编辑不了皮肤文件。（使用白鹭引擎 5.4.1 编译后，会有这种问题。—— 很可能 EgretWing 都过时，都不支持 5.4.1 了。）（因为使用独立的 eui 软件编辑皮肤时，总是卡死。 —— 所以还是使用 EgretWing 编辑皮肤比较稳定。 ）

• 日期: 2023/12/30 5:15:55

  “直接调试，跳过编译” 时，自动使用已有的启动配置（忽略 preLaunchTask）

• 日期: 2023/12/30 4:05:33

  修复启动调试时，总是端口随机的问题。（并支持使用配置的 url 的指定端口）

• 日期: 2023/12/30 3:30:28

  新增了 “直接调试，跳过编译” 的按钮和功能

• exml 文件代码编辑功能

  • 语法高亮

  • 自动完成

    

  • 错误提示功能

    

  • 常用的代码片段

    

  • 代码格式化功能

• 与 Egret UI Editor 的配合

  调用 Egret UI Editor 打开白鹭项目

• 调用白鹭引擎命令

  调用白鹭引擎的编译 / 清理 / 创建项目等功能

• 调试功能

  运行并调试白鹭项目

• 激活插件

  此插件只有在以下情况才会激活:

  • Visual Studio Code 当前窗口打开了文件夹
  • 文件夹中包含白鹭�项目的 egretProperties.json 文件

  激活完成后窗口右下角状态栏会出现四个按钮 (依次代表 "启动调试服务器", "编译", "清理", "创建新项目" 功能)

  

• 调用 Egret UI Editor 打开项目目录

  在 主菜单 > 查看 > 命令面板 > 选择下图的命令

  

• 调用白鹭引擎命令

  在 主菜单 > 查看 > 命令面板 > 选择下图的命令

  

  或者点击状态栏的对应按钮

• 调试功能

  • 在 Visual Studio Code 中打开你的白鹭项目文件夹。
  • 项目中会包含有.vscode/Launch.json和.vscode/tasks.json两个文件（已有的情况下增量修改，没有的情况下自动创建）。里面分别有Egret WebpackDevServer Debugger和egret: build的配置。
  • 确保./scripts/config.ts中build命令的配置符合如下内容。其中端口号默认为3000，应当与.vscode/Launch.json中Egret WebpackDevServer Debuggerurl地址末尾的端口号一致

  const outputDir = '.';
            return {
                outputDir,
                commands: [
                    new ExmlPlugin('debug'), // 非 EUI 项目关闭此设置
                    new WebpackDevServerPlugin({ //新的 Webpack 编译器
                        libraryType: "debug",
                        defines: { DEBUG: true, RELEASE: false },
                        typescript: { mode: 'legacy' },
                        // open: true,
                        port: 3000
                    }),
                ]
            }

• • 在运行面板的列表中选择 Egret WebpackDevServer Debugger

  

  • 点击开始调试按钮

  • 如果调试启动成功, 会弹出谷歌浏览器环境下白鹭�项目的运行页面, 并开始调试过程

  • 可以在Vscode中进行断点调试。同时浏览器控制台的输出信息会同步显示在调试控制台中

    

• 在 exml 文件编辑中打开 emmet 支持

  进入到 Vscode 的设置界面, 查找 Emmet: includeLanguages 这个设置项, 点击它对应的 在 setting.json 中编辑的连接

  

  在打开的右侧编辑区添加以下设置内容: (表示以 xml 的方式使用 Emmet)

  "emmet.includeLanguages": {
    "exml": "xml"
  }