ArkTS Component Generator 插件横空出世

ArkTS Component Generator

一个给 DevEco Studio 用的小插件，作用是快速生成 ArkTS 组件骨架代码。灵感来自 Flutter 生态里的 "New Widget" 插件：弹个对话框，填个名字，选好模式，代码就插到光标所在的地方，不用自己一行行敲 @Component、build() 那些样板。

插件支持鸿蒙状态管理的 V1 和 V2 两种写法，V2 用的是官方现在推的 @ComponentV2 + @Local 范式。

1下载地址

ArkTS 组件生成器

2 安装

下载 dist 目录下的 zip 包，然后在 DevEco Studio 里：

File → Settings → Plugins
点右上角齿轮图标，选 Install Plugin from Disk...
选中 ArkTSComponentGenerator-1.0.0.zip，确定
重启 IDE

macOS 对应的路径是 DevEco Studio → Preferences → Plugins，其余一样。

装好后不用做任何配置，打开 .ets 文件就能用。IntelliJ IDEA、WebStorm 这些 JetBrains 系 IDE 也能装（插件只依赖 platform 模块），Marketplace 上架后可以直接在插件市场里搜到。

3 怎么用

把光标停在 .ets 文件里你想插入代码的位置，然后三选一：

按 Alt + Insert，在 Generate 菜单里选 ArkTS Component...
编辑器里右键，菜单最后一项就是它
快捷键 Ctrl + Alt + Shift + K

只有打开 .ets 文件时这个入口才会出现，别的类型文件里看不到，这是刻意这么设计的。

弹出来的对话框长这样：

java 复制代码

Component name:   [ MyComponent          ]
Component mode:   ( ) @Component (V1 状态管理)
                  (*) @ComponentV2 (V2 状态管理)
[x] 生成 @Entry 页面入口
[x] 携带示例状态变量（@Local）

几个选项的意思：

Component name

组件名，也就是 struct 后面的名字。填的时候不用管大小写，插件会自动把首字母转成大写。校验也在这里做------如果填了非法标识符（比如以数字开头、带了横杠），点 OK 时会在对话框里直接报错，不会往文件里塞坏代码。

Component mode

两种模式选一个：

V1：生成 @Component，状态变量用 @State
V2：生成 @ComponentV2，状态变量用 @Local

两种模式生成的 build() 结构完全一样，差别只在装饰器上。选 V2 的时候下面那个状态变量复选框的文字会跟着变成 @Local，免得看混。

生成 @Entry 页面入口

勾选 = 生成一个完整页面，带 @Entry 前缀，根容器是 RelativeContainer，里面一个居中显示的 Text，和 DevEco 新建 Page 时给的默认模板一个风格。

不勾 = 生成普通自定义组件，根容器换成 Column，适合往里塞业务 UI。

携带示例状态变量

勾选后会给组件加一个 message 字段（V1 是 @State，V2 是 @Local，初始值 'Hello World'），Text 的内容绑成 this.message。不勾的话组件是空的，Text 直接显示组件名。

插入位置的一些细节

代码插入光标处，整体缩进跟光标所在行对齐，放在 struct 外面或者另一个组件里面都可以
如果光标那一行前面已经有代码，插件会先换行再插入，不会跟已有代码挤在一行
每次插入完光标停在生成代码的末尾，方便接着改

生成的代码长什么样

V1 页面（@Entry + @State）

less 复制代码

@Entry
@Component
struct TestComponent {

  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
        })
    }
    .height('100%')
    .width('100%')
  }
}

V2 页面（@Entry + @Local）

less 复制代码

@Entry
@ComponentV2
struct TestComponent {

  @Local message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
        })
    }
    .height('100%')
    .width('100%')
  }
}

V2 自定义组件（不带 @Entry）

scss 复制代码

@ComponentV2
struct MyComponent {

  @Local message: string = 'Hello World';

  build() {
    Column() {
      Text(this.message)
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
    }
    .height('100%')
    .width('100%')
  }
}

V1 的自定义组件就是把装饰器换成 @Component / @State，其余一样，不重复贴了。

常见问题

Generate 菜单里找不到 ArkTS Component...

先确认打开的是 .ets 文件。插件只对 ArkTS 文件启用，这是 update() 里写死的判断。文件类型没错的话，重启一次 IDE 试试。

生成之后报编译错误

检查下项目里有没有 app.float.page_text_font_size 这个资源------它是 DevEco 新建项目自带的，老项目或者从别处拷来的文件可能没有。没有的话把 fontSize 那行改成具体数值就行，比如 .fontSize(16)。

想改默认模板

模板都在 CodeTemplateFactory.java 里，每个选项组合对应一个分支，改完重新跑一遍 build.py 就能出新的包。签名发版需要用到 cert/ 目录下的密钥，操作步骤见 PUBLISHING.md。

怎么卸载

Settings → Plugins 里找到 ArkTS Component Generator，点卸载，重启。

DevEco Studio 版本要求

在 DevEco Studio 6.1.x 上编译测试的（平台构建号 243.24978）。plugin.xml 里 since-build 写的是 243，理论上同平台版本都能用，更低版本没验证过。

从源码构建

工程里没有用 Gradle，编译直接借 DevEco Studio 自带的 JDK：

复制代码

python build.py

脚本干三件事：用 E:\DevEco Studio\jbr 下的 javac 编译（classpath 指向 DevEco 的 platform jar），打插件 jar，再打成可安装的 zip，产物在 dist/ 目录。

DevEco Studio 装在别的位置的话，设一下环境变量再跑：

ini 复制代码

set DEVECO_HOME=D:\你的路径\DevEco Studio
python build.py

dist/ 里两种包的区别：ArkTSComponentGenerator-1.0.0.zip 是原始包，本地装这个就够；带 -signed 后缀的是用 JetBrains 官方工具签过名的，给 Marketplace 上传用。

工程结构

bash 复制代码

src/com/harmony/componentgen/
├── GenerateComponentAction.java   菜单注册、文件类型判断、往光标处插代码
├── ComponentGeneratorDialog.java  弹窗：名称、V1/V2、@Entry、状态变量
├── CodeTemplateFactory.java       所有代码模板在这
└── TemplateOptions.java           弹窗选项的数据结构
resources/
├── META-INF/plugin.xml            插件清单
└── icons/pluginIcon.svg
cert/                              签名密钥（别提交到任何仓库）
tools/                             marketplace-zip-signer 签名工具
build.py                           构建脚本
PUBLISHING.md                      Marketplace 上架手册

最后总结

这个插件灵感来自Flutter框架的里面的 WidgetGenerator, 所以我就重新写了一个arkts 版本的也是帮助大家在创建ArkUI基础界面的时候更加的快捷的和方便也在希望各位同学能多多支持鸿蒙生态，希望能帮助各位开发者和学生。如果觉得不错可以给我一个star

源码地址

github.com/xq19930522/...