UMAS Project Helper - VSCode Extension

A comprehensive VSCode extension for frontend project template management with automation capabilities, designed to streamline frontend development workflows.

Features

🎯 Core Functionality

• Project Template Management: Create new projects from pre-configured templates (React + Vite, Vue + Vite, Vanilla JavaScript)
• Status Monitoring: Real-time monitoring of login status, dependencies, documentation, and environment
• One-Click Deployment: Deploy projects to multiple platforms (GitHub Pages, Netlify, Vercel, custom)
• Project Validation: Comprehensive validation of project structure, dependencies, and documentation
• Dependency Management: Automated installation and management of project dependencies

📊 Status Dashboard

The extension provides a sidebar view with real-time status indicators:

• Login Status: Check authentication state
• Dependencies: Monitor node_modules and package.json
• Documentation: Validate README and documentation files
• Environment: Verify Node.js, npm, and required tools

🚀 Quick Actions

• Initialize Project: Create new projects from templates
• Install Dependencies: One-click npm install
• Validate Project: Comprehensive project health check
• Deploy Project: Multi-platform deployment options

Installation

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

Usage

Creating a New Project

1. Open the UMAS Project Helper panel from the sidebar
2. Click "Initialize Project from Template"
3. Select your preferred template (React + Vite, Vue + Vite, or Vanilla JavaScript)
4. Choose the destination folder
5. The extension will:
   • Create project structure
   • Generate necessary files
   • Install dependencies
   • Initialize Git repository

Project Status Monitoring

1. Open any frontend project in VSCode
2. The extension automatically checks:
   • Login/authentication status
   • Environment setup (Node.js, npm)
   • Dependencies installation
   • Documentation completeness

Project Validation

1. Click "Validate Project" to run comprehensive checks
2. View detailed results in the output panel
3. Get actionable recommendations for improvements

Deployment

1. Click "Deploy Project"
2. Choose your deployment platform:
   • Build for Production: Local build only
   • GitHub Pages: Deploy to GitHub Pages
   • Netlify: Deploy to Netlify
   • Vercel: Deploy to Vercel
   • Custom: Run custom deployment commands

Project Templates

React + Vite

• Modern React 18 with TypeScript
• Vite for fast development and building
• ESLint and Prettier configuration
• Hot Module Replacement (HMR)

Vue + Vite

• Vue 3 with Composition API
• Vite for optimal build performance
• TypeScript support
• Vue Router and Pinia setup

Vanilla JavaScript

• Modern ES modules
• Vite for development and building
• No framework overhead
• Ready for progressive enhancement

Commands

The extension provides the following commands:

• umas-project-helper.checkLogin - Check login status
• umas-project-helper.checkStatus - Check project status
• umas-project-helper.initProject - Initialize project from template
• umas-project-helper.installDeps - Install dependencies
• umas-project-helper.validate - Validate project
• umas-project-helper.deploy - Deploy project

Configuration

Extension Settings(TODOLIST)

Access settings via VSCode Settings (Ctrl+,) and search for "UMAS Project Helper":

• umas-project-helper.autoCheckStatus: Automatically check status on startup (default: true)
• umas-project-helper.defaultTemplate: Default project template
• umas-project-helper.customTemplates: Path to custom template directory

Project Configuration

Each generated project includes:

• package.json with appropriate dependencies
• vite.config.ts for build configuration
• index.html as entry point
• Source files based on selected template
• .gitignore for version control

Requirements

• Node.js: >= 16.0.0
• npm: >= 8.0.0
• VSCode: >= 1.80.0

Development

Building from Source

# Clone the repository
git clone <repository-url>
cd frontend-helper-extension

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch mode for development
npm run watch

Project Structure

frontend-helper-extension/
├── src/
│   ├── commands/           # Command handlers
│   ├── providers/          # Core providers
│   ├── utils/             # Utility functions
│   └── extension.ts       # Extension entry point
├── webview-ui/            # React-based webview UI App
│   ├── public/            # Static assets
│   └── src/               # React components
├── media/                 # Icons and assets
├── out/                   # Compiled JavaScript
├── package.json           # Extension manifest
├── tsconfig.json          # TypeScript configuration
└── README.md             # This file

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

Changelog

v0.0.1

• Initial release
• Project template management
• Status monitoring and validation
• Multi-platform deployment support
• Comprehensive project validation

Roadmap

• [ ] Additional project templates (Next.js, Nuxt.js, Svelte)
• [ ] Custom template creation wizard
• [ ] Advanced deployment configurations
• [ ] Integration with popular frontend tools
• [ ] Project analytics and insights
• [ ] Team collaboration features

Made with ❤️ for frontend developers