# vsc-plugin-template-react

**Repository Path**: chenxigeng/vsc-plugin-template-react

## Basic Information

- **Project Name**: vsc-plugin-template-react
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-24
- **Last Updated**: 2026-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VSCode React Extension Template

> A modern VSCode extension template built with React, featuring modular architecture, custom webview views, and complete state management.

## Features

- **Modular Architecture**: Clean separation between extension host, webview, and shared code
- **Custom Views**: Support for both Webview Panels and Webview Sidebar views
- **React UI**: Full React 18 support with hooks-based state management
- **TypeScript**: Complete type safety across extension and webview
- **TailwindCSS**: Utility-first CSS with VSCode theme integration
- **Hot Reload**: Development mode with automatic rebuild on changes

## Prerequisites

- Node.js 18+
- VSCode 1.105.0+
- npm or yarn

## Quick Start

### Installation

```bash
# Clone the repository
git clone <repository-url>
cd vscode-react-extension-template

# Install dependencies
npm install

# Build the extension
npm run build
```

### Running the Extension

1. Open the project in VSCode
2. Press `F5` to launch the extension in debug mode
3. Use the Command Palette (`Ctrl+Shift+P`) to access extension commands

### Available Commands

| Command | Description |
|---------|-------------|
| `React Extension: Demo Action` | Execute demo action |
| `React Extension: Open Panel` | Open the Webview Panel |
| `React Extension: Close Panel` | Close the Webview Panel |
| `React Extension: Toggle Panel` | Toggle the Webview Panel |
| `React Extension: Show Message` | Display a message |
| `React Extension: Get State` | Get current extension state |
| `React Extension: Reset State` | Reset extension state |

## Project Structure

```
vscode-react-extension-template/
├── src/
│   ├── extension/           # Extension host code (Node.js)
│   │   ├── index.ts        # Entry point
│   │   ├── commands/       # VSCode commands
│   │   ├── providers/      # View providers
│   │   └── services/       # Business logic services
│   ├── webview/             # Webview React application (Browser)
│   │   ├── index.tsx       # React entry
│   │   ├── App.tsx         # Root component
│   │   ├── components/      # UI components
│   │   ├── hooks/          # Custom React hooks
│   │   ├── pages/          # Page components
│   │   ├── styles/         # CSS styles
│   │   └── types/          # Type definitions
│   └── shared/             # Shared code between extension and webview
│       ├── types/          # Type definitions
│       ├── constants/      # Constants
│       └── utils/          # Utility functions
├── scripts/                 # Build scripts
├── docs/                    # Documentation
│   └── rules/              # Development rules
├── media/                   # Static assets
└── dist/                    # Build output
```

## Development

### Development Commands

| Command | Description |
|---------|-------------|
| `npm run dev` | Build in watch mode with hot reload |
| `npm run build` | Production build |
| `npm run test` | Run tests |

### Available Views

This extension provides the following views:

1. **Sidebar View**: A custom WebviewView registered in the Activity Bar
2. **Panel View**: A detachable WebviewPanel accessible via command

## Tech Stack

| Layer | Technology | Version |
|-------|-----------|---------|
| Extension Host | TypeScript + esbuild | TS 5.x |
| UI Framework | React | 18.x |
| Styling | TailwindCSS | 3.x |
| State Management | Lightweight Hooks | - |
| Target VS Code | 1.105.0+ | - |

## Architecture

### Extension Host

The extension host runs in a Node.js environment and handles:
- VSCode API interactions
- Command registration
- View provider management
- Service layer orchestration

### Webview

The webview runs in a browser-like environment and handles:
- React UI rendering
- User interactions
- Message communication with extension host

### Shared Layer

The shared layer contains code used by both extension host and webview:
- Type definitions
- Constants
- Utility functions
- Message protocols

## Message Communication

Extension and webview communicate via typed messages:

```typescript
interface Message<T = unknown> {
  type: MessageType;
  payload?: T;
  requestId?: string;
  timestamp: number;
}
```

## Contributing

Contributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.

## Changelog

See [CHANGELOG.md](CHANGELOG.md) for version history.

## License

MIT