{"id":23357480,"url":"https://github.com/cs-magic-open/vscode-extension-template","last_synced_at":"2025-04-07T20:17:19.823Z","repository":{"id":267730585,"uuid":"902176305","full_name":"cs-magic-open/vscode-extension-template","owner":"cs-magic-open","description":"一个现代化的 VS Code 插件开发模板，开箱集成 webview，支持 react 快速开发","archived":false,"fork":false,"pushed_at":"2024-12-12T13:56:25.000Z","size":191,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T21:45:18.823Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cs-magic-open.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-12T03:59:13.000Z","updated_at":"2025-01-16T03:07:16.000Z","dependencies_parsed_at":"2024-12-12T23:57:31.812Z","dependency_job_id":null,"html_url":"https://github.com/cs-magic-open/vscode-extension-template","commit_stats":null,"previous_names":["cs-magic/vscode-extension-template","cs-magic-open/vscode-extension-template"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cs-magic-open%2Fvscode-extension-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cs-magic-open%2Fvscode-extension-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cs-magic-open%2Fvscode-extension-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cs-magic-open%2Fvscode-extension-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cs-magic-open","download_url":"https://codeload.github.com/cs-magic-open/vscode-extension-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247721920,"owners_count":20985084,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-21T10:29:14.283Z","updated_at":"2025-04-07T20:17:19.799Z","avatar_url":"https://github.com/cs-magic-open.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VS Code Extension Template\n\n\u003c!-- toc --\u003e\n\n[核心优势](#核心优势) • [特性](#特性) • [项目结构](#项目结构) • [快速开始](#快速开始) • [开发指南](#开发指南) • [常见问题](#常见问题) • [许可证](#许可证)\n\n\u003c!-- tocstop --\u003e\n\n\n一个现代化的 VS Code 插件开发模板，基于 [YAAC](https://github.com/cs-magic/YAAC) 项目的技术栈，集成了：\n\n- 🏃 Turborepo - 高性能的构建系统\n- 📝 TypeScript - 类型安全的开发体验\n- 🖼️ WebView - VS Code 自定义界面\n- ⚛️ React - 组件化开发\n- 🎨 Tailwind CSS - 现代化 UI 设计\n- 🛠️ VS Code API - 深度扩展集成\n- 📦 Webpack - 优化的打包工具\n\n## 核心优势\n\n- 🔍 优化的调试体验\n\n  - 预配置的 F5 调试设置\n  - 智能的断点和变量监控\n  - 集成的开发者工具支持\n\n- 📦 完善的依赖管理\n\n  - 基于 pnpm 的高效依赖管理\n  - 智能的构建缓存策略\n  - 自动化的依赖更新\n\n- 🎨 增强的 WebView 体验\n  - 响应式设计支持\n  - 主题自适应\n  - 优化的状态管理\n\n## 特性\n\n- ⚡️ 快速开发启动\n- 📦 Monorepo 工作区管理\n- 🔄 开发环境热重载\n- 🎯 TypeScript 严格模式\n- 🎨 现代化 UI 框架\n- 🛠️ 完整的工具链集成\n\n## 项目结构\n\n```\n.\n├── apps/\n│   └── vscode-extension/     # VS Code 插件主程序\n│       ├── src/             # 插件源码\n│       └── webpack.config.js # Webpack 构建配置\n│\n├── packages/\n│   ├── core/               # 核心业务逻辑\n│   │   └── src/           # 共享的核心功能\n│   │\n│   ├── ui/                # UI 组件库\n│   │   ├── src/          # React 组件\n│   │   └── tailwind.config.js # Tailwind 配置\n│   │\n│   └── webview/           # WebView 前端应用\n│       └── src/          # WebView 源码\n│\n├── pnpm-workspace.yaml    # 工作区配置\n└── turbo.json            # Turborepo 配置\n```\n\n### 目录说明\n\n- `apps/vscode-extension`: VS Code 插件主程序\n\n  - 负责插件生命周期管理\n  - 处理 VS Code 命令和事件\n  - 集成 WebView 和核心功能\n\n- `packages/core`: 核心业务逻辑\n\n  - 提供共享的业务功能\n  - 实现数据处理和状态管理\n  - 定义核心 API 和接口\n\n- `packages/ui`: UI 组件库\n\n  - 基于 React 的可复用组件\n  - 集成 Tailwind CSS 样式系统\n  - 支持主题定制和响应式设计\n\n- `packages/webview`: WebView 前端应用\n  - 独立的 React 应用\n  - 负责展示和用户交互\n  - 与插件主程序通信\n\n## 快速开始\n\n1. 克隆项目:\n\n   ```bash\n   git clone [your-template-url]\n   cd vscode-extension-template\n   ```\n\n2. 安装依赖:\n\n   ```bash\n   # 安装 pnpm（如果未安装）\n   npm install -g pnpm@8.10.0\n\n   # 安装项目依赖\n   pnpm install\n   ```\n\n3. 开发模式:\n\n   ```bash\n   # 启动所有相关包的开发模式\n   pnpm dev\n   ```\n\n4. VS Code 插件调试:\n   - 在 VS Code 中打开项目根目录\n   - 按 F5 启动调试（已预配置调试设置）\n   - 在新窗口中使用 `Cmd/Ctrl + Shift + P` 运行 \"Show WebView\" 命令\n\n## 开发指南\n\n### 项目开发\n\n1. **开发工作流**\n\n   ```bash\n   # 启动开发模式（监听所有相关包的变更）\n   pnpm dev\n\n   # 构建所有包\n   pnpm build\n\n   # 运行代码检查\n   pnpm lint\n\n   # 格式化代码\n   pnpm format\n   ```\n\n2. **清理项目**\n   ```bash\n   # 清理所有构建缓存和依赖\n   pnpm clean\n   ```\n\n### 包开发指南\n\n1. **Core 包开发**\n\n   - 位置：`packages/core`\n   - 职责：实现核心业务逻辑\n   - 开发建议：\n     - 保持良好的类型定义\n     - 编写单元测试\n     - 遵循模块化原则\n\n2. **UI 包开发**\n\n   - 位置：`packages/ui`\n   - 职责：提供可复用的 UI 组件\n   - 开发建议：\n     - 使用 Storybook 开发和测试组件\n     - 遵循 Tailwind 设计规范\n     - 确保组件的可访问性\n\n3. **WebView 开发**\n\n   - 位置：`packages/webview`\n   - 职责：实现 VS Code WebView 界面\n   - 开发建议：\n     - 使用 React DevTools 调试\n     - 注意状态管理和性能优化\n     - 遵循 VS Code 的设计规范\n\n4. **插件开发**\n   - 位置：`apps/vscode-extension`\n   - 职责：实现 VS Code 插件功能\n   - 开发建议：\n     - 使用 VS Code 调试工具\n     - 查看开发者工具的控制台输出\n     - 测试不同的 VS Code 主题兼容性\n\n### 调试技巧\n\n1. **WebView 调试**\n\n   - 在 VS Code 中打开开发者工具（帮助 \u003e 切换开发人员工具）\n   - 使用 React DevTools 检查组件\n   - 查看控制台输出和网络请求\n\n2. **插件调试**\n\n   - 使用断点和日志调试\n   - 查看 VS Code 输出面板\n   - 使用 VS Code 的调试控制台\n\n3. **性能优化**\n   - 使用 React Profiler 分析性能\n   - 检查 Webpack 构建配置\n   - 优化状态更新和渲染\n\n### 发布准备\n\n1. **版本发布**\n\n   ```bash\n   # 构建生产版本\n   pnpm build\n\n   # 运行测试\n   pnpm test\n\n   # 打包插件（在 apps/vscode-extension 目录下）\n   cd apps/vscode-extension\n   vsce package\n   ```\n\n2. **发布检查清单**\n   - 确保所有测试通过\n   - 检查构建产物\n   - 在不同版本的 VS Code 中测试\n   - 更新版本号和更新日志\n   - 检查发布配置\n\n## 常见问题\n\n1. WebView 不显示？\n\n   - 确保已运行 `pnpm build` 构建 WebView\n   - 检查 WebView 的构建输出\n   - 查看 VS Code 的开发者工具\n\n2. 热重载不工作？\n   - 确保开发服务器正在运行\n   - 检查控制台错误\n   - 重新加载 VS Code 窗口\n\n## 许可证\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcs-magic-open%2Fvscode-extension-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcs-magic-open%2Fvscode-extension-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcs-magic-open%2Fvscode-extension-template/lists"}