README.md

awtk vscode plugin

1. 介绍

1.1 AWTK XML UI 预览插件

AWTK XML UI 预览插件：在 vscode 中实时预览 AWTK XML UI 文件。主要特色：

• 真实的 UI 效果。
• 可以设置主题，方便查看在不同主题下界面的效果。
• 可以设置语言，方便查看在不同语言环境下界面的效果。
• 可以设置屏幕大小，方便查看在不同屏幕大小下界面的效果。

已知问题：

• 主题切换暂未实现。
• 暂不支持自定义控件。
• 不支持 include 指令。

1.2 自动补全插件

智能提示控件的名称、属性和属性的取值。主要特色：

• 输入'<'时自动提示控件的 tag 名。

• 输入空格时提示当前控件的属性名列表。

• 输入引号时提示当前控件当前属性的取值列表 (TODO)。

2. 编译插件

2.1 安装 vsce

npm install -g vsce

2.1 安装 typescript

npm install -g typescript

2.1 安装 types/[email protected]

在awtk-vscode-plugin目录下打开终端，执行以下命令：

npm install @types/[email protected]

2.2 编译

vsce package

生成文件 awtk-preview-completion-0.0.1.vsix，用 vscode 安装该文件即可。

3. 运行

3.1 运行服务

编译和运行 preview 服务，请参考 awtk-previewer

3.2 激活插件

• 通过 shift+ctrl+p 激活命令控制台

• 运行 AWTK : Preview UI XML

3.2 调试运行

• Open this example in VS Code 1.47+
• npm install
• npm run watch or npm run compile
• F5 to start debugging

In the new vscode instance:

• Press shortcut shift+ctrl+p to activable command console

• Run the AWTK : Preview UI XML to create the webview.

4. 常见问题

• Windows 下如何查看 previewer 使用的 8000 端口是否被占用

• 端口冲突如何处理