Egretia Has Officially Launched Its VSCode Plugin — Egretia Coder

Published in

Egretia

4 min readNov 3, 2020

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.

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

>hints

> snippets code

>formatting

> 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

Setup

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

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

5. Restart VSCODE

Get app from APP Store

Search and install Egretia Coder in the app store of VSCode

Features

Call Egretia UI Editor and open the directory

Menu > View > Command > Select the following command

Call Egretia engine

Menu> View > Command panel > select the following command

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 {

outputDir,

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.