ArkTS Component Generator

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

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

1下载地址

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 文件时这个入口才会出现，别的类型文件里看不到，这是刻意这么设计的。

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

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

• V1：生成 @Component ，状态变量用 @State

• V2：生成 @ComponentV2 ，状态变量用 @Local

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

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

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

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

插入位置的一些细节

• 代码插入光标处，整体缩进跟光标所在行对齐，放在 struct 外面或者另一个组件里面都可以

• 如果光标那一行前面已经有代码，插件会先换行再插入，不会跟已有代码挤在一行

• 每次插入完光标停在生成代码的末尾，方便接着改

生成的代码长什么样

V1 页面（@Entry + @State）

@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）

@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）

@ComponentV
2
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 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 装在别的位置的话，设一下环境变量再跑：

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

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

工程结构

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/…

转载声明：本文为转载整理，原文版权归原作者及原站点所有。

原文来源：Juejin HarmonyOS

原创地址：https://juejin.cn/post/7694106511605448730