# dev-vscode-plugin

**Repository Path**: devbigapp/dev-vscode-plugin

## Basic Information

- **Project Name**: dev-vscode-plugin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-22
- **Last Updated**: 2026-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VSCode Extension Development Toolkit

<div align="center">

![VSCode Extension Development](https://img.shields.io/badge/VSCode-Extension%20Development-blue?style=for-the-badge&logo=visual-studio-code)
![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
![Vue.js](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D)
![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)

**专业级 VSCode 插件开发工具包与最佳实践集合**

[功能特性](#-功能特性) • [快速开始](#-快速开始) • [文档](#-文档) • [示例项目](#-示例项目) • [贡献指南](#-贡献指南)

</div>

---

## 📖 项目概述

VSCode Extension Development Toolkit 是一个全面的 VSCode 插件开发资源库，包含完整的开发指南、最佳实践、代码模板和示例项目。本项目旨在帮助开发者快速掌握现代 VSCode 插件开发技术，从简单的命令插件到复杂的 WebView 集成应用。

### 🎯 项目目标

- **降低学习门槛**: 提供结构化的学习路径和详细的开发指南
- **提升开发效率**: 包含可复用的代码模板和架构模式
- **确保代码质量**: 集成测试策略、安全最佳实践和性能优化
- **促进标准化**: 建立统一的开发规范和项目结构

## ✨ 功能特性

### 🏗️ 完整的开发框架

- **分层架构设计**: 管理器模式、处理器模式、服务层设计
- **现代前端集成**: Vue 3 + Vite + Pinia + TypeScript WebView 方案
- **双向消息通信**: 扩展与 WebView 的安全通信机制
- **数据存储方案**: 本地存储、配置管理、Git 同步

### 🛡️ 安全与质量保障

- **安全最佳实践**: CSP 配置、数据加密、权限管理、输入验证
- **完整测试策略**: 单元测试、集成测试、E2E 测试、性能测试
- **错误处理机制**: 统一错误处理、自动恢复、日志记录
- **代码质量工具**: ESLint、TypeScript、代码格式化

### 🚀 开发工具与模板

- **项目脚手架**: 快速生成项目结构和配置文件
- **代码模板库**: 管理器、处理器、服务、组件模板
- **构建工具链**: 自动化构建、打包、发布流程
- **开发调试**: 热重载、源码映射、调试配置

### 📚 学习资源

- **Kiro Power 系统**: 智能化的开发指南和最佳实践
- **示例项目**: 3个不同复杂度的完整示例
- **API 文档**: 详细的接口说明和使用示例
- **视频教程**: 分步骤的开发演示（计划中）

## 🛠️ 技术栈

### 后端技术

| 技术 | 版本 | 用途 |
|------|------|------|
| **TypeScript** | ^4.9.4 | 类型安全的主要开发语言 |
| **VS Code API** | ^1.74.0 | 扩展开发核心 API |
| **Node.js** | 16.x+ | 运行时环境 |
| **simple-git** | ^3.30.0 | Git 操作集成 |

### 前端技术 (WebView)

| 技术 | 版本 | 用途 |
|------|------|------|
| **Vue 3** | ^3.2.0 | 现代化前端框架 |
| **Vite** | ^4.0.0 | 快速构建工具 |
| **Pinia** | Latest | 轻量级状态管理 |
| **Vue Router** | Latest | 路由管理 |
| **Monaco Editor** | Latest | 代码编辑器集成 |

### 开发工具

| 工具 | 版本 | 用途 |
|------|------|------|
| **ESLint** | ^8.28.0 | 代码质量检查 |
| **Mocha** | ^11.7.5 | 测试框架 |
| **VSCE** | ^2.15.0 | 插件打包工具 |
| **Vitest** | Latest | 前端单元测试 |

## 📋 环境要求

### 系统要求

- **操作系统**: Windows 10+, macOS 10.15+, Ubuntu 18.04+
- **Node.js**: 16.14.0 或更高版本
- **npm**: 8.0.0 或更高版本
- **Git**: 2.20.0 或更高版本

### 开发环境

- **VS Code**: 1.74.0 或更高版本
- **推荐插件**:
  - TypeScript and JavaScript Language Features
  - ESLint
  - Prettier
  - Vue Language Features (Volar)
  - GitLens

### 可选工具

- **Yarn**: 作为 npm 的替代包管理器
- **Docker**: 用于容器化开发环境
- **GitHub CLI**: 用于 GitHub 集成

## 🚀 快速开始

### 1. 克隆项目

```bash
# 克隆仓库
git clone https://github.com/your-username/vscode-extension-toolkit.git
cd vscode-extension-toolkit

# 安装依赖
npm install
```

### 2. 探索示例项目

```bash
# 查看可用的示例项目
ls demo/

# 进入示例项目
cd demo/demo-vscode-plugin2

# 安装依赖
npm install
cd webview-ui && npm install && cd ..

# 启动开发模式
npm run watch
```

### 3. 在 VS Code 中调试

1. 打开项目文件夹
2. 按 `F5` 或使用 "Run Extension" 调试配置
3. 在新的 VS Code 窗口中测试插件功能

### 4. 使用 Kiro Power 系统

```bash
# 激活 VSCode Extension Power
# 在 Kiro 中输入: "vscode extension development"
# 系统会自动激活相关的开发指南
```

## 📖 详细安装与配置

### 开发环境配置

#### 1. Node.js 环境设置

```bash
# 使用 nvm 管理 Node.js 版本 (推荐)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install 18
nvm use 18

# 验证安装
node --version  # 应该显示 v18.x.x
npm --version   # 应该显示 8.x.x 或更高
```

#### 2. VS Code 扩展开发工具

```bash
# 全局安装必要工具
npm install -g yo generator-code @vscode/vsce

# 验证安装
yo --version
vsce --version
```

#### 3. 项目依赖安装

```bash
# 安装主项目依赖
npm install

# 为每个示例项目安装依赖
cd demo/demo-vscode-plugin1 && npm install && cd ../..
cd demo/demo-vscode-plugin2 && npm install && cd webview-ui && npm install && cd ../../..
cd demo/demo-vscode-plugin3 && npm install && cd ../..
```

### 开发工具配置

#### VS Code 设置

创建 `.vscode/settings.json`:

```json
{
  "typescript.preferences.includePackageJsonAutoImports": "on",
  "typescript.suggest.autoImports": true,
  "eslint.validate": ["typescript", "javascript"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.associations": {
    "*.vue": "vue"
  }
}
```

#### 调试配置

`.vscode/launch.json` 已预配置，包含:

- **Run Extension**: 启动扩展调试
- **Extension Tests**: 运行测试套件
- **Attach to WebView**: 调试 WebView 内容

## 📚 使用指南

### 创建新的插件项目

#### 1. 使用脚手架工具

```bash
# 使用 Yeoman 生成器
yo code

# 选择 TypeScript 模板
? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? My Awesome Extension
? What's the identifier of your extension? my-awesome-extension
```

#### 2. 应用最佳实践模板

```bash
# 复制架构模板
cp -r templates/extension-template/* my-awesome-extension/

# 安装依赖
cd my-awesome-extension
npm install
```

#### 3. 配置 WebView (可选)

```bash
# 添加 Vue 3 WebView 支持
mkdir webview-ui
cd webview-ui
npm create vue@latest . -- --typescript --router --pinia
npm install
```

### 开发工作流

#### 1. 开发模式

```bash
# 终端 1: 监听 TypeScript 编译
npm run watch

# 终端 2: WebView 开发服务器 (如果使用)
npm run dev:webview

# 终端 3: 启动 VS Code 调试
# 按 F5 或使用调试面板
```

#### 2. 测试流程

```bash
# 运行所有测试
npm test

# 运行特定测试套件
npm run test:unit
npm run test:integration
npm run test:webview

# 生成测试覆盖率报告
npm run test:coverage
```

#### 3. 构建和打包

```bash
# 开发构建
npm run compile

# 生产构建
npm run build

# 打包为 VSIX
npm run package

# 发布到 Marketplace
npm run publish
```

### 示例命令和操作

#### 基础插件操作

```typescript
// 注册命令
vscode.commands.registerCommand('myExtension.helloWorld', () => {
    vscode.window.showInformationMessage('Hello World!');
});

// 创建状态栏项
const statusBarItem = vscode.window.createStatusBarItem(
    vscode.StatusBarAlignment.Right, 
    100
);
statusBarItem.text = "$(heart) My Extension";
statusBarItem.show();
```

#### WebView 集成示例

```typescript
// 创建 WebView 面板
const panel = vscode.window.createWebviewPanel(
    'myWebview',
    'My WebView',
    vscode.ViewColumn.One,
    {
        enableScripts: true,
        retainContextWhenHidden: true
    }
);

// 设置 HTML 内容
panel.webview.html = getWebviewContent();

// 处理消息
panel.webview.onDidReceiveMessage(message => {
    switch (message.command) {
        case 'alert':
            vscode.window.showErrorMessage(message.text);
            return;
    }
});
```

#### 配置管理示例

```typescript
// 读取配置
const config = vscode.workspace.getConfiguration('myExtension');
const setting = config.get<boolean>('enableFeature', true);

// 更新配置
await config.update('enableFeature', false, vscode.ConfigurationTarget.Global);

// 监听配置变化
vscode.workspace.onDidChangeConfiguration(e => {
    if (e.affectsConfiguration('myExtension')) {
        // 处理配置变化
    }
});
```

## 📖 API 文档

### 核心 API 参考

#### 扩展管理器 API

```typescript
interface IExtensionManager {
    // 初始化扩展
    initialize(context: vscode.ExtensionContext): Promise<void>;
    
    // 注册命令
    registerCommand(id: string, handler: CommandHandler): void;
    
    // 创建 WebView
    createWebView(config: WebViewConfig): WebViewPanel;
    
    // 管理配置
    getConfiguration<T>(key: string): T;
    updateConfiguration<T>(key: string, value: T): Promise<void>;
}
```

#### 消息通信 API

```typescript
interface IMessageBus {
    // 发送请求
    request<T>(command: string, data?: any): Promise<T>;
    
    // 发送事件
    emit(command: string, data?: any): void;
    
    // 注册处理器
    on(command: string, handler: MessageHandler): void;
    
    // 注销处理器
    off(command: string, handler: MessageHandler): void;
}
```

#### 数据存储 API

```typescript
interface IStorageService {
    // 存储数据
    store<T>(key: string, data: T): Promise<void>;
    
    // 读取数据
    load<T>(key: string): Promise<T | null>;
    
    // 删除数据
    delete(key: string): Promise<void>;
    
    // 检查存在性
    exists(key: string): Promise<boolean>;
}
```

### 详细文档链接

- **[架构设计指南](skill/vscode-extension-power/steering/architecture.md)**: 分层架构和设计模式
- **[WebView 集成指南](skill/vscode-extension-power/steering/webview-integration.md)**: Vue 3 + Vite 集成方案
- **[消息通信指南](skill/vscode-extension-power/steering/message-communication.md)**: 双向消息通信机制
- **[测试策略指南](skill/vscode-extension-power/steering/testing-strategy.md)**: 完整测试框架
- **[安全最佳实践](skill/vscode-extension-power/steering/security.md)**: 安全开发规范
- **[部署发布指南](skill/vscode-extension-power/steering/deployment.md)**: 打包和发布流程

## 🎯 示例项目

### 1. demo-vscode-plugin1 - 基础插件

**功能特性**:
- 简单的命令注册和执行
- 基础的 WebView 集成
- 文件系统操作
- 配置管理

**适用场景**: 初学者入门，简单工具插件

```bash
cd demo/demo-vscode-plugin1
npm install
npm run watch
# 按 F5 启动调试
```

### 2. demo-vscode-plugin2 - 专业级插件

**功能特性**:
- 完整的分层架构
- Vue 3 + Vite WebView 集成
- 双向消息通信
- 数据存储和同步
- 完整的测试套件

**适用场景**: 生产级插件开发，复杂业务逻辑

```bash
cd demo/demo-vscode-plugin2
npm install
cd webview-ui && npm install && cd ..
npm run watch
npm run dev:webview
# 按 F5 启动调试
```

### 3. demo-vscode-plugin3 - 高级特性

**功能特性**:
- 高级架构模式
- 性能优化
- 安全最佳实践
- 国际化支持
- 插件市场发布

**适用场景**: 企业级插件，高性能要求

```bash
cd demo/demo-vscode-plugin3
npm install
npm run build
npm test
# 按 F5 启动调试
```

## 🧪 测试

### 运行测试套件

```bash
# 运行所有测试
npm test

# 运行单元测试
npm run test:unit

# 运行集成测试
npm run test:integration

# 运行 E2E 测试
npm run test:e2e

# 生成覆盖率报告
npm run test:coverage
```

### 测试结构

```
src/test/
├── suite/              # 单元测试
│   ├── extension.test.ts
│   ├── managers/
│   └── services/
├── integration/        # 集成测试
│   ├── workflow.test.ts
│   └── api.test.ts
└── e2e/               # 端到端测试
    └── user-flow.test.ts
```

### 测试覆盖率目标

- **单元测试**: > 80%
- **集成测试**: > 60%
- **E2E 测试**: 关键用户流程 100%

## 🤝 贡献指南

我们欢迎所有形式的贡献！请阅读以下指南来了解如何参与项目。

### 贡献方式

1. **报告问题**: 使用 [GitHub Issues](https://github.com/your-username/vscode-extension-toolkit/issues)
2. **功能建议**: 提交功能请求和改进建议
3. **代码贡献**: 提交 Pull Request
4. **文档改进**: 完善文档和示例
5. **测试用例**: 添加测试覆盖

### 开发流程

#### 1. Fork 和克隆

```bash
# Fork 项目到你的 GitHub 账户
# 然后克隆你的 fork

git clone https://github.com/your-username/vscode-extension-toolkit.git
cd vscode-extension-toolkit

# 添加上游仓库
git remote add upstream https://github.com/original-owner/vscode-extension-toolkit.git
```

#### 2. 创建功能分支

```bash
# 创建并切换到新分支
git checkout -b feature/your-feature-name

# 或者修复 bug
git checkout -b fix/issue-number
```

#### 3. 开发和测试

```bash
# 安装依赖
npm install

# 运行测试
npm test

# 检查代码质量
npm run lint

# 构建项目
npm run build
```

#### 4. 提交更改

```bash
# 添加更改
git add .

# 提交 (使用规范的提交消息)
git commit -m "feat: add new extension template"

# 推送到你的 fork
git push origin feature/your-feature-name
```

#### 5. 创建 Pull Request

1. 访问你的 GitHub fork
2. 点击 "New Pull Request"
3. 填写详细的 PR 描述
4. 等待代码审查

### 代码规范

#### 提交消息规范

使用 [Conventional Commits](https://www.conventionalcommits.org/) 格式:

```
<type>[optional scope]: <description>

[optional body]

[optional footer(s)]
```

**类型**:
- `feat`: 新功能
- `fix`: 修复 bug
- `docs`: 文档更新
- `style`: 代码格式化
- `refactor`: 代码重构
- `test`: 测试相关
- `chore`: 构建工具、依赖更新

**示例**:
```
feat(webview): add Vue 3 integration template
fix(security): resolve XSS vulnerability in message handler
docs(readme): update installation instructions
```

#### 代码风格

- 使用 TypeScript 严格模式
- 遵循 ESLint 配置
- 使用 Prettier 格式化代码
- 添加适当的 JSDoc 注释
- 保持函数简洁 (< 50 行)
- 使用描述性的变量和函数名

#### 测试要求

- 新功能必须包含单元测试
- 修复 bug 必须包含回归测试
- 保持测试覆盖率 > 80%
- 测试应该快速且可靠

### 文档贡献

#### 文档类型

1. **API 文档**: 接口和方法说明
2. **教程文档**: 分步骤的使用指南
3. **示例代码**: 可运行的代码示例
4. **最佳实践**: 开发经验和建议

#### 文档规范

- 使用清晰的标题结构
- 包含代码示例
- 添加必要的图表和截图
- 保持内容更新
- 支持多语言 (中英文)

## 📄 许可证信息

本项目采用 [MIT 许可证](LICENSE)。

### MIT 许可证摘要

```
MIT License

Copyright (c) 2024 VSCode Extension Development Toolkit

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

### 第三方许可证

本项目使用的主要依赖项及其许可证:

- **TypeScript**: Apache-2.0
- **Vue.js**: MIT
- **Vite**: MIT
- **VS Code API**: MIT
- **Node.js**: MIT

完整的依赖项许可证信息请查看 `package.json` 和 `LICENSE-THIRD-PARTY` 文件。

## 📞 联系方式

### 项目维护者

- **项目负责人**: [Your Name](mailto:your.email@example.com)
- **技术负责人**: [Tech Lead](mailto:tech.lead@example.com)

### 获取帮助

#### 1. GitHub Issues
- **Bug 报告**: [创建 Bug 报告](https://github.com/your-username/vscode-extension-toolkit/issues/new?template=bug_report.md)
- **功能请求**: [提交功能请求](https://github.com/your-username/vscode-extension-toolkit/issues/new?template=feature_request.md)
- **问题讨论**: [GitHub Discussions](https://github.com/your-username/vscode-extension-toolkit/discussions)

#### 2. 社区支持

- **Discord 服务器**: [加入我们的 Discord](https://discord.gg/your-server)
- **QQ 群**: 123456789 (中文用户)
- **微信群**: 扫描二维码加入

#### 3. 商业支持

如需商业支持、定制开发或企业培训，请联系:

- **邮箱**: business@example.com
- **电话**: +86 138-0000-0000
- **官网**: https://your-website.com

### 反馈渠道

我们重视每一个反馈，请通过以下方式联系我们:

1. **GitHub Issues**: 技术问题和 bug 报告
2. **Email**: 一般咨询和商业合作
3. **社交媒体**: 关注我们获取最新动态
   - Twitter: [@YourProject](https://twitter.com/yourproject)
   - 微博: [@YourProject](https://weibo.com/yourproject)

---

<div align="center">

**感谢使用 VSCode Extension Development Toolkit！**

如果这个项目对你有帮助，请给我们一个 ⭐️

[⬆ 回到顶部](#vscode-extension-development-toolkit)

</div>