Spec Kit VS Code - VS Code Extension

🌱 一个 VS Code 扩展，基于 specify-cn CLI，提供规范驱动开发（Spec-Driven Development）的完整工作流。

通过智能聊天界面和自动 AI 代理调用，轻松完成从项目初始化到任务分解的全流程。支持自然语言交互和精确的斜杠命令。

🎉 现已发布到 VS Code Marketplace！ 立即安装

功能特性

✨ 主要功能

💬 智能聊天界面 - 支持自然语言和斜杠命令交互
🤖 自动 AI 代理调用 - 无缝调用 Claude Code、Cursor、Copilot 等 AI 代理
🚀 一键项目初始化 - 可视化界面，支持 17+ AI 助手选择
📋 项目宪章管理 - 建立和维护项目指导原则
📝 智能规范生成 - 基于自然语言描述生成技术规范
🗺️ 技术计划制定 - 创建详细的实施计划和架构设计
✅ 任务自动分解 - 将计划分解为可执行的具体任务
📊 质量检查清单 - 验证需求完整性和一致性
� C项目一致性分析 - 跨制品一致性检查
🔗 GitHub Issues 集成 - 将任务转换为 GitHub Issues
🔧 CLI 状态监控 - 实时检测和刷新 CLI 状态

前置要求

VS Code >= 1.90.0
Node.js >= 18.0.0
specify-cn CLI - 必须安装
AI 代理 - 推荐安装 Claude Code（可选，用于自动执行 slash commands）

安装 specify-cn CLI

这是使用本扩展的必要条件。

方式 1: 使用 uv (推荐)

uv tool install specify-cn-cli --from git+https://github.com/linfee/spec-kit-cn.git

方式 2: 使用 pip

pip install git+https://github.com/linfee/spec-kit-cn.git

方式 3: 从源码安装

git clone https://github.com/Linfee/spec-kit-cn
cd spec-kit-cn
pip install -e .

验证安装：

specify-cn --version

如果命令不可用，请确保 Python 的 bin 目录在 PATH 中。

安装扩展

从 VS Code Marketplace (推荐)

方式 1: 在 VS Code 中搜索安装

打开 VS Code
按 Ctrl+Shift+X 打开扩展面板
搜索 "Spec Kit VS Code" 或 "hisn0w.spec-kit-vscode"
点击 Install

方式 2: 从 Marketplace 网站安装

访问：https://marketplace.visualstudio.com/items?itemName=hisn0w.spec-kit-vscode
点击 "Install" 按钮

方式 3: 使用命令行安装

code --install-extension hisn0w.spec-kit-vscode

从本地构建

# 1. 克隆仓库
git clone https://github.com/your-username/spec-kit-vscode
cd spec-kit-vscode

# 2. 安装依赖
npm install

# 3. 构建扩展
npm run esbuild

# 4. 打包 .vsix 文件
npm run package

# 5. 在 VS Code 中安装
# 从命令面板运行: Extensions: Install from VSIX

使用方法

快速开始

打开侧边栏
- 点击左侧活动栏中的 🌱 Spec Kit 图标
- 或按 Ctrl+Shift+P 搜索 "Spec Kit"
智能交互方式

🗣️ 自然语言（推荐）
- 说 "初始化项目" → 自动打开初始化界面
- 说 "创建宪章：专注代码质量和测试" → 自动生成项目原则
- 说 "定义需求：构建任务管理应用" → 自动创建技术规范
- 说 "制定计划：使用 React + Node.js" → 自动生成实施计划
- 说 "分解任务" → 自动生成任务列表
- 说 "查看状态" → 显示项目进度
⚡ 精确斜杠命令
- /speckit.constitution 创建专注于代码质量的原则
- /speckit.specify 构建一个任务管理应用
- /speckit.plan 使用 React + Node.js + PostgreSQL
- /speckit.tasks - 生成具体任务
- /speckit.analyze - 分析项目一致性
- /speckit.checklist - 生成质量检查清单

🎯 核心优势： 扩展会自动调用 AI 代理执行命令，完全无需手动操作！

详细工作流

步骤 1: 初始化项目

在聊天框输入: 初始化项目

助手会引导你选择 AI 助手和脚本类型。

步骤 2: 创建项目宪章

在聊天框输入: /speckit.constitution 我要做一个电商平台，需要高质量代码和完整测试

✅ 自动执行： 扩展会在终端中启动 AI 代理，自动生成宪章文件。

步骤 3: 生成项目规范

在聊天框输入: /speckit.specify 用户可以浏览商品、加购物车、下单支付、查看订单历史

✅ 自动执行： AI 代理会根据描述生成详细的功能需求和验收标准。

步骤 4: 制定实施计划

在聊天框输入: /speckit.plan 使用 React + TypeScript 前端，Node.js + Express 后端，PostgreSQL 数据库

✅ 自动执行： AI 代理会创建包含技术选型、开发阶段和里程碑的计划。

步骤 5: 分解任务

在聊天框输入: /speckit.tasks

✅ 自动执行： AI 代理会将计划分解为按优先级排序的具体任务。

步骤 6: 查看项目状态

在聊天框输入: 查看状态

查看项目的完成进度和下一步建议。

配置项

在 VS Code 设置中配置（搜索 "spec-kit"）：

{
  // specify-cn CLI 的自定义路径（留空使用 PATH）
  "spec-kit.cliPath": "",

  // 启动时自动检测 CLI
  "spec-kit.autoDetectCli": true,

  // 启用调试日志
  "spec-kit.debug": false,

  // 默认 AI 助手
  "spec-kit.defaultAiAssistant": "claude",

  // 显示操作通知
  "spec-kit.showNotifications": true,

  // 在新标签页打开结果
  "spec-kit.openResultsInNewTab": true,

  // 命令超时时间（秒）
  "spec-kit.commandTimeout": 120
}

侧边栏聊天界面

界面组成

标题栏 - 显示 "Spec Kit 助手"
消息区域 - 显示对话历史
输入框 - 输入你的需求或命令
快速操作 - 欢迎界面提供快速开始按钮

支持的命令

🔥 完整命令支持（自动执行）

命令	说明	示例	自动执行
`/speckit.constitution`	建立项目指导原则	`/speckit.constitution 专注代码质量`	✅
`/speckit.specify`	生成功能规范	`/speckit.specify 构建任务管理应用`	✅
`/speckit.clarify`	澄清规范细节	`/speckit.clarify`	✅
`/speckit.plan`	制定技术计划	`/speckit.plan 使用 React + Node.js`	✅
`/speckit.checklist`	生成质量检查清单	`/speckit.checklist`	✅
`/speckit.tasks`	分解具体任务	`/speckit.tasks`	✅
`/speckit.analyze`	分析项目一致性	`/speckit.analyze`	✅
`/speckit.implement`	开始代码实施	`/speckit.implement`	✅
`/speckit.taskstoissues`	转换为 GitHub Issues	`/speckit.taskstoissues`	✅

🗣️ 自然语言命令（智能识别）

说法	自动执行的命令	效果
"初始化项目"	打开初始化界面	可视化项目设置
"创建宪章：..."	`/speckit.constitution`	自动生成项目原则
"定义需求：..."	`/speckit.specify`	自动创建功能规范
"制定计划：..."	`/speckit.plan`	自动生成技术计划
"分解任务"	`/speckit.tasks`	自动生成任务列表
"开始实施"	`/speckit.implement`	自动执行代码实施
"查看状态"	显示项目进度	实时项目状态检查
"帮助"	显示命令列表	完整命令参考

🎛️ 界面操作

操作	说明	位置
工作流	打开可视化工作流界面	右上角按钮
命令	显示所有可用命令	右上角按钮
清空	清除聊天历史	右上角按钮
刷新状态	重新检查 CLI 状态	初始化界面

故障排除

🔧 常见问题解决

CLI 状态显示不可用

症状： 聊天界面显示 "❌ Spec Kit CLI 不可用"

解决方案：

点击"刷新状态"按钮 - 重新检测 CLI

安装 CLI

uv tool install specify-cn-cli --from git+https://github.com/linfee/spec-kit-cn.git

验证安装
```
specify-cn --version
```

检查 PATH 环境变量

# macOS/Linux
which specify-cn

# Windows  
where specify-cn

初始化按钮卡死或超时

症状： 点击"初始化项目"后长时间无响应

解决方案：

等待超时保护 - 45秒后会自动停止并显示错误
点击"刷新状态" - 重新检查 CLI 状态
检查网络连接 - 初始化需要从 GitHub 下载模板
手动初始化
```
specify-cn init --here --ai claude
```

AI 代理未正确设置

症状： 初始化时选择了 Gemini，但实际还是调用 Claude

解决方案：

重新初始化项目 - 选择正确的 AI 代理
手动设置
- 打开 VS Code 设置 (Ctrl+,)
- 搜索 "spec-kit.defaultAiAssistant"
- 选择正确的 AI 助手

侧边栏图标不显示

症状： 左侧活动栏没有 🌱 图标

解决方案：

重新加载窗口 - Ctrl+Shift+P → "Developer: Reload Window"
重新安装扩展
检查扩展是否启用 - 在扩展面板中确认扩展已启用

键盘快捷键

暂时没有默认快捷键。你可以在 VS Code 快捷键设置中添加：

{
  "key": "ctrl+shift+s",
  "command": "spec-kit.init"
}

工作流示例

场景 1: 启动新项目

1. 点击左侧 🌱 Spec Kit 图标打开聊天界面
2. 在聊天框输入: "初始化项目"
3. 按照助手指引选择 AI 助手和脚本类型
4. 等待项目初始化完成
5. 输入: "创建宪章 我要做一个任务管理系统"
6. 输入: "生成规范 用户可以创建项目、分配任务、跟踪进度"
7. 输入: "制定计划 使用 React + Node.js + PostgreSQL"
8. 输入: "分解任务"
9. 开始实施

场景 2: 查看项目进度

1. 打开 Spec Kit 界面
2. 输入: "查看状态"
3. 查看项目的完成进度
4. 根据建议继续下一步

场景 3: 更新项目规范

1. 打开 Spec Kit 界面
2. 输入: "更新规范 新增用户权限管理功能"
3. 规范将被更新
4. 输入: "制定计划" 重新制定计划

开发

项目结构

spec-kit-vscode/
├── src/
│   ├── extension.ts              # 主入口
│   ├── services/                 # 服务层
│   │   ├── specKitCliService.ts  # CLI 调用服务
│   │   ├── aiService.ts          # AI 服务（可选）
│   │   ├── fileOperationService.ts # 文件操作
│   │   └── projectService.ts     # 项目管理
│   ├── commands/                 # 命令处理器
│   │   ├── initCommand.ts
│   │   ├── specifyCommand.ts
│   │   ├── planCommand.ts
│   │   └── tasksCommand.ts
│   ├── ui/                       # UI 组件
│   │   ├── ChatViewProvider.ts   # 聊天界面
│   │   ├── explorer.ts           # 树形视图（已弃用）
│   │   └── webview/              # WebView 基类
│   └── utils/                    # 工具函数
│       ├── logger.ts
│       ├── errorHandler.ts
│       └── ui.ts
├── media/                        # 图标和资源
│   └── spec-kit-icon.svg         # 侧边栏图标
├── package.json
├── tsconfig.json
└── README.md

开发命令

# 安装依赖
npm install

# 编译 TypeScript
npm run compile

# 监听文件变化并编译
npm run watch

# 构建扩展（esbuild）
npm run esbuild

# 监听并构建（esbuild）
npm run esbuild-watch

# 代码检查
npm run lint

# 打包为 .vsix
npm run package

# 发布到 Marketplace
npm run publish

调试

打开项目根目录
按 F5 启动调试会话
扩展会在新的 VS Code 窗口中加载
使用命令面板测试命令

运行测试

npm run pretest
npm run test

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT License - 详见 LICENSE

常见问题 (FAQ)

Q: 这个扩展和 specify-cn CLI 的关系是什么？ A: 这个扩展是 specify-cn CLI 的 VS Code 前端。它通过聊天界面调用 CLI 来完成规范驱动开发的各个步骤。

Q: 必须安装 specify-cn CLI 吗？ A: 是的。这个扩展依赖于 specify-cn CLI。如果未安装，聊天界面会提示安装方法。

Q: 支持哪些 AI 助手？ A: 扩展本身不依赖 AI 服务。specify-cn CLI 支持 Claude、Copilot、Gemini 等多个 AI 助手。

Q: 可以贡献代码吗？ A: 欢迎提交 Pull Request！请先阅读 CONTRIBUTING.md。

Q: 如何更新扩展？ A: VS Code 会自动检查并提示更新。你也可以在扩展面板中手动检查更新。

Q: 扩展的版本历史在哪里查看？ A: 访问 Marketplace 页面查看版本历史和更新日志。

版本信息

当前版本: v0.2.8
发布日期: 2025年12月
发布者: hisn0w
许可证: MIT

支持与反馈

需要帮助？

📖 查看 requirements.md 了解技术细节
🛠️ 查看 DEVELOPMENT.md 了解开发指南
📚 访问 Spec Kit CN 官方文档
🐛 报告问题
⭐ 在 Marketplace 评分

Spec Kit VS Code - 规范驱动开发

Hisn0w

Spec Kit VS Code - VS Code Extension

功能特性

前置要求

安装 specify-cn CLI

安装扩展

从 VS Code Marketplace (推荐)

从本地构建

使用方法

快速开始

详细工作流

步骤 1: 初始化项目

步骤 2: 创建项目宪章

步骤 3: 生成项目规范

步骤 4: 制定实施计划

步骤 5: 分解任务

步骤 6: 查看项目状态

配置项

侧边栏聊天界面

界面组成

支持的命令

🔥 完整命令支持（自动执行）

🗣️ 自然语言命令（智能识别）

🎛️ 界面操作

故障排除

🔧 常见问题解决

CLI 状态显示不可用

初始化按钮卡死或超时

AI 代理未正确设置

侧边栏图标不显示

键盘快捷键

工作流示例

场景 1: 启动新项目

场景 2: 查看项目进度

场景 3: 更新项目规范

开发

项目结构

开发命令

调试

运行测试

贡献

许可证

相关链接

扩展相关

相关项目

常见问题 (FAQ)

版本信息

最新更新 (v0.2.8)

支持与反馈