VSCode插件安装

概述

白鹭推荐开发者使用 VSCode 作为集成开发环境。在 Egret Launcher 1.2.3 版本之后，默认使用 VSCode 打开 Egret 项目。

VSCode 介绍

Visual Studio Code (简称 VSCode / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流开发语言的语法高亮、智能代码补全等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。

Egret Coder 插件介绍

Egret Coder 是白鹭为 EUI 项目开发的一款 VSCode 插件，主要包含以下功能：

  • exml 文件代码编辑功能
    • 语法高亮
    • 自动完成
    • 错误提示功能
    • 常用的代码片段
    • 代码格式化功能
  • 调用 Egret UI Editor 打开白鹭项目
  • 调用白鹭引擎的编译 / 清理 / 创建项目等功能
  • 运行并调试白鹭项目

安装

本地安装

  1. 下载插件并解压缩
  2. 打开VSCODE
  3. 点开侧栏中的扩展面板

  1. 点击面板右上方视图和更多操作按钮，选择从VSIX安装，选择本地的插件安装包进行安装

  1. 重启VSCODE

通过应用商店安装

在VSCode中的应用商店中搜索并安装Egret Coder

功能

调用 Egret UI Editor 打开项目目录

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

img

调用白鹭引擎命令

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

img

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

断点调试

插件会在激活时自动检测当前文件夹是否为eui项目（根目录下是否有egretProperties.json），然后自动配置./vscode中的launch.json和tasks.json

  1. 打开一个eui项目文件夹
  2. 打开./scripts/config.ts文件，确保build命令的配置包含如下内容
const outputDir = '.';
            return {
                outputDir,
                commands: [
                    new ExmlPlugin('debug'), // 非 EUI 项目关闭此设置
                    new WebpackDevServerPlugin({ //新的 Webpack 编译器
                        libraryType: "debug",
                        defines: { DEBUG: true, RELEASE: false },
                        typescript: { mode: 'legacy' },
                        open: false,
                        port: 3000
                    }),
                ]
            }

注意：默认端口号为3000，如果需要修改端口号，请同步修改./vscode/launch.json中Egret WebpackDevServer Debugger的uri以及./scripts/config.ts的上述内容中的端口号

  1. 在侧栏中的运行面板选择Egret WebpackDevServer Debugger，按F5进行调试。支持在 VSCode 中进行断点调试，同时浏览器控制台输出的信息会同步显示在调试控制台中。

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

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

img

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

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

按键绑定

下表中的 cmd 键在 Windows 平台是 ctrl 键

按键功能
cmd+alt+n创建新项目
cmd+alt+p发布项目
cmd+alt+u运行项目
cmd+alt+b编译项目
cmd+alt+c清理项目
cmd+alt+e启动 Egret UI Editor 打开项目
cmd+alt+s启动调试服务器