CodeFront VSCode Extension

CodeFront AI 的 VSCode 插件 MVP，当前聚焦 4 条核心能力闭环，目标是把前端开发中的高频机械工作收敛进一个可运行、可演示、可继续扩展的 VSCode 扩展里。

当前 MVP 能力

1. AI 重构优化

选中代码后通过右键菜单或命令面板触发
调用 OpenAI 兼容接口
使用 VSCode 原生 Diff 预览结果
必须显式执行“应用重构结果”
如果原文在预览后发生变化，会拒绝写回

2. JSON 转 TS

仅本地转换，不依赖 AI
选中 JSON / 类 JSON 内容
支持宽松对象字面量输入：
- 尾逗号
- 单引号
- 未加引号 key
- 注释
- undefined
生成 TypeScript interface
生成前要求输入根类型名
有选区时替换选区，无选区时插入光标处
非法输入给出解析导向提示

3. 新建 AI 组件 / 页面

一个统一命令同时支持创建：
- React 组件
- React 页面
写入固定示例目录：
- .codefront/generated/components/
- .codefront/generated/pages/
需要工作区
默认优先走真实 AI
真实 AI 失败时自动回退 mock
目标文件已存在时不会静默覆盖
生成后自动打开文件

4. 侧边栏 AI 对话面板

侧边栏内直接输入需求
复用现有 codefront.baseUrl / apiKey / model
单结果工作台，不承诺多轮历史
回复按“普通文本 + 代码块”渲染
支持三种结果落地形态：
- 纯文本结果可直接插入全文
- 单代码块结果可直接插入当前文件
- 多代码块结果需先选择后插入当前文件
所有写入都由扩展侧处理
插入规则统一为：
- 有选区时替换选区
- 无选区时插入到当前光标位置

项目结构

codefront-vscode-extension/
├── .vscode/
│   ├── launch.json
│   ├── tasks.json
│   └── settings.example.json
├── media/
├── src/
├── dist/
├── package.json
├── tsconfig.json
└── esbuild.mjs

安装依赖

npm install

本地构建

npm run build

类型检查

npm run check

运行测试

你可以按能力分组运行测试，也可以直接运行全部测试。

运行全部测试

npm test

运行重点能力测试

AI 重构优化

npm test -- src/commands/refactor-selected-code.test.ts src/services/editor/index.test.ts

JSON 转 TS

npm test -- src/commands/type-name.test.ts src/commands/type-name-flow.test.ts src/commands/json-to-ts-flow.test.ts src/services/json-to-ts/generate.test.ts src/services/json-to-ts/normalize.test.ts src/services/json-to-ts/parse.test.ts src/services/editor/insert.test.ts

AI 组件 / 页面创建

npm test -- src/commands/ai-artifact-flow.test.ts src/commands/artifact-input-flow.test.ts src/services/ai-artifact/paths.test.ts src/services/ai-artifact/generate.test.ts src/services/ai-artifact/prompt.test.ts

侧边栏聊天

npm test -- src/sidebar/actions.test.ts src/sidebar/chat-flow.test.ts src/sidebar/chat-messages.test.ts src/sidebar/chat-view.test.ts src/services/chat/parse.test.ts

本地调试

1. 打开插件工程

用 VSCode 打开目录：

D:\works\2026\myproject\CodeFrontAI\codefront-vscode-extension

2. 配置模型参数

复制 .vscode/settings.example.json 的内容到你自己的 VSCode 用户设置或工作区设置中，并替换为真实值。

基础 AI 能力（重构 / 侧边栏聊天）示例：

{
  "codefront.baseUrl": "https://your-openai-compatible-endpoint/v1",
  "codefront.apiKey": "YOUR_API_KEY",
  "codefront.model": "gpt-4o-mini",
  "codefront.timeout": 30000,
  "codefront.systemPrompt": "",
  "codefront.enableTraceLog": true
}

AI 组件 / 页面创建专属配置示例：

{
  "codefront.artifactBaseUrl": "https://your-openai-compatible-endpoint/v1",
  "codefront.artifactApiKey": "YOUR_ARTIFACT_API_KEY",
  "codefront.artifactModel": "gpt-4o-mini"
}

说明：

baseUrl 需要填到 v1 层级，例如 https://example.com/v1
扩展内部会自动请求 ${baseUrl}/chat/completions
不要把真实密钥提交到仓库

3. 启动扩展宿主

按 F5，或在运行与调试面板选择：

Run CodeFront Extension

这会启动一个新的 VSCode Extension Development Host 窗口。

4. 打开测试文件

在扩展宿主窗口中打开项目内的 playground.js，或者任意一个 JS / TS / TSX / JSX 文件。

MVP 演示路径

下面是最适合演示和验收的 4 条路径。

演示 1：AI 重构优化

打开一个 JS / TS 文件
选中一段代码
右键执行 CodeFront: AI重构优化
等待 Diff 预览打开
点击通知里的 应用重构结果
修改原文件后重试一次，确认 stale apply 会被拒绝

演示 2：JSON 转 TS

在文件里放一段 JSON / 类 JSON 内容
选中这段内容
执行 CodeFront: JSON转TS
输入根类型名
查看生成的 interface
验证有选区替换、无选区插入的规则

演示 3：新建 AI 组件 / 页面

执行 CodeFront: 新建AI组件/页面
选择：组件 / 页面
输入名称和需求描述
生成结果会落到：
- .codefront/generated/components/
- .codefront/generated/pages/
自动打开生成文件
若目标文件已存在，确认不会静默覆盖

演示 4：侧边栏 AI 对话面板

打开 CodeFront 侧边栏
在聊天输入框里输入需求，例如：
- “生成一个用户卡片组件”
- “给我一个基础 dashboard 页面”
点击 发送
查看返回的文本说明与代码块
根据结果类型执行：
- 纯文本结果点击 插入全文
- 单代码块结果点击 插入到编辑器
- 多代码块结果先选择代码块，再点击 插入到编辑器

调试辅助

launch.json

/.vscode/launch.json 已配置好扩展宿主启动项，会在启动前自动执行构建。

tasks.json

/.vscode/tasks.json 包含：

npm: build
npm: watch

如果你想边改边构建，可以手动运行 npm: watch。

日志查看

如果开启了：

"codefront.enableTraceLog": true

可以在 VSCode 中查看：

输出 面板
选择 CodeFront

配置项

通用 AI 配置

codefront.baseUrl：OpenAI 兼容接口基础地址
codefront.apiKey：接口密钥
codefront.model：模型名称
codefront.timeout：请求超时时间（毫秒）
codefront.systemPrompt：可选的系统提示词覆盖
codefront.enableTraceLog：是否开启调试日志

Artifact 专属配置

codefront.artifactBaseUrl
codefront.artifactApiKey
codefront.artifactModel

当前限制

当前 MVP 还不包含：

多轮上下文持久化
对话历史记录
模板收藏/模板市场
多文件联动生成
组件库/项目级上下文注入
桌面端真实联动
云同步、登录、计费
AST 级别 React class 迁移
完整代码格式转换能力

常见问题

1. 右键菜单没有出现

确认你已经：

打开了代码文件
选中了非空代码
当前运行的是扩展宿主窗口，不是原始开发窗口

2. 提示缺少基础 AI 配置

确认已设置：

codefront.baseUrl
codefront.apiKey
codefront.model

也可以执行 CodeFront: 打开配置 快速跳转。

3. AI 组件 / 页面创建没有走真实 AI