Forge VSCode Extensions

A VSCode extension that helps migrate legacy UI components to Forge components with AI-powered assistance.

Features

• 🔍 Component Detection: Automatically detects legacy components that can be migrated to Forge
• 🎯 Smart Highlighting: Highlights detected components in your code
• 🤖 AI-Powered Migration: Uses AI to generate migration suggestions
• 📖 Documentation Links: Quick access to Forge component documentation
• ⚡ Interactive Preview: Preview migrations before applying them

Getting Started

Prerequisites

• Node.js (v14 or higher)
• VSCode (v1.60 or higher)

Installation & Development

1. Clone the repository

2. Install dependencies:

   npm install
   

3. Open the project in VSCode

4. Press F5 to run the extension in a new Extension Development Host window

5. Open a project with OCL components to test

Usage

1. Activate the extension: Press Ctrl+F R G to toggle Forge Migration on/off
2. Detect components: Open any React/TypeScript file - compatible components will be highlighted
3. Migrate components:
   • Use Ctrl+. on highlighted components for quick actions
   • Or hover for context menu options
4. View documentation: Click "Open Documentation" to view Forge component docs

Supported File Types

• .tsx - TypeScript React
• .jsx - JavaScript React
• .ts - TypeScript
• .js - JavaScript

Commands

• Ctrl+F R G - Toggle Forge Migration extension
• Ctrl+. - Show quick actions for detected components
• Forge Migration: Open Settings - Open configuration settings

Configuration

The extension can be configured through VS Code settings. Access these via:

• Command Palette: Forge Migration: Open Settings
• VS Code Settings: Search for "Forge Migration"

Available Settings

Supported AI Models

The extension uses GitHub Copilot to access multiple AI model families:

• GPT Models: gpt-4o, gpt-4.1, gpt-4
• Gemini Models: gemini-2.5-pro
• Claude Models: claude-sonnet-4.5, claude-sonnet-4

Workspace Root Configuration

The workspaceRoot setting allows you to override where the extension looks for migration guides.

Migration Guides

The extension looks for component-specific migration guides in the configured path. Guide files should:

• By default be linked to the migration guides in dh-forge
• Follow the naming pattern: {ComponentName}.migration.md
• Contain markdown with migration instructions for the AI

Default guide location (from dh-forge package):

workspace-root/
└── node_modules/dh-forge/dist/migration/  # Default guides path
    ├── Button.migration.md
    ├── Input.migration.md
    └── Modal.migration.md

Development

The extension is built with:

• TypeScript
• VSCode Extension API
• AI Language Models for migration assistance

Project Structure

src/
├── index.ts                 # Main extension entry point
├── utils/
│   ├── componentDetector.ts # Component detection logic
│   ├── componentHighlighter.ts # Visual highlighting
│   ├── codeActionProvider.ts # Quick actions
│   └── migrationProvider.ts # AI migration logic

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test with F5
5. Submit a pull request