跳到主要内容

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启动调试服务器