ZC Generator

基于 Git 仓库的 VS Code 代码模板生成工具，支持从远程仓库拉取模板并快速生成标准化代码。

特性

🚀 Git 集成：从远程仓库管理模板
📁 智能识别：自动区分文件夹模板和文件模板
🎨 EJS 引擎：支持变量替换和条件渲染
⚙️ 可视化配置：右键菜单操作，简单易用
🔧 工作区集成：完全融入 VS Code 环境

快速开始

1. 配置模板仓库

右键文件夹 → "ZC Generate Setting" → 配置 Git 仓库地址

2. 生成代码

右键目标文件夹 → "ZC Generate" → 选择模板 → 输入名称

配置结构

工作区配置目录

<workspace>/.zc-generator/          # Git 仓库直接克隆到此目录
├── .git/                          # Git 版本控制信息
├── config.json                    # 插件配置文件
├── templates/                     # 模板目录（来自 Git 仓库）
│   ├── components/                # 组件模板目录
│   ├── pages/                     # 页面模板目录
│   ├── utils/                     # 工具模板目录
│   └── [template-name].ejs        # 单文件模板
├── README.md                      # 仓库说明文件
└── 其他仓库文件...                 # Git 仓库的其他文件

Git 仓库结构要求

您的模板 Git 仓库应该包含一个 templates 目录：

your-template-repo/
├── templates/                     # 必需：模板存储目录
│   ├── react-component/           # 文件夹模板示例
│   ├── vue-component/             # 文件夹模板示例
│   ├── api-service.ts.ejs         # 文件模板示例
│   └── react-hook.ts.ejs          # 文件模板示例
├── README.md                      # 可选：仓库说明
├── package.json                   # 可选：依赖管理
└── 其他文件...                     # 可选：其他仓库文件

配置文件示例 (config.json)

{
  "repositoryUrl": "https://github.com/your-username/your-templates.git",
  "currentVersion": "main",
  "lastUpdateCheck": "2024-01-01T00:00:00.000Z"
}

配置说明：

repositoryUrl: 模板仓库的 Git URL
currentVersion: 当前使用的分支或标签
lastUpdateCheck: 最后一次检查更新的时间戳

配置管理功能：

通过设置界面可视化配置所有选项
支持直接编辑配置文件（选择"打开配置文件"）
自动创建默认配置文件
配置验证和错误处理

模板类型

1. 文件夹模板（Directory Templates）

适用于创建完整的组件或页面结构：

templates/
├── react-component/            # 文件夹模板
│   ├── index.tsx.ejs
│   ├── [name].module.css.ejs
│   ├── types.ts.ejs
│   └── __tests__/
│       └── [name].test.tsx.ejs

使用效果：

用户输入：MyButton
生成结果：创建 MyButton/ 文件夹，包含所有模板文件

2. 文件模板（File Templates）

适用于创建单个文件：

templates/
├── api-service.ts.ejs          # 文件模板
├── react-hook.ts.ejs           # 文件模板
└── utility-function.ts.ejs     # 文件模板

使用效果：

用户输入：useCounter
生成结果：直接在当前目录创建 useCounter.ts 文件

模板变量系统

内置变量

ZC Generator 提供以下内置变量：

{
  name: "myComponent",           // 用户输入的原始名称
  PascalCase: "MyComponent",     // 帕斯卡命名法
  camelCase: "myComponent",      // 驼峰命名法
  kebabCase: "my-component",     // 短横线命名法
  snakeCase: "my_component",     // 下划线命名法
  upperCase: "MYCOMPONENT",      // 全大写
  lowerCase: "mycomponent"       // 全小写
}

文件名变量替换

支持在文件名中使用 [name] 占位符：

templates/
└── component/
    ├── [name].tsx.ejs          # 生成为 MyButton.tsx
    ├── [name].module.css.ejs   # 生成为 MyButton.module.css
    └── [name].test.tsx.ejs     # 生成为 MyButton.test.tsx

模板示例

React 组件模板 (react-component/index.tsx.ejs)

import React from 'react';
import styles from './<%= name %>.module.css';
import { <%= PascalCase %>Props } from './types';

/**
 * <%= PascalCase %> 组件
 */
export const <%= PascalCase %>: React.FC<<%= PascalCase %>Props> = ({
  children,
  className,
  ...props
}) => {
  return (
    <div 
      className={`${styles.<%= camelCase %>} ${className || ''}`}
      {...props}
    >
      {children}
    </div>
  );
};

export default <%= PascalCase %>;

样式模板 (react-component/[name].module.css.ejs)

/* <%= PascalCase %> 组件样式 */
.<%= camelCase %> {
  display: block;
  padding: 16px;
  border-radius: 8px;
  background-color: #f5f5f5;
  transition: all 0.2s ease-in-out;
}

.<%= camelCase %>:hover {
  background-color: #e0e0e0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .<%= camelCase %> {
    padding: 12px;
  }
}

TypeScript 类型定义 (react-component/types.ts.ejs)

import { ReactNode, HTMLAttributes } from 'react';

/**
 * <%= PascalCase %> 组件属性接口
 */
export interface <%= PascalCase %>Props extends HTMLAttributes<HTMLDivElement> {
  /** 子元素 */
  children?: ReactNode;
  /** 自定义类名 */
  className?: string;
  /** 是否禁用 */
  disabled?: boolean;
}

/**
 * <%= PascalCase %> 组件状态接口
 */
export interface <%= PascalCase %>State {
  isLoading: boolean;
  error?: string;
}

测试文件模板 (react-component/tests/[name].test.tsx.ejs)

import React from 'react';
import { render, screen } from '@testing-library/react';
import { <%= PascalCase %> } from '../index';

describe('<%= PascalCase %>', () => {
  it('应该正确渲染', () => {
    render(<<%= PascalCase %>>测试内容</<%= PascalCase %>>);
    expect(screen.getByText('测试内容')).toBeInTheDocument();
  });

  it('应该应用自定义类名', () => {
    const { container } = render(
      <<%= PascalCase %> className="custom-class">内容</<%= PascalCase %>>
    );
    expect(container.firstChild).toHaveClass('custom-class');
  });
});

API 服务模板 (api-service.ts.ejs)

import axios, { AxiosResponse } from 'axios';

/**
 * <%= PascalCase %> API 服务类
 */
export class <%= PascalCase %>Service {
  private readonly baseURL = '/api/<%= kebabCase %>';

  /**
   * 获取 <%= name %> 列表
   */
  async getList(): Promise<<%= PascalCase %>[]> {
    const response: AxiosResponse<<%= PascalCase %>[]> = await axios.get(
      `${this.baseURL}/list`
    );
    return response.data;
  }

  /**
   * 根据 ID 获取 <%= name %>
   */
  async getById(id: string): Promise<<%= PascalCase %>> {
    const response: AxiosResponse<<%= PascalCase %>> = await axios.get(
      `${this.baseURL}/${id}`
    );
    return response.data;
  }

  /**
   * 创建新的 <%= name %>
   */
  async create(data: Create<%= PascalCase %>Request): Promise<<%= PascalCase %>> {
    const response: AxiosResponse<<%= PascalCase %>> = await axios.post(
      this.baseURL,
      data
    );
    return response.data;
  }

  /**
   * 更新 <%= name %>
   */
  async update(id: string, data: Update<%= PascalCase %>Request): Promise<<%= PascalCase %>> {
    const response: AxiosResponse<<%= PascalCase %>> = await axios.put(
      `${this.baseURL}/${id}`,
      data
    );
    return response.data;
  }

  /**
   * 删除 <%= name %>
   */
  async delete(id: string): Promise<void> {
    await axios.delete(`${this.baseURL}/${id}`);
  }
}

// 导出服务实例
export const <%= camelCase %>Service = new <%= PascalCase %>Service();

使用流程

1. 初始配置

打开 VS Code 工作区
右键文件夹选择 "ZC Generate Setting"
选择 "配置Git仓库" 并输入仓库地址
插件自动克隆模板仓库到工作区

2. 生成代码

右键目标文件夹选择 "ZC Generate"
从可用模板列表中选择模板
根据模板类型输入相应名称：
- 文件夹模板：输入文件夹名称（如：my-component）
- 文件模板：输入文件名称（如：MyComponent）
自动生成代码文件和目录结构

3. 设置管理

通过 "ZC Generate Setting" 可以访问以下功能：

配置Git仓库：设置或更改模板仓库地址
更新模板：从远程仓库拉取最新模板
查看状态：显示当前仓库状态和分支信息
打开配置文件：直接编辑 config.json 配置文件

4. 模板更新

定期使用 "更新模板" 功能获取最新模板
支持版本控制和增量更新
自动处理合并冲突和依赖关系

高级特性

条件渲染

在 EJS 模板中使用条件语句：

<% if (name.includes('Modal')) { %>
import { Modal } from 'antd';
<% } %>

export const <%= PascalCase %> = () => {
  <% if (name.includes('Form')) { %>
  const [form] = Form.useForm();
  <% } %>
  
  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
};

循环生成

使用循环生成重复内容：

export interface <%= PascalCase %>Props {
  <% ['id', 'name', 'description'].forEach(field => { %>
  <%= field %>?: string;
  <% }); %>
}

开发

环境要求

Node.js 20.x+
pnpm
VS Code

本地开发

# 克隆项目
git clone <repository-url>
cd zc-generator

# 安装依赖
pnpm install

# 开发模式
pnpm run watch

# 类型检查
pnpm run check-types

# 代码检查
pnpm run lint

# 构建
pnpm run build

项目结构

src/
├── extension.ts              # 扩展入口文件
├── generators/
│   └── simpleGenerator.ts    # 主要生成器逻辑
├── services/
│   ├── configManager.ts      # 配置管理服务
│   ├── gitService.ts         # Git 操作服务
│   └── simpleTemplateService.ts # 模板处理服务
├── types/
│   └── index.ts              # 类型定义
└── utils/
    └── workspaceUtils.ts     # 工作区工具函数

故障排除

常见问题

配置相关

配置文件无法创建：确保工作区文件夹有写入权限
Git 仓库配置失败：检查仓库 URL 格式和网络连接
配置文件损坏：删除 .zc-generator/config.json 重新配置

模板相关

模板仓库克隆失败：
- 检查网络连接和仓库访问权限
- 确认仓库 URL 正确且可访问
- 检查 Git 凭据配置
模板列表为空：
- 确认仓库中存在 templates 目录
- 检查模板文件格式和命名规范
模板生成失败：
- 检查目标目录权限
- 确认模板文件语法正确
- 查看 EJS 模板语法是否有误

权限问题

文件创建失败：确保目标目录有写入权限
Git 操作失败：检查 Git 配置和认证信息

许可证

MIT License

更新日志

v1.0.0

✨ 基础模板生成功能
✨ Git 仓库集成
✨ EJS 模板引擎支持
✨ 文件和文件夹模板识别
✨ 配置管理界面
✨ 直接编辑配置文件功能
✨ 模板更新和状态查看

zc-generator

coderhyh

ZC Generator

特性

快速开始

1. 配置模板仓库

2. 生成代码

配置结构

工作区配置目录

Git 仓库结构要求

配置文件示例 (config.json)

模板类型

1. 文件夹模板（Directory Templates）

2. 文件模板（File Templates）

模板变量系统

内置变量

文件名变量替换

模板示例

React 组件模板 (react-component/index.tsx.ejs)

样式模板 (react-component/[name].module.css.ejs)

TypeScript 类型定义 (react-component/types.ts.ejs)

测试文件模板 (react-component/tests/[name].test.tsx.ejs)

API 服务模板 (api-service.ts.ejs)

使用流程

1. 初始配置

2. 生成代码

3. 设置管理

4. 模板更新

高级特性

条件渲染

循环生成

开发

环境要求

本地开发

项目结构

故障排除

常见问题

配置相关

模板相关

权限问题

许可证

更新日志

v1.0.0