vscode-webview-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

VS Code Webview UI

Overview

概述

This skill assists in developing the React application that powers VS Code webview surfaces. It covers the

webview-ui

workspace, which is bundled with Vite and communicates with the extension host via the

bridge/vscode

helper.

本技能可协助开发为VS Code Webview界面提供支持的React应用。它涵盖了

webview-ui

工作区，该工作区通过Vite进行打包，并通过

bridge/vscode

工具与扩展宿主进行通信。

Project Structure

项目结构

The

webview-ui

package follows this structure:

webview-ui/
├── src/
│   ├── components/        # Shared visual components reused across features
│   │   └── ui/            # shadcn/ui component library
│   ├── hooks/             # Shared React hooks
│   ├── features/
│   │   └── {feature}/
│   │       ├── index.tsx  # Feature entry component rendered from routing
│   │       ├── components/# Feature-specific components
│   │       └── hooks/     # Feature-specific hooks
│   ├── bridge/            # Messaging helpers for VS Code <-> webview
│   └── index.tsx          # Runtime router that mounts the selected feature
├── public/                # Static assets copied verbatim by Vite
├── vite.config.ts         # Vite build configuration
└── README.md

webview-ui

包遵循以下结构：

webview-ui/
├── src/
│   ├── components/        # 跨功能复用的共享视觉组件
│   │   └── ui/            # shadcn/ui组件库
│   ├── hooks/             # 共享React hooks
│   ├── features/
│   │   └── {feature}/
│   │       ├── index.tsx  # 由路由挂载的功能入口组件
│   │       ├── components/# 功能专属组件
│   │       └── hooks/     # 功能专属hooks
│   ├── bridge/            # VS Code <-> Webview的消息通信工具
│   └── index.tsx          # 用于挂载选定功能的运行时路由
├── public/                # Vite直接复制的静态资源
├── vite.config.ts         # Vite构建配置
└── README.md

Coding Guidelines

编码规范

Shared Modules: Prefer shared modules under
```
src/components
```
and
```
src/hooks
```
before introducing feature-local code.
Feature Boundaries: Add feature-only utilities inside the nested
```
components/
```
or
```
hooks/
```
directories to keep boundaries clear.
Styling: Keep styling in Tailwind-style utility classes (see
```
src/app.css
```
for base tokens) and avoid inline styles when reusable classes exist.
Messaging: Exchange messages with the extension via
```
vscode.postMessage
```
and subscribe through
```
window.addEventListener('message', …)
```
inside React effects.
Configuration: When adding new steering or config references, obtain paths through the shared
```
ConfigManager
```
utilities from the extension layer.

共享模块：在添加功能本地代码之前，优先使用
```
src/components
```
和
```
src/hooks
```
下的共享模块。
功能边界：将功能专属工具放在嵌套的
```
components/
```
或
```
hooks/
```
目录中，以明确边界。
样式：采用Tailwind风格的工具类进行样式编写（基础令牌可查看
```
src/app.css
```
），当存在可复用类时避免使用内联样式。
消息通信：通过
```
vscode.postMessage
```
与扩展交换消息，并在React effects中通过
```
window.addEventListener('message', …)
```
进行订阅。
配置：添加新的控制或配置引用时，通过扩展层的共享
```
ConfigManager
```
工具获取路径。

Testing & Quality

测试与质量

Integration Tests: Use Playwright or Cypress style integration tests if adding complex interactions (tests live under the repo-level
```
tests/
```
).
Pre-commit Checks: Run
```
npm run lint
```
and
```
npm run build
```
before committing to ensure TypeScript and bundler checks pass.

集成测试：如果添加复杂交互，可使用Playwright或Cypress风格的集成测试（测试文件位于仓库级别的
```
tests/
```
目录下）。
提交前检查：提交前运行
```
npm run lint
```
和
```
npm run build
```
，确保TypeScript和打包检查通过。