TMG VSCode Extension
一个功能丰富的 VSCode 扩展，为开发者提供智能开发工具和项目管理功能。
🚀 功能特性
📝 开发工具
- 创建工程: 快速创建和初始化新项目
- 智能导入: 智能组件导入和依赖管理
- 数据 Mock: 便捷的数据模拟工具
- 代码片段: 自定义代码片段管理和自动补全
🔧 项目管理
- 发布管理: 项目发布和版本管理
- 批量更新: 批量更新项目依赖和配置
- Git 监控: 实时监控 Git 状态和分支变化
- 编辑器监控: 文件编辑状态实时跟踪
👤 用户系统
- 用户认证: 支持用户登录和状态管理
- 个人配置: 个性化设置和数据存储
📦 安装
从 VSCode 市场安装
- 打开 VSCode
- 进入扩展市场 (Ctrl+Shift+X)
- 搜索 "tmg-vscode-extension"
- 点击安装
手动安装
- 下载
.vsix 文件
- 在 VSCode 中按
Ctrl+Shift+P
- 输入 "Extensions: Install from VSIX"
- 选择下载的
.vsix 文件
🎯 使用方法
启动扩展
安装完成后，扩展会自动激活。您可以在 VSCode 左侧活动栏中看到 TMG 扩展图标。
主要功能使用
1. 创建工程
- 点击侧边栏中的 "开发" 标签
- 选择 "创建工程" 子标签
- 填写项目信息并创建
2. 智能导入
- 在 "开发" > "智能导入" 中
- 搜索需要的组件或库
- 一键导入到当前项目
3. 代码片段管理
- 在 "开发" > "Snippets" 中管理代码片段
- 支持自定义代码片段的创建、编辑和删除
- 在编辑器中自动补全
4. 项目发布
- 在 "发布" 标签中管理项目发布
- 支持版本控制和发布流程
⚙️ 配置
扩展提供以下配置选项：
命令面板命令
TMG: Open External URL - 打开外部链接TMG: Start Node Server - 启动 Node 服务器TMG: Stop Node Server - 停止 Node 服务器
快捷键
扩展会自动注册相关快捷键，您也可以在 VSCode 设置中自定义。
🛠️ 开发
环境要求
- Node.js >= 16.0.0
- VSCode >= 1.68.0
- pnpm (推荐) 或 npm
本地开发
# 克隆项目
git clone git@gitlab.alibaba-inc.com:tmg-cli/tmg-vscode-extension.git
# 安装依赖
tnpm install
# 发布
vsce publish
项目结构
├── src/
│ ├── extension/ # 扩展主逻辑
│ │ ├── extension.ts # 扩展入口
│ │ ├── provider.ts # WebView 提供者
│ │ ├── handler.ts # 消息处理器
│ │ └── feature/ # 功能模块
│ └── webview/ # WebView 界面
│ ├── home.tsx # 主界面
│ ├── mods/ # 功能模块
│ └── components/ # 通用组件
├── package.json # 扩展配置
└── webpack.config.js # 构建配置
技术栈
- 前端: React 18 + TypeScript + Ant Design
- 后端: VSCode Extension API
- 构建: Webpack 5
- 样式: CSS + Styled Components
| |
