为 HBuilderX 开发插件提供便利的 cli 工具,根据 package.json 中的 contributes 配置,为 hbuilderx 的命令、视图等 API 提供 id 提示
npm install @tomjs/hbuilderx-cli !node-current (scoped) !license 
> 为 HBuilderX 开发 插件 提供便利的 cli 工具,根据 package.json 中的 contributes 配置,为 hbuilderx 命令、视图 等的 API 提供 id 提示。
``bashpnpm
pnpm add -D @tomjs/hbuilderx-cli
使用
安装后可以使用
hx-cli 命令行运行本 CLI 工具。`bash
生成 d.ts 文件和打包插件Usage
$ hx-cli [options]
dir 指定扩展目录,默认 "extension”
Options
--watch, -w 监听 package.json,生产 d.ts 文件
--pack, -p 生成插件打包文件
--flag, -f 日志标识:time/symbol/none,默认 "time"
--config 指定配置文件,如 "hx-cli.config.mjs"
--verbose 显示更多信息
--help, -h 显示帮助信息
--version, -v 显示版本信息
Examples
$ hx-cli --watch
$ hx-cli --watch --flag=symbol
$ hx-cli --pack
`$3
package.json 的 scripts 中添加以下命令`bash
开发模式,根据 package.json 中 contributes 配置,为 hbuilderx 增加命令、视图等 id 的提示
hx-cli --watch
打包模式,将当前项目打包成插件压缩包
hx-cli --pack
`$3
在
tsconfig.json 中,将 cli 生成的 hbuilderx.d.ts 添加到 include 配置项,tsconfig.json`json
{
"compilerOptions": {
"types": ["@tomjs/hbuilderx/types"]
},
// 添加项目根目录的 hbuilderx.d.ts
"include": ["hbuilderx.d.ts", "src//.ts", "src//.d.ts"]
}
`示例
`ts
import type { ExtensionContext } from 'hbuilderx';
import { isAlphaVersion, setContext } from '@tomjs/hbuilderx';
import { commands, window } from 'hbuilderx';export function activate(context: ExtensionContext) {
setContext(context);
context.subscriptions.push(
// 此处会有命令id提示
commands.registerCommand('tomjs.xxx.showHello', async () => {
window.showInformationMessage(
Hello World!这是 ${isAlphaVersion ? '测试' : '正式'}版本的 HBuilderX。, ['确定1', '取消2']).then((result) => {
window.showInformationMessage(你点击了${result});
});
}),
);
}export function deactivate() { }
`示例
打开 examples 目录,查看
cli 使用示例。- ext-web: 使用 tsdown + typescript 开发
webview 插件
- ext-web-vue: 使用 vite + typescript + vue 创建 webview` 插件