Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>cgatNew to Visual Studio Code? Get it now.
cgat

cgat

baobaodz

|
5 installs
| (0) | Free
Custom Generate Angular Template
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

以下是完善后的 README.md 内容,结合插件功能与代码结构优化:

CGAT - Angular组件生成助手(自用)

配置界面配置界面

CGAT (Custom Generate Angular Template) 是一个高效的 VS Code 扩展,专为快速生成企业级Angular组件模板而设计,支持模块化架构与可视化配置。

🌟 核心功能

一键生成

  • 右键生成:在资源管理器目录右键 → Generate Angular Component
  • 模块化生成:自动创建组件/模块/路由/服务文件
  • 智能关联:自动检测最近模块并注入声明

可视化配置

  • Airbnb风格界面:沉浸式配置体验
  • 动态预览:实时查看生成的文件目录结构
  • 配置继承:自动记忆用户偏好设置

企业级模板

  • 预置功能模块:
    ├─ 筛选配置(企业/日期/高级筛选)
    ├─ 操作按钮(新增/删除/导入/导出)
    ├─ 表格功能(多选/编辑/删除)
    └─ 详情弹窗(抽屉/模态框)
    

🚀 快速开始

安装

  1. VS Code扩展市场搜索 cgat
  2. 点击安装,或手动安装 最新Release包

使用

  1. 右键生成

    • 在目标目录右键 → Generate Angular Component
    • 在配置面板设置参数 → 点击生成
  2. 命令调用

    Ctrl+Shift+P → 输入命令:
    - "Generate Angular Component" : 生成组件
    - "Open CGAT Config"           : 打开全局配置
    

配置示例

// .vscode/settings.json
{
  "cgat.selectorPrefix": "yzf",
  "cgat.componentConfig": {
    "pre": { "generateModule": true },
    "filters": { "hasAdvancedFilter": true },
    "buttons": { "hasExportButton": true }
  }
}

🛠️ 高级功能

模块化架构

生成结构示例:
your-module/
├─ your-module.module.ts         # 模块文件
├─ your-module.service.ts        # 服务文件
├─ your-component/               # 组件目录
│  ├─ detail/                    # 详情子组件
│  └─ *.component.[ts|html|less] 
└─ your-module.const.ts          # 常量定义

智能代码注入

  • 自动更新模块声明:
    // 自动注入组件声明
    @NgModule({
      declarations: [
        ExistingComponent,
        YourNewComponent // ← 自动添加
      ]
    })
    

🎨 界面特性

功能 说明
动态路径预览 彩色标识已存在/新增文件
配置联动 启用"新增按钮"自动显示详情配置
企业级校验 强制组件名称kebab-case格式

🤝 贡献

欢迎通过以下方式参与改进:

  • 提交 Issue 报告问题
  • Fork仓库并提交PR
  • 补充单元测试(test/ 目录)

📜 许可证

MIT License © baobaodz

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft