Egretia Has Officially Launched Its VSCode Plugin — Egretia Coder

Image for post

Egretia Coder is officially released! As a plugin for Egretia UI Editor, Egretia Coder functions as exml file code editor, an adaptor for Egretia UI Editor, the invocation of Egretia Engine and debugging, which helps developers boost the productivity in using EUI and VSCode.

Image for post

It’s recommended that developers utilize VSCode as an integrated development environment (IDE). By default, VSCode has been used to access Egretia project automatically since Egretia Launcher 1.2.3.

Introduction of VSCode

Visual Studio Code (VS Code/VSC) is a lightweight and free code editor which is built on open source. It comes with supports for syntax highlighting and smart completions based on the mainstream programming languages, along with the extensions. It is optimized for both web development and cloud application development.

Introduction of Egretia Coder

Egretia Coder is a VSCode plugin for EUI project. Its features include, but not limited to:

>exml file code editing

>syntax highlighting

>smart completions


> snippets code


> access a project in Egretia by invoking Egretia UI Editor

> call the compiling/cleanup/creation functions of Egretia Engine

>run and call project in Egretia


Local installation

1. Download the plugin and unzip the files

2. Open VSCODE

3. Open the extension page by clicking the icon on the sidebar

Image for post

4. Click the view and more buttons on the upper right of the panel, and select installation from VSIX and then choose the local plug-in installation package to set up

Image for post

5. Restart VSCODE

Get app from APP Store

Search and install Egretia Coder in the app store of VSCode

Image for post


Call Egretia UI Editor and open the directory

Menu > View > Command > Select the following command

Image for post

Call Egretia engine

Menu> View > Command panel > select the following command

Image for post

Or click the corresponding button on the status bar

Breakpoints debugging

INFO: Plugin will automatically detect whether the current folder is EUI (egretProperties.json) once it’s activated, then configure launch.json and tasks.json in ./vscode

1. Open a file of EUI project

2. Open ./scripts/config.ts file and make sure that build command has been deployed by the following content

const outputDir = ‘.’;

return {


commands: [

new ExmlPlugin(‘debug’), // 非 EUI 项目关闭此设置

new WebpackDevServerPlugin({ //新的 Webpack 编译器

libraryType: “debug”,

defines: { DEBUG: true, RELEASE: false },

typescript: { mode: ‘legacy’ },

open: false,

port: 3000




Note: By default, the port number is 3000. Please revise uri of Egret WebpackDevServer Debugger in ./vscode/launch.json and the corresponding content in ./scripts/config.ts if you want to edit the port number.

3. Select Egret WebpackDevServer Debugger on the sidebar’s runtime panel, press F5 to debug. When you execute the breakpoint debugging in VSCode, the output information of browser console can be displayed on the debugging console simultaneously.

Image for post
Image for post

Run emmet in exml files editing

Find out Emmet: includeLanguages in the settings of VSCode, then edit the corresponding content to connect in setting.json

Image for post

Add the following content in the popup panel: (run Emmet by xml)

“emmet.includeLanguages”: {

“exml”: “xml”


Keyboard shortcuts

The ‘cmd’ contained in the following table is key ‘ctrl’ in Windows

Image for post

Stay tuned for updates from the Egretia official channels below so that you can be involved in all the exciting things to come!

Egretia Telegram:

Egretia Twitter

Egretia Website: