第一章:为什么选择本地 LLM?

1.1 公有云 LLM 的风险

风险 说明
代码泄露 将私有代码发送至第三方服务器(如 GitHub Copilot 默认上传)
不可控输出 无法定制领域知识(如你的 Flask 项目结构)
网络依赖 内网开发环境无法访问外网

1.2 本地 LLM 方案对比

工具 模型 显存需求 优点
Ollama CodeLlama, StarCoder 6GB+(7B 量化) ✅ 极简安装、REST API、多平台
LM Studio 同上 同上 图形界面友好
Text Generation WebUI 支持 GGUF/AWQ 灵活 配置复杂

选择 Ollama:命令行友好、API 标准、适合集成到开发工具链。


第二章:本地部署 CodeLlama

2.1 安装 Ollama

# macOS / Linux
curl -fsSL https://ollama.com/install.sh | sh

# Windows:下载安装包 https://ollama.com/download

2.2 拉取量化模型(4-bit)

# 推荐:CodeLlama 7B Python 特化版
ollama pull codellama:7b-python-q4_K_M

# 或通用编程模型
ollama pull starcoder:7b-q4_K_M

显存要求:约 6GB GPU 或 16GB RAM(CPU 模式)

2.3 启动本地服务

Ollama 自动启动 http://localhost:11434,提供 OpenAI 兼容 API:

# 测试
curl http://localhost:11434/api/generate -d '{
  "model": "codellama:7b-python-q4_K_M",
  "prompt": "def hello(name): return f\"Hello {name}\""
}'

第三章:VS Code 插件架构设计

3.1 插件功能清单

  • 右键菜单:在 .py / .vue 文件中“生成 CRUD”
  • 输入面板:描述需求(如“创建用户管理 API”)
  • 预览窗口:显示 AI 生成代码,支持 Diff 对比
  • 一键插入:将代码插入光标位置或新建文件
  • 运行测试:直接执行生成的 Pytest 用例

3.2 技术栈

  • 插件框架:VS Code Extension API(TypeScript)
  • 通信协议:调用本地 Ollama API
  • 上下文提取:读取项目文件 + AST 解析
  • 安全层:沙箱执行(可选)

第四章:上下文感知 —— 项目结构理解

4.1 自动识别 Flask 项目结构

插件扫描项目根目录,定位关键文件:

project/
├── app/
│   ├── models/       ← 用户模型定义
│   ├── routes/       ← 路由模块
│   └── __init__.py
├── tests/            ← 单元测试目录
└── requirements.txt

4.2 AST 解析模型类

使用 TypeScript 的 @typescript-eslint/typescript-estree(或 Python 的 ast 模块)提取 SQLAlchemy 模型:

// utils/ast-parser.ts
import * as fs from 'fs';
import * as parser from '@typescript-eslint/typescript-estree';

export function extractUserModel(filePath: string) {
  const code = fs.readFileSync(filePath, 'utf-8');
  const ast = parser.parse(code, { sourceType: 'module' });
  
  // 遍历 AST,查找 class User(Base)
  // 提取字段:id, username, email...
  return { name: 'User', fields: [...] };
}

输出:结构化模型信息,用于提示词工程。


第五章:提示词工程(Prompt Engineering)

5.1 CRUD 生成提示词模板

你是一个资深 Python Flask 开发者。根据以下 SQLAlchemy 模型,生成完整的 CRUD 路由和 Pytest 测试。

模型:
class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True)
    email = db.Column(db.String(120))

要求:
1. 使用 Flask RESTful 风格(GET /users, POST /users 等)
2. 返回 JSON 格式
3. 包含错误处理(404, 400)
4. 生成对应的 Pytest 测试函数

只输出代码,不要解释。

5.2 动态填充上下文

插件将 AST 提取的模型信息注入提示词:

const prompt = `
你是一个资深 Python Flask 开发者。根据以下 SQLAlchemy 模型...

模型:
class  $ {modelName}(db.Model):
 $ {fields.map(f => `     $ {f.name} = db.Column( $ {f.type})`).join('\n')}

要求:...
`;

第六章:代码生成与预览

6.1 调用 Ollama API

// services/ai-service.ts
import axios from 'axios';

export async function generateCode(prompt: string): Promise<string> {
  const response = await axios.post('http://localhost:11434/api/generate', {
    model: 'codellama:7b-python-q4_K_M',
    prompt,
    stream: false,
    options: { temperature: 0.2 } // 降低随机性
  });
  return response.data.response;
}

6.2 预览面板(Webview)

VS Code 插件使用 Webview 展示生成结果:

// panels/PreviewPanel.ts
const panel = window.createWebviewPanel(
  'aiPreview',
  'AI Generated Code',
  ViewColumn.Beside,
  { enableScripts: true }
);

panel.webview.html = `
  <pre><code> $ {highlight(generatedCode)}</code></pre>
  <button onclick="vscode.postMessage({command: 'accept'})">Accept</button>
`;

支持语法高亮:使用 Prism.js 或 Monaco Editor。


第七章:安全沙箱机制

7.1 为什么需要沙箱?

AI 可能生成危险代码:

# 恶意示例
os.system('rm -rf /')  # 删除系统文件
exec(request.form['code'])  # 任意代码执行

7.2 沙箱策略

策略 1:静态规则过滤
const DANGEROUS_PATTERNS = [
  /os\.system/,
  /exec  $ /,
  /eval  $ /,
  /__import__/
];

function isSafeCode(code: string): boolean {
  return !DANGEROUS_PATTERNS.some(pattern => pattern.test(code));
}
策略 2:Pytest 沙箱运行(可选)
  • 在 Docker 容器中运行生成的测试
  • 限制文件系统访问、网络权限
# sandbox/Dockerfile
FROM python:3.11-slim
RUN adduser --disabled-password --gecos '' sandbox
USER sandbox
WORKDIR /app
COPY . .
CMD ["pytest", "--tb=short"]

第八章:人机协同工作流

8.1 开发者控制权

  • 永不自动提交:所有生成代码需人工确认
  • Diff 对比:高亮新增/修改部分
  • 撤销支持:一键回退插入操作

8.2 迭代优化

  • 反馈机制:开发者可标记“生成质量差”,用于微调本地模型(未来)
  • 模板库:保存优质生成结果为团队模板

第九章:扩展场景

9.1 Vue 组件生成

提示词示例:

根据以下 API 规范,生成 Vue 3 + TypeScript 组件:
- GET /api/users → 返回 User[] 
- 字段:id, username, email
- 使用 Element Plus 表格展示
- 支持搜索和分页

9.2 SQL 查询生成

从自然语言生成 SQLAlchemy 查询:

输入:“查找最近7天注册的活跃用户”
输出:
from datetime import datetime, timedelta
seven_days_ago = datetime.utcnow() - timedelta(days=7)
users = User.query.filter(
    User.created_at >= seven_days_ago,
    User.is_active == True
).all()

9.3 单元测试补全

为现有函数生成 Pytest:

# 输入函数
def calculate_discount(price, is_vip):
    return price * 0.8 if is_vip else price

# AI 生成测试
def test_calculate_discount_vip():
    assert calculate_discount(100, True) == 80

def test_calculate_discount_regular():
    assert calculate_discount(100, False) == 100

第十章:性能与体验优化

10.1 缓存机制

  • 缓存相同提示词的生成结果(避免重复请求)
  • 使用 SQLite 存储历史记录

10.2 流式响应

Ollama 支持流式输出,提升响应速度:

// 使用 SSE 接收 token 流
const stream = await fetch('http://localhost:11434/api/generate', {
  method: 'POST',
  body: JSON.stringify({ ... })
});
const reader = stream.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  // 实时追加到预览面板
}

总结:AI 是副驾驶,开发者是机长

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐