自动组件创建器 (Auto Component Creator)

用于自动创建React组件文件夹和模板文件的VS Code扩展。

功能特点

• 创建组件文件夹和index.tsx文件
• 自动生成React组件模板
• 可选择是否添加组件到pageConfig.ts
• 支持通过右键菜单快速创建组件
• 可自定义组件模板

使用方法

通过命令面板

1. 按下 F1 或 Ctrl+Shift+P 打开命令面板
2. 输入"创建组件"并选择该命令
3. 输入组件名称（例如："macau-law"）
4. 输入路径名称（例如："about/macau_law"）
5. 选择是否添加组件到pageConfig.ts

通过右键菜单

1. 在文件资源管理器中，右键点击任何文件夹
2. 从菜单中选择"创建组件"
3. 输入组件名称和路径信息
4. 组件将创建在您右键点击的文件夹内

工作流程

graph TD
    A["打开命令面板<br/>或右键点击文件夹"] --> B["选择'创建组件'"]
    B --> C["输入组件名称<br/>(例如：macau-law)"]
    C --> D["输入路径名称<br/>(例如：about/macau_law)"]
    D --> E{"是否添加到<br/>pageConfig.ts?"}
    E -->|是| F["更新pageConfig.ts"]
    E -->|否| G["跳过更新配置"]
    F --> H["创建组件文件夹"]
    G --> H
    H --> I["生成index.tsx"]
    I --> J["在编辑器中打开文件"]

扩展设置

• autoComponentCreator.autoAddToPageConfig: 启用/禁用自动添加到pageConfig.ts
• autoComponentCreator.pageConfigPath: pageConfig.ts文件的路径
• autoComponentCreator.componentTemplate: 自定义组件模板，使用{{componentName}}作为组件名占位符

安装方法

1. 从发布页下载.vsix文件
2. 在VS Code中，打开扩展视图
3. 点击"..."菜单，选择"从VSIX安装"
4. 选择下载的.vsix文件

开发者指南

设置环境

# 克隆仓库
git clone https://github.com/yourusername/auto-component-creator.git
cd auto-component-creator

# 安装依赖
npm install

开发

1. 在VS Code中打开项目
2. 按F5开始调试
3. 这将打开一个新的VS Code窗口，其中已加载扩展
4. 使用命令面板(F1)并输入"创建组件"来测试扩展

构建扩展

# 编译扩展
npm run compile

# 打包扩展
npx vsce package

组件结构示例

扩展创建的组件具有以下结构:

src/
  components/
    macau-law/
      index.tsx

生成的组件看起来像这样:

const MacauLaw = () => {
  return (
    <div>MacauLaw</div>
  )
}

export default MacauLaw