AiCode - 快手前端 AI 代码生成插件

🚀 基于快手内部 AI 平台的 VSCode 插件，专为快手前端工程师设计的智能代码生成工具

📖 简介

AiCode 是快手 ES 前端团队开发的 VSCode 扩展插件，通过集成快手内部的 AI 代码生成能力，为前端开发者提供智能化的组件生成和代码编辑功能。该插件可以帮助开发者快速生成 React 组件，提高开发效率。

✨ 主要功能

🎯 核心能力

智能组件生成：通过 AI 快速生成 React 组件代码
组件智能编辑：基于描述对现有组件进行智能修改
灵创开发集成：集成快手内部灵创开发平台能力
上下文感知：理解项目结构，生成符合项目规范的代码

🛠️ 操作方式

右键菜单：在文件资源管理器中右键使用
编辑器工具栏：支持 TypeScript React 和 JavaScript React 文件
命令面板：通过 VSCode 命令面板快速调用

🚀 安装使用

系统要求

VSCode 版本：>= 1.89.0
Node.js 版本：>= 16.x
依赖插件：需要安装 kwai-plateco-fe.jadelion-main 插件

安装步骤

通过 VSIX 文件安装

code --install-extension aicode-0.0.1.vsix

开发环境安装

# 克隆仓库
git clone https://git.corp.kuaishou.com/plateco-dev-fe/kwaishop-tech/kwaishop-tech-aicode.git

# 安装依赖
cd kwaishop-tech-aicode
yarn install

# 编译项目
yarn run compile

# 调试模式
# 按 F5 或在 VSCode 中选择 "运行和调试"

快速开始

生成新组件
- 在文件资源管理器中右键选择文件夹
- 选择「生成组件」
- 输入组件描述，AI 将自动生成代码
修改现有组件
- 在文件资源管理器中右键选择组件文件
- 选择「修改组件」
- 描述修改需求，AI 将智能调整代码
使用灵创开发
- 打开 React 组件文件（.tsx/.jsx）
- 点击编辑器标题栏的「使用灵创开发」按钮
- 享受智能代码生成体验

🏗️ 项目架构

aicode/
├── src/
│   ├── commands/           # 命令处理模块
│   │   ├── aicode.ts       # 主要 AI 代码生成命令
│   │   ├── editComponent.ts # 组件编辑命令
│   │   └── titleEditComponent.ts # 标题栏编辑命令
│   ├── providers/          # VSCode 提供器
│   │   ├── sidebarProvider.ts # 侧边栏视图提供器
│   │   ├── readOnlyEditorProvider.ts # 只读编辑器提供器
│   │   └── aicodeFileSystem.ts # 文件系统提供器
│   ├── server/             # 内置服务器
│   │   └── index.ts        # Koa 服务器配置
│   ├── utils/              # 工具函数
│   │   ├── WebviewManager.ts # Webview 管理器
│   │   ├── getAicodeCookie.ts # Cookie 获取
│   │   ├── httpProxy.ts    # HTTP 代理
│   │   └── ...
│   ├── types/              # TypeScript 类型定义
│   ├── router/             # 路由配置
│   └── extension.ts        # 插件入口文件
├── resources/              # 资源文件
│   ├── aicode.png         # 插件图标
│   └── injectScript.js    # 注入脚本
├── package.json           # 项目配置
└── README.md             # 项目文档

🔧 技术栈

核心框架

VSCode Extension API：插件开发框架
TypeScript：主要开发语言
Webpack：模块打包工具

后端服务

Koa.js：内置 HTTP 服务器
WebSocket：实时通信
HTTP Proxy：请求代理

快手内部集成

@es/jadelion-node-core：快手内部核心库
灵创平台：AI 代码生成服务

主要依赖

{
  "vscode": "^1.89.0",
  "typescript": "^5.9.2",
  "koa": "^3.0.1",
  "axios": "^1.11.0",
  "ws": "^8.18.3"
}

🛠️ 开发指南

开发环境设置

# 安装依赖
yarn install

# 开发模式（监听文件变化）
yarn run watch

# 编译项目
yarn run compile

# 代码检查
yarn run lint

# 运行测试
yarn run test

# 打包发布版本
yarn run package

调试说明

启动调试
- 在 VSCode 中按 F5
- 或选择「运行和调试」→「启动扩展」
调试技巧
- 使用 console.log 输出调试信息
- 在「开发者工具」中查看输出
- 设置断点进行逐步调试

代码规范

使用 TypeScript 严格模式
遵循 ESLint 配置规则
保持代码风格一致性
添加必要的类型注解

🤝 贡献指南

提交规范

我们使用语义化提交信息：

feat: 添加新功能
fix: 修复问题
docs: 文档更新
style: 代码格式调整
refactor: 代码重构
test: 测试相关
chore: 构建/工具相关

开发流程

Fork 项目到个人仓库
创建功能分支：git checkout -b feature/your-feature
提交更改：git commit -m 'feat: 添加某某功能'
推送分支：git push origin feature/your-feature
创建 Merge Request

问题反馈

在 GitLab Issues 中报告 Bug
详细描述问题重现步骤
提供错误日志和环境信息
建议改进和新功能请求

📝 更新日志

查看 CHANGELOG.md 了解版本更新详情。

v0.0.1 (当前版本)

✨ 初始版本发布
🎯 支持 AI 组件生成
🛠️ 支持组件智能编辑
🔗 集成灵创开发平台

📄 许可证

本项目采用内部许可证，仅供快手内部使用。详见 LICENSE.txt。

👥 团队

快手 ES 前端团队

负责插件的设计、开发和维护
持续优化用户体验和功能完善

🔗 相关链接

项目仓库：GitLab
内部文档：快手内部技术文档平台
灵创平台：快手内部 AI 开发平台

💡 提示：如果在使用过程中遇到问题，请及时反馈给开发团队。我们致力于为快手前端开发者提供最佳的 AI 辅助开发体验！

Kwai AiCode

kwai-fe