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

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

断点调试

info

插件会在激活时自动检测当前文件夹是否为eui项目(根目录下是否有egretProperties.json),然后自动配置./vscode中的launch.jsontasks.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.jsonEgret WebpackDevServer Debuggeruri以及./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启动调试服务器