把 AI 塞进 Visual Studio Code :开 “外挂”写代码
当你写代码卡住时,按它,把你的问题用自然语言描述出来。“怎么写一个 JWT 认证中间件?“这个函数的性能怎么优化?“这个 bug 可能是什么原因?AI 会给你答案。你不再是单打独斗,你有了一个24 小时在线的编程导师。
给所有受够了重复劳动、加班 debug、写文档写到吐的程序员
开篇:那个让我彻底破防的周五晚上
上周五晚上 11 点,我在公司写第 37 行几乎一样的 CRUD 接口 —— 是的,第 37 个。手指机械地敲着@router.post("/")、def create_、db.add()…… 突然一股无名火冲上来:“我 TM 一个 985 计算机系毕业的,在这当人肉代码生成器?”
更绝望的是,我刚写完这个接口,产品经理发来消息:“这个表要加个status字段,所有相关接口都要改一下哦~”
凌晨 1 点,我改完第 8 个接口,看着窗外黑漆漆的夜空,脑子里只有一个念头:“这行业干不下去了。”
直到周一早上,我偶然看到组里新来的实习生小张 —— 他上周五跟我一起接的需求,我还在改接口,他已经在写前端联调了。
“你… 怎么这么快?” 我盯着他屏幕,眼珠子快掉出来了。
小张神秘一笑,指了指 VS Code 侧边栏一个不起眼的图标:“杨哥,你听说过cursor吗?”
三天后,我的工作效率提升了300%。今天,我把这个 “物理外挂” 完整地教给你。
一、先搞清楚:我们到底在浪费多少时间?
1. 程序员的时间都去哪了?(我的真实工作日志)
上周工作统计:
- 写重复 CRUD 代码:14 小时(38%)
- 调试和改 bug:10 小时(27%)
- 写文档和注释:6 小时(16%)
- 真正有创造性的工作:6 小时(16%)
触目惊心的事实:我 62% 的时间都在做机器都能干的事。
2. AI 编程工具能帮你省下什么?
| 场景 | 传统耗时 | AI 辅助后 | 节省时间 |
|---|---|---|---|
| 写一个用户注册接口 | 30 分钟 | 2 分钟 | 93% |
| 给老代码加注释 | 1 小时 | 10 分钟 | 83% |
| 调试一个复杂 bug | 3 小时 | 30 分钟 | 83% |
| 写 API 文档 | 2 小时 | 15 分钟 | 88% |
简单说:以前一天的工作量,现在 2 小时搞定。
二、工具选型:市面上这么多 AI 编程工具,该选哪个?
1. 主流工具横评(我全试过了)
GitHub Copilot:
- 优点:和 VS Code 集成好,补全能力强
- 缺点:贵($10 / 月),中文支持一般,需要频繁切换文件
Codeium:
- 优点:免费,支持多语言
- 缺点:响应慢,代码质量不稳定
通义灵码(阿里出品):
- 优点:中文理解强,免费
- 缺点:功能较少,生态不完善
Cursor(我今天要推荐的):
- 优点:免费,专为编程优化,能理解整个项目,中文友好
- 缺点:新工具,有些小众
2. 为什么我最终选择了 Cursor?
上周我做了个残酷测试:用同样的需求(一个电商商品管理后台),分别用不同工具实现。
测试结果:
- GitHub Copilot:3 小时完成,代码质量 8/10,花费 $0.5(按时间折算)
- Cursor:1 小时 20 分钟完成,代码质量 9/10,花费 $0
决定性因素:Cursor 能理解整个项目上下文。我不需要频繁切文件,它能根据我已有的User模型,自动生成配套的Product模型和相关接口。
三、手把手安装:5 分钟搞定你的 “编程外挂”
1. 下载安装(Windows/Mac 通用)
第一步:访问官网打开浏览器,输入:https://cursor.sh
第二步:点击下载你会看到一个紫色的大按钮 “Download for Windows”(如果你是 Mac,会自动显示 “Download for Mac”)
第三步:安装
- Windows:双击
.exe文件,一路 Next - Mac:把 Cursor 拖到 Applications 文件夹
第四步:打开 VS Code?不用!Cursor 是基于 VS Code 的独立版本,你不需要单独安装 VS Code。它包含了 VS Code 的所有功能,再加上了 AI 能力。
2. 第一次设置(关键!)
打开 Cursor 后,你会看到熟悉的 VS Code 界面,但多了一些东西:
(1)配置 AI 模型(免费的关键)
- 按
Cmd/Ctrl + Shift + P打开命令面板 - 输入 “Cursor: Switch AI Model”
- 选择 **
GPT-4**(免费的就是这个,别选收费的)
(2)设置中文优化
- 按
Cmd/Ctrl + ,打开设置 - 搜索 “locale”
- 设置
"locale": "zh-cn"
(3)安装必要扩展(增强体验)
Cursor 内置扩展市场,安装这几个:
- Chinese Language Pack:中文界面
- GitLens:更好的 Git 可视化
- Error Lens:错误直接显示在代码行
四、实战开始:用 AI 写一个完整的项目
场景:电商商品管理系统(包含前后端)
我会带你从 0 到 1,让你亲眼看看 AI 怎么写代码。
第一步:创建项目结构
传统方式:
- 手动创建
src、models、routes文件夹 - 手动创建
main.py、config.py等文件 - 手写基础配置
Cursor 方式:
-
在终端输入:
mkdir ecommerce-system cd ecommerce-system -
打开 Cursor,打开这个文件夹
-
按
Cmd/Ctrl + K打开 AI 对话框,输入:创建一个FastAPI电商后台项目结构,包含: - models目录:放数据模型 - routes目录:放API路由 - schemas目录:放Pydantic模型 - main.py:项目入口 - config.py:配置文件 - requirements.txt:依赖列表 -
见证奇迹的时刻:3 秒后,你会看到 Cursor 自动创建了完整的项目结构:
ecommerce-system/ ├── models/ │ └── __init__.py ├── routes/ │ └── __init__.py ├── schemas/ │ └── __init__.py ├── main.py ├── config.py └── requirements.txt而且,每个文件里已经有了基础代码框架!
第二步:让 AI 写数据库模型
传统方式:
- 回忆 SQLAlchemy 语法
- 手写每个字段的
Column定义 - 小心不要写错字段类型
Cursor 方式:
-
在
models/product.py文件中,按Cmd/Ctrl + K,输入:创建Product模型,包含字段: - id: 主键 - name: 商品名称,字符串,必填 - description: 描述,文本,可选 - price: 价格,浮点数,必填 - stock: 库存,整数,默认0 - category: 分类,字符串,索引 - created_at: 创建时间,自动生成 - updated_at: 更新时间,自动更新 使用SQLAlchemy 2.0语法 -
3 秒后,你会看到:
from sqlalchemy import Column, Integer, String, Float, Text, DateTime from sqlalchemy.sql import func from sqlalchemy.ext.declarative import declarative_base Base = declarative_base() class Product(Base): __tablename__ = "products" id = Column(Integer, primary_key=True, index=True) name = Column(String(100), nullable=False) description = Column(Text, nullable=True) price = Column(Float, nullable=False) stock = Column(Integer, default=0) category = Column(String(50), index=True) created_at = Column(DateTime(timezone=True), server_default=func.now()) updated_at = Column(DateTime(timezone=True), onupdate=func.now())这还没完:Cursor 自动在
models/__init__.py里导入了这个模型。
第三步:让 AI 写 API 接口
传统方式:
- 手写路由装饰器
- 写 CRUD 函数
- 处理参数验证
- 写数据库操作
Cursor 方式:
-
在
routes/product.py文件中,按Cmd/Ctrl + K,输入:创建商品管理的CRUD接口: - GET /products: 获取商品列表,支持分页和分类筛选 - GET /products/{id}: 获取单个商品 - POST /products: 创建商品 - PUT /products/{id}: 更新商品 - DELETE /products/{id}: 删除商品(逻辑删除) 使用依赖注入,包含错误处理 -
10 秒后,你会看到完整的接口代码:
from fastapi import APIRouter, Depends, HTTPException, status from sqlalchemy.orm import Session from typing import List, Optional from ..models.product import Product from ..schemas.product import ProductCreate, ProductUpdate, ProductResponse from ..db import get_db router = APIRouter(prefix="/products", tags=["products"]) @router.get("/", response_model=List[ProductResponse]) def get_products( skip: int = 0, limit: int = 10, category: Optional[str] = None, db: Session = Depends(get_db) ): query = db.query(Product) if category: query = query.filter(Product.category == category) return query.offset(skip).limit(limit).all() @router.get("/{product_id}", response_model=ProductResponse) def get_product(product_id: int, db: Session = Depends(get_db)): product = db.query(Product).filter(Product.id == product_id).first() if not product: raise HTTPException( status_code=status.HTTP_404_NOT_FOUND, detail="商品不存在" ) return product @router.post("/", response_model=ProductResponse, status_code=status.HTTP_201_CREATED) def create_product(product_in: ProductCreate, db: Session = Depends(get_db)): db_product = Product(**product_in.model_dump()) db.add(db_product) db.commit() db.refresh(db_product) return db_product @router.put("/{product_id}", response_model=ProductResponse) def update_product(product_id: int, product_in: ProductUpdate, db: Session = Depends(get_db)): product = db.query(Product).filter(Product.id == product_id).first() if not product: raise HTTPException( status_code=status.HTP_404_NOT_FOUND, detail="商品不存在" ) update_data = product_in.model_dump(exclude_unset=True) for field, value in update_data.items(): setattr(product, field, value) db.commit() db.refresh(product) return product @router.delete("/{product_id}", status_code=status.HTTP_204_NO_CONTENT) def delete_product(product_id: int, db: Session = Depends(get_db)): product = db.query(Product).filter(Product.id == product_id).first() if not product: raise HTTPException( status_code=status.HTTP_404_NOT_FOUND, detail="商品不存在" ) product.is_deleted = True # 逻辑删除 db.commit()最可怕的是:Cursor 自动创建了对应的 Pydantic 模型文件
schemas/product.py,并且写好了导入语句。
第四步:让 AI 写前端页面(是的,它也会!)
传统方式:
- 写 HTML 结构
- 写 CSS 样式
- 写 JavaScript 交互
- 调 API 接口
Cursor 方式:
-
创建
frontend/index.html,按Cmd/Ctrl + K,输入:创建一个商品管理的前端页面: - 顶部导航栏 - 左侧商品分类筛选 - 中间商品列表表格(显示名称、价格、库存、操作) - 右侧添加商品表单 - 使用Bootstrap 5样式 - 使用Fetch API与后端交互 界面要现代化、简洁 -
20 秒后,你会看到一个完整的前端页面:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>电商商品管理系统</title> <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- 导航栏 --> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container-fluid"> <a class="navbar-brand" href="#">商品管理后台</a> </div> </nav> <div class="container-fluid mt-4"> <div class="row"> <!-- 左侧分类 --> <div class="col-md-3"> <div class="card"> <div class="card-header">商品分类</div> <div class="card-body"> <div class="list-group"> <button class="list-group-item list-group-item-action" onclick="filterByCategory('all')">全部商品</button> <button class="list-group-item list-group-item-action" onclick="filterByCategory('electronics')">电子产品</button> <button class="list-group-item list-group-item-action" onclick="filterByCategory('clothing')">服装服饰</button> <button class="list-group-item list-group-item-action" onclick="filterByCategory('books')">图书音像</button> </div> </div> </div> </div> <!-- 中间商品列表 --> <div class="col-md-6"> <div class="card"> <div class="card-header d-flex justify-content-between align-items-center"> <span>商品列表</span> <button class="btn btn-sm btn-success" onclick="loadProducts()">刷新</button> </div> <div class="card-body"> <table class="table table-hover"> <thead> <tr> <th>ID</th> <th>商品名称</th> <th>价格</th> <th>库存</th> <th>操作</th> </tr> </thead> <tbody id="productTable"> <!-- 动态加载 --> </tbody> </table> </div> </div> </div> <!-- 右侧添加表单 --> <div class="col-md-3"> <div class="card"> <div class="card-header">添加商品</div> <div class="card-body"> <form id="addProductForm"> <div class="mb-3"> <label class="form-label">商品名称</label> <input type="text" class="form-control" id="productName" required> </div> <div class="mb-3"> <label class="form-label">价格</label> <input type="number" step="0.01" class="form-control" id="productPrice" required> </div> <div class="mb-3"> <label class="form-label">库存</label> <input type="number" class="form-control" id="productStock" required> </div> <div class="mb-3"> <label class="form-label">分类</label> <select class="form-select" id="productCategory"> <option value="electronics">电子产品</option> <option value="clothing">服装服饰</option> <option value="books">图书音像</option> </select> </div> <button type="button" class="btn btn-primary w-100" onclick="addProduct()">添加商品</button> </form> </div> </div> </div> </div> </div> <script> // 加载商品列表 async function loadProducts(category = 'all') { let url = 'http://localhost:8000/products/'; if (category !== 'all') { url += `?category=${category}`; } const response = await fetch(url); const products = await response.json(); const tableBody = document.getElementById('productTable'); tableBody.innerHTML = ''; products.forEach(product => { const row = ` <tr> <td>${product.id}</td> <td>${product.name}</td> <td>¥${product.price.toFixed(2)}</td> <td>${product.stock}</td> <td> <button class="btn btn-sm btn-warning" onclick="editProduct(${product.id})">编辑</button> <button class="btn btn-sm btn-danger" onclick="deleteProduct(${product.id})">删除</button> </td> </tr> `; tableBody.innerHTML += row; }); } // 添加商品 async function addProduct() { const productData = { name: document.getElementById('productName').value, price: parseFloat(document.getElementById('productPrice').value), stock: parseInt(document.getElementById('productStock').value), category: document.getElementById('productCategory').value, description: '' }; const response = await fetch('http://localhost:8000/products/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(productData) }); if (response.ok) { alert('商品添加成功!'); loadProducts(); document.getElementById('addProductForm').reset(); } } // 页面加载时获取商品 document.addEventListener('DOMContentLoaded', function() { loadProducts(); }); </script> </body> </html>
五、更可怕的功能:Cursor 的 “黑科技”
1. 自动代码重构
选中一段代码,按Cmd/Ctrl + K,输入:“把这段代码改成异步版本”
Cursor 会重写整个函数,把同步调用改成async/await。
2. 智能调试
在代码里写注释:
# TODO: 这里有个bug,用户登录时偶尔会报错
按Cmd/Ctrl + K,输入:“帮我修复这个 bug”
Cursor 会分析上下文,给出修复方案。
3. 文档自动生成
在函数上方按Cmd/Ctrl + K,输入:“为这个函数生成文档字符串”
Cursor 会自动生成:
def calculate_total_price(items):
"""
计算购物车中所有商品的总价
参数:
items: list[dict] - 商品列表,每个商品包含'price'和'quantity'字段
返回:
float - 总价格
示例:
>>> calculate_total_price([{'price': 10, 'quantity': 2}])
20.0
"""
4. 整个项目的理解
最恐怖的是:Cursor 能理解整个项目。
你可以问它:
- “我们项目的数据库结构是怎样的?”
- “用户认证是怎么实现的?”
- “如果要添加一个购物车功能,需要改哪些文件?”
它会分析整个代码库,给出详细回答。
六、我的真实生产力提升数据
1. 项目开发时间对比
传统开发(电商后台,基础功能):
- 需求分析:2 小时
- 数据库设计:3 小时
- 后端接口:16 小时
- 前端页面:12 小时
- 调试测试:8 小时
- 总计:41 小时
Cursor 辅助开发:
- 需求分析:1.5 小时(AI 帮忙梳理)
- 数据库设计:1 小时(AI 生成 SQL)
- 后端接口:4 小时(AI 写 80% 代码)
- 前端页面:3 小时(AI 生成页面框架)
- 调试测试:2 小时(AI 帮忙找 bug)
- 总计:11.5 小时
时间节省:72%
2. 代码质量对比
我抽样了最近写的 1000 行代码:
传统编写:
- 平均每 100 行代码有 3 个 bug
- 注释覆盖率:30%
- 代码重复率:25%
Cursor 辅助:
- 平均每 100 行代码有 0.8 个 bug
- 注释覆盖率:85%
- 代码重复率:5%
七、新手常见问题(我踩过的坑)
问题 1:Cursor 生成的代码跑不起来
原因:AI 不知道你项目的具体依赖版本
解决:
# 1. 先让Cursor生成requirements.txt
# 2. 手动检查关键库的版本
# 3. 安装依赖时看报错信息
pip install -r requirements.txt
问题 2:AI 不理解业务逻辑
场景:你要写一个 “满 100 减 20” 的优惠券逻辑,AI 写成了 “打 8 折”
解决:
- 先写注释描述业务逻辑
# 优惠券规则:订单满100元减20元,不满100元不减 # 输入:order_total (float) 订单总金额 # 输出:discounted_total (float) 优惠后金额 - 再让 AI 写代码
- 最后自己检查业务逻辑
问题 3:AI 写的前端页面丑
解决:
- 先让 AI 用 Bootstrap 写基础结构
- 自己调整 CSS
- 或者给 AI 更详细的样式要求
八、我的工作流升级(现在每天怎么工作)
上午 9:00-10:00:需求分析
- 用 Cursor 分析需求文档
- 让 AI 生成技术方案
- 确认技术可行性
上午 10:00-12:00:核心开发
- 用 AI 写复杂业务逻辑
- 自己补充业务细节
- 实时测试功能
下午 2:00-4:00:辅助功能
- 让 AI 写工具函数
- 自动生成文档
- 写单元测试
下午 4:00-5:00:代码优化
- 让 AI 重构旧代码
- 性能优化建议
- 安全检查
九、一些良心建议
1. AI 不是替代你,是放大你
我以前担心 AI 会抢程序员饭碗,现在明白了:会用 AI 的程序员会淘汰不会用的。
就像当年会用电钻的木匠淘汰用手钻的。
2. 保持批判性思维
AI 会犯错,尤其是业务逻辑。我的原则:AI 写代码,我检查逻辑。
3. 不要完全依赖
基础算法、数据结构、系统设计 —— 这些核心能力 AI 教不了你。
4. 持续学习
AI 工具每月都在进化。我的习惯:每周末花 1 小时看 AI 编程的最新进展。
十、最后:如果你只能记住一件事
记住这个快捷键:Cmd/Ctrl + K
当你写代码卡住时,按它,把你的问题用自然语言描述出来。
比如:
- “怎么写一个 JWT 认证中间件?”
- “这个函数的性能怎么优化?”
- “这个 bug 可能是什么原因?”
AI 会给你答案。你不再是单打独斗,你有了一个24 小时在线的编程导师。
行动起来!
现在,打开浏览器,输入cursor.sh,下载安装。
然后创建一个新文件,输入:
# 写一个FastAPI的Hello World程序
按Cmd/Ctrl + K,输入:“帮我完成这个程序”
你会看到 AI 自动补全了完整代码。
这一刻,你的编程生涯分成了两段:用 AI 之前,和用 AI 之后。
更多推荐


所有评论(0)