UMAS Project Helper - VSCode Extension

一个专注于前端项目管理的VSCode扩展，提供现代化且响应式的用户界面，旨在简化前端开发工作流程。

🚀 主要特性

💻 现代化React界面

• 基于React 18构建的现代化WebView UI
• 响应式设计，支持各种窗口大小
• 视觉状态指示器（成功/警告/错误/检查中状态）
• 动画效果和流畅的用户体验

📊 实时状态监控

插件提供侧边栏视图，包含实时状态指示器：

• 🔐 登录状态: 检查UMAS平台认证状态
• 📦 依赖状态: 监控node_modules和package.json完整性
• 📖 文档状态: 验证README和相关文档文件
• ⚙️ 环境状态: 验证Node.js、npm和其他必要的开发工具

🎯 快速操作按钮

第一行主要功能（优先级较高）：

• 🔄 Refresh: 刷新所有项目状态
• 🚀 New Project: 使用模板创建新项目
• 📦 Install Deps: 一键安装项目依赖

第二行高级功能：

• ✅ Validate: 全面验证项目健康状态
• 🚢 Deploy: 多平台部署支持

🔍 智能项目验证

• 依赖检查: 验证package.json和实际node_modules
• 文档验证: 检查README.md等文档文件完整性
• 环境验证: 工具链和系统环境检测
• 统一报告: 全局输出渠道(OutputChannel)中显示详细结果

Installation

1. Open VSCode
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "UMAS Project Helper"
4. Click Install
5. Reload VSCode

Usage

🎯 使用方法

插件激活条件

• 插件在VSCode启动完成后自动激活
• 当工作区包含package.json文件时，侧边栏会显示"UMAS Helper"面板
• 如果工作区没有package.json，插件功能将不可用

项目状态监控

1. 打开前端项目: 在包含package.json的VSCode工作区中
2. 自动监测: 插件自动识别并提供状态面板，显示：
   • 🔐 登录认证状态（连接UMAS平台）
   • 📦 依赖安装状态（package.json vs node_modules）
   • 📖 文档完整性（README.md等）
   • ⚙️ 开发环境状态（Node.js、npm等工具）

快速操作按钮

第一排按钮 (优先级操作)：

• 🔄 Refresh: 重新检查所有项目状态
• 🚀 New Project: 从模板初始化新项目
• 📦 Install Deps: 自动安装项目依赖

第二排按钮 (高级操作)：

• ✅ Validate: 执行全面项目验证
• 🚢 Deploy: 多平台部署选项

📋 项目验证功能

验证项目时，插件会：

1. 依赖验证: 检查package.json文件和node_modules目录
2. 文档验证: 查找README.md等文档文件
3. 环境验证: 验证Node.js、npm等必要工具
4. 结果显示: 在UMAS Project Helper输出通道中显示详细结果

输出结果示例:

📋 **Project Validation Results**

**Overall Status:** ✅ PASSED

**Dependencies:** Found 145 dependencies and 12 dev dependencies
**Documentation:** Found 2 documentation files
**Environment:** Environment valid: node, npm, git available

Last updated: 2024-01-15 14:30:25

🚀 项目初始化和部署

初始化项目:

1. 点击"New Project"按钮
2. 选择项目模板
3. 指定项目存放位置
4. 插件自动创建项目结构和安装依赖

部署到UMAS平台:

1. 点击"Deploy"按钮
2. 选择部署类型（构建/Github Pages/Netlify/Vercel/自定义）
3. 插件自动配置并执行部署流程

📜 可用命令

插件提供以下VSCode命令：

• umas-project-helper.checkLogin - 检查UMAS登录状态
• umas-project-helper.checkStatus - 检查并刷新项目状态
• umas-project-helper.initProject - 从模板初始化新项目
• umas-project-helper.installDeps - 安装项目依赖包
• umas-project-helper.validate - 执行全面项目验证
• umas-project-helper.deploy - 部署项目到指定平台

🔧 配置

插件设置

通过VSCode设置面板(Ctrl+,)搜索"UMAS Project Helper"进行配置：

• 自动状态检查: 在启动时自动检查项目状态
• 默认模板: 选择默认的项目初始化模板
• 自定义模板路径: 指定自定义模板存放目录

激活条件

插件在以下情况下激活：

• VSCode启动完成后(onStartupFinished)
• 工作区包含package.json文件时(workspaceContains:package.json)

📋 环境要求

系统要求

• Node.js: >= 16.0.0 (用于扩展后端逻辑)
• npm: >= 8.0.0 (包管理器)
• VSCode: >= 1.80.0 (扩展运行环境)

开发环境依赖

• TypeScript 5.x: 主代码语言
• React 18.x: WebView UI框架
• Biome linter: 代码质量检查
• Biome formatter: 代码格式化

🛠️ 开发环境设置

源码构建

# 克隆项目
git clone https://github.com/zhangj116/frontend-helper-extension.git
cd frontend-helper-extension

# 安装扩展端依赖
npm install

# 编译扩展TypeScript代码
npm run compile

# 构建React WebView界面
npm run build:webview

# 开发模式监听文件变化
npm run watch

项目架构

frontend-helper-extension/
├── src/                    # 扩展主代码 (TypeScript)
│   ├── commands/           # 命令处理函数
│   │   ├── checkStatus.ts          # 状态检查命令
│   │   ├── initProject.ts          # 项目初始化
│   │   ├── installDependencies.ts  # 依赖安装
│   │   ├── validateProject.ts      # 项目验证
│   │   └── deployProject.ts        # 项目部署
│   ├── providers/          # VSCode提供程序
│   │   ├── StatusViewProvider.ts   # 状态视图提供者
│   │   └── TemplateManager.ts      # 模板管理器
│   └── utils/              # 工具函数
│       ├── commandRunner.ts        # 命令行工具
│       ├── fileScanner.ts          # 文件扫描器
│       ├── validationHelper.ts     # 验证助手
│       └── outputChannel.ts        # 输出渠道管理
│   extension.ts           # 扩展入口点
├── webview-ui/            # React WebView界面
│   ├── public/            # 静态资源
│   ├── src/               # React组件
│   │   ├── App.scss       # 主样式 (SCSS)
│   └── scripts/           # 构建脚本
├── media/                 # 图标和资源文件
├── out/                   # 编译输出目录
├── package.json           # 扩展清单文件
├── tsconfig.json          # TypeScript配置
└── biome.jsonc            # Biome格式化和lint配置

开发脚本说明

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions:

1. Check the Issues page on GitHub
2. Create a new issue with detailed information
3. Include VSCode version, extension version, and error logs

📝 更新日志

v0.0.2 (当前版本)

• ✨ 完成静态类向函数模块的重构，解决Biome linter警告
• 🔧 优化 OutputChannel 管理，全插件生命周期全局可用
• 📱 改进UI响应式设计，确保按钮在小窗口中完全可见
• 🐛 修复 Windows 环境 which 命令兼容性问题
• 🎨 重构React WebView UI，采用现代组件架构
• ⚡ 性能优化，移除冗余代码，提高构建速度

v0.0.1

• 🎉 首次发布
• 💻 React 18 + TypeScript WebView UI
• 📊 实时项目状态监测（登录/依赖/文档/环境）
• ✅ 智能项目验证系统
• 🚀 多平台部署支持（GitHub Pages/Netlify/Vercel）
• ⚙️ Windows命令兼容性支持

🚀 未来计划

🔥 高优先级功能

• [ ] 项目模板管理系统 (React/Vue/Vanilla模板)
• [ ] 自定义模板创建向导
• [ ] 高级部署配置 (CI/CD集成)

⚡ 中优先级优化

• [ ] NPM Proxy Registry 自动配置
• [ ] 项目分析报告 (依赖树/包大小/安全扫描)
• [ ] 多语言支持 (中文/英文界面切换)

🎯 未来远期功能

• [ ] 团队协作特性 (共享配置/模板)
• [ ] 智能代码重构建议
• [ ] 集成流行前端工具 (ESLint/Prettier/Vite等)

Made with ❤️ for frontend developers