XTaro Component Creator - VSCode 插件

快速创建标准化的 XTaro 组件

功能特性

🎨 可视化创建组件

• 交互式表单输入
• 实时验证组件名称
• 智能类型选择
• 自动生成标准代码结构

🚀 便捷操作

• 命令面板：Ctrl+Shift+P → 搜索 "XTaro"
• 右键菜单：在 packages 目录上右键 → "创建 XTaro 组件"
• 快捷键：自定义快捷键绑定

📦 组件类型支持

• 基础工具组件 (Level 1): 提供基础UI和工具
• 页面容器组件 (Level 2): 页面框架和布局
• 业务组件 (Level 3): 具体业务功能实现

⚙️ 配置选项

• xtaro.defaultAuthor: 默认作者名称
• xtaro.autoInstallDependencies: 自动安装依赖
• xtaro.componentPrefix: 组件名称前缀

使用方法

方式一：命令面板

1. 按 Ctrl+Shift+P (Mac: Cmd+Shift+P)
2. 输入 "XTaro: 创建组件"
3. 按提示输入组件信息
4. 等待组件生成完成

方式二：右键菜单

1. 在文件资源管理器中找到 packages 目录
2. 右键点击 → 选择 "创建 XTaro 组件"
3. 按提示输入组件信息

方式三：列出所有组件

1. 按 Ctrl+Shift+P
2. 输入 "XTaro: 列出所有组件"
3. 选择组件快速打开

安装

从源码安装

cd .vscode-extension
npm install
npm run compile
npm run package

然后在 VSCode 中安装生成的 .vsix 文件。

开发调试

1. 在 VSCode 中打开 .vscode-extension 目录
2. 按 F5 启动调试
3. 在新窗口中测试插件功能

配置示例

{
  "xtaro.defaultAuthor": "your-name",
  "xtaro.autoInstallDependencies": true,
  "xtaro.componentPrefix": "xtaro-component-nf-"
}

截图

创建组件流程

组件列表

要求

• VSCode 版本 >= 1.80.0
• Node.js 环境
• XTaro 组件库项目

技术栈

• TypeScript
• VSCode Extension API
• Node.js

贡献

欢迎提交 Issue 和 Pull Request！

License

ISC