分享我日常使用 Cursor 的一些小技巧

代码小学僧
4,756 阅读6分钟

前言

高强度使用 Cursor 几个月了，真的是越用越喜欢了，这篇文章记录一下我日常开发过程中的提效方法，希望对大家有帮助。

模式选择

需要 AI 直接帮助修改代码选择 COMPOSER 模式，会修改代码后呈现 diff 然后自己选择是否 accept 修改后的代码。只需要问问题的话使用 CHAT 模式。

image.png

2025.3.22修改: cursor 更新版本太快了，现在没有 COMPOSER 模式了，都收归到了左下角,还可以 Auto 自动选择合适的模型处理任务

image.png

快速完成接口定义

一阶段: CV 搬运工

开发过程中，后端出好接口后，前端项目需要完成接口函数的定义以及一些参数、响应值的 ts 类型定义，传统方式就是手写，比较负责的同学会写好完善的 ts 类型，不太负责嫌麻烦的同学可能就都 anyscript 了（狗头）。

但开发任务不紧急的情况下还是写好类型吧，不然自己写代码也难受，不然什么都.不出来。

后面了解到有 Apifox 这类的软件可以快速复制 ts 类型，提高了一点点效率。

image.png image.png

二阶段: 使用代码生成代码

再进一步提升效率，使用代码生成工具来生成模版代码，社区中有许多大佬们做好了工具，作用是可以通过根据 OpenApi3 规范的文档快速生成请求代码。例如:

我日常维护的项目使用的是 umi 我就使用 @umijs/openapi了。

具体使用方式这里不再赘述可以参考下这篇文章: juejin.cn/post/732089…

我日常的使用方式就是后端出新接口了，使用 Apifox 导出部分接口，选择导出 url 后会给一个本地地址。

image.png image.png image.png

复制本地url，添加到项目内配置的 openapi.config.ts文件 schemePatch，再执行pnpm openapi开始生成相关请求代码与 ts。

image.png

可以看到生成了一个文件夹，内容大差不差，但还需要自行手动斧正一下，虽然这些开源工具提供了丰富的自定义 hook 功能，但是我尝试写了一下，生成的代码不符合我的预期，也需要自行去了解自定义的规则，我们后面使用 Cursor 来省掉这一步骤。

（ps:之前尝试了让 ai 来完成 openapi.config.ts自定义 hook 的代码逻辑，但是写的并不好，最后没有使用）

image.png image.png

我习惯把一个模块相关的请求代码放在一个 ts 文件内，手动搬运一下代码到一个文件中。

三阶段: AI修正生成后的代码格式

但代码和之前业务定义的代码肯定有差异，比如你的仓库中已经定义好了一些系统自定义的接口响应值枚举，分页接口响应的数据结构之类 的 TS。

export interface ApiResult<TData = unknown> {
  code: number;
  data?: TData;
  msg?: string;
}

export interface PagintaionData<T> {
  total: number; 
  items?: T[]; 
  records?: T[];
}

export interface PageBasicParams {
  isAsc?: boolean;
  orderBy?: string;
  orderType?: string;
  page?: number;
  size?: number;
  pos?: number;
}

我希望把生成的接口代码修改为系统内定义好的规范，避免变的龙飞凤舞。这时候就需要 Cursor 出马来干 dirty code 的活了。

export function TestA(params: TestAparams) {
  return request<ApiResult<TestAResponse>>('/test/a', {
    method: 'GET',
    params,
  });
}

export function TestB(body: TestBbody) {
  return request<ApiResult<TestBResponse>>('/test/a', {
    method: 'POST',
    body,
  });
}

引用让Cursor参照的系统内规范的文件，再添加上刚刚CV搞到一起的 test 文件。

image.png

左侧的是修改后的，中级悬浮的截图是修改前，最右侧是Cursor 讲述的操作过程。我们还可以让他去掉不想看到的headers、options，以及使用 js 对象简写的写法让代码变的更清晰。

image.png

总结就是使用代码生成工具+Cursor 进一步优化流程，省去了自己自定义 hook 的过程，把脏活累活交给 ai 来完成就好。

上传截图快速生成代码

我现在一点代码都懒得写了，选择COMPOSER，然后直接截图丢给 Cursor 写个大概然后我 review 一下。

样式我喜欢让 AI 使用 tailwind，这种原子化 css 在一个文件写属于是对 AI 友好形的技术。曾经的我也不喜欢原子化 css，后面才真香的 ~。

这里暂时没补图片，后续补充 ~。

优化代码

优化前

取数据然后构造回显再去重又要提交转换成后端要的格式。很零散。

image.png

优化提问

将三个文件添加到上下文中并提出要求。

image.png

优化后

AI 帮我收集到一个文件，然后写的很工整。

image.png

指定文件为我们讲解代码

我们想帮开源项目修 bug，快速了解项目可以 @Fold 指定某些文件夹下，让 AI 给我们讲解。

image.png

使用@Docs 功能告诉 AI 我们使用的库

开发浏览器插件的时候使用了 plasmo，我就把 plasmo 的文档告诉了 Cursor。

image.png

进入到 @Docs后会显示导入过的文档与官方内置的一些文档。

image.png

我问了一个文档中提到的用法看看 Cursor 能不能正确根据文档回复

docs.plasmo.com/framework/a…

看起来效果符合预期。nice~

image.png

我们日常开发中可以把常使用的 UI 库，第三方库的文档导入到 Cursor，例如 Antd、MUI、ahook 等等，以此来提升开发效率，让 AI 根据文档 API 写代码而不是乱编。

配置 rules(.cursorrules)

通过在项目的根目录放置 .cursorrules 文件，我们可以在这个文件里提供更多用与 Cursor 编辑的上下问，告诉 AI 项目使用的技术栈，项目规范等。

例如本项目优先使用 tailwind 编写样式，antd 为项目的组件库，在完成任务时候优先考虑使用组件库已有的组件等规则等等...

预设能显著提高 Curosr 生成代码的准确性和相关性，使其更好地符合项目需求。

我在我维护的项目中这样编写了规则，团队开发的项目可以团队一起优化 rule 文件。

image.png

开源社区 cursorrules 相关的仓库

模型选择

点击进入 Cursor Setting 可以选择多款模型，然后对话的时候可以切换不同模型来处理问题。

image.png

本人亲测使用过 claude-3.5-sonnet、gpt-4o-mini、gemini-2.0-flash-thinking-expo 体验下来最佳的是claude-3.5-sonnet 可以上传截图并提问，gemini-2.0-flash-thinking-expo据说是专业编程领域相关的 LLM 模型，回答问题大多数情况也能符合预期。gpt-4o-mini有时候不太聪明的样子。欢迎大家补充其他模型的体验在评论区分享一下。

image.png

结语

AI时代的到来，显著提升了程序员的开发效率，缩短了工作经验带来的差距。现在有AI“老师傅”随时指导，大大减少了初级与高级开发之间的差距。希望大家多多使用AI工具，省下的时间可以用来放松和提升自己~ 加油共勉 💪🏻

avatar
文章
阅读
粉丝