ゴゴゴゴゴ
Skip to content
JOJO
首页文章项目知识库相册音乐
全站搜索
  • Navigate
  • Go to Page
  • escClose
© 2026 JOJOBuilt with Next.js

四种声音一个时代

这里收藏周杰伦、王力宏、陶喆与林俊杰的专辑,也把四位创作者放回完整唱片的语境。陶喆以松弛的律动重塑华语 R&B,周杰伦把说唱、古典与中国式旋律带进流行音乐,王力宏在抒情、摇滚和东方元素之间拓宽制作边界,林俊杰则用细密旋律与宽阔声线记录城市情绪。这里不打乱曲序,也不把专辑压缩成热门单曲;挑一张封面,从第一首听到最后一首,感受开场、中段与尾声如何共同完成一段叙事。

左右滑动浏览,轻触封面,从第一首开始听

正在播放的唱片

选择一首歌曲查看歌词
专辑封面

专辑

    请选择一张唱片等待选曲
    0:00
    0:00

    键盘快捷键

    搜索
    / 或 ⌘K
    回到首页
    G H
    博客列表
    G B
    切换主题
    T
    关闭弹窗
    Esc
    显示帮助
    ?

    按 Esc 关闭此窗口

    Blog550
    • 全部文章(550)
    • 包管理工具(8)
      • Bun 完全指南
      • fnm 完全指南
      • ni 完全指南
      • npm 完全指南
      • nrm 完全指南
      • nvm 完全指南
      • pnpm 完全指南
      • Yarn 完全指南
    • 并发异步(7)
      • 异步任务取消机制
      • Promise静态方法汇总
      • 封装超时工具方法
      • 并发与并行
      • 封装并发任务方法
      • 一道并发相关的面试题
      • 文件写入的原子化与并发操作
    • 打包工具(10)
      • Bun - 全栈 JavaScript 运行时与打包器
      • esbuild - 用 Go 写的极速打包器
      • Parcel - 零配置的极速打包工具
      • Rolldown - Vite 团队打造的 Rust 打包器
      • Rollup - 专注于库开发的打包工具
      • Rspack - Rust 驱动的 Webpack 替代品
      • SWC - Rust 驱动的超快编译器
      • Turbopack - Rust 驱动的下一代打包工具
      • Vite - 下一代前端构建工具
      • Webpack - 功能最强大的模块打包器
    • 算法(74)
      • 课程必看
      • 算法基本概念
      • 评判算法的好坏
      • 复习对数
      • 常见的复杂度
      • 常见算法思维
      • 递归
      • 数据结构
      • 数组结构
      • 顺序查找
      • 二分查找
      • 插值查找
      • 冒泡排序
      • 选择排序
      • 插入排序
      • 折半插入排序
      • 希尔排序
      • 归并排序
      • 快速排序
      • 链表结构
      • 双向链表
      • 单向循环链表
      • 双向循环链表
      • 栈结构
      • 队列结构
      • 循环队列
      • 击鼓传花游戏
      • 双端队列
      • 回文检查器
      • 集合结构
      • 字典结构
      • 树结构
      • 二叉树
      • 二叉树遍历
      • 前序中序还原二叉树
      • 后序中序还原二叉树
      • 二叉树深度优先搜索
      • 二叉树广度优先搜索
      • 二叉树的比较
      • 二叉树diff算法
      • 二叉搜索树
      • 二叉搜索树常见操作
      • 平衡二叉树
      • 二叉树左单旋
      • 二叉树右单旋
      • 二叉树双旋
      • 二叉堆
      • 堆排序
      • 哈夫曼树
      • 图结构
      • 邻接矩阵
      • 邻接表
      • 构建图
      • 图的深度优先搜索
      • 图的广度优先搜索
      • 普里姆算法
      • 克鲁斯卡尔算法
      • LRU算法
      • 动态规划
      • 青蛙跳台阶
      • 不同路径问题
      • 凑零钱问题
      • 打家劫舍
      • 背包问题
      • 回溯算法
      • 数字组合
      • 电话号码字母组合
      • 复原IP地址
      • 数组子集
      • 贪心算法
      • 柠檬水找零
      • 摆动序列
      • 分发糖果
      • 跳跃游戏
    • 文档协同(12)
      • 课程说明
      • 文档协同常见方案
      • OT冲突算法
      • CRDT冲突算法
      • CRDT数据结构
      • 文章翻译
      • Yjs基础介绍
      • Yjs快速上手
      • Yjs细节补充
      • 监听机制
      • 标签页同步
      • WebSocket基础知识
    • 项目实战(1)
      • ShipAny:1小时开发海外游客「中国攻略 + AI旅游助手」SaaS网站
    • AI工具(9)
      • Claude Code 完全指南
      • ComfyUI 完全指南
      • GitHub Copilot 入门指南
      • Coze 完全指南
      • Cursor vs GitHub Copilot 全面对比
      • Cursor-完整指南
      • Dify 完全指南
      • Droid 完全指南
      • n8n 完全指南
    • Astro(5)
      • Astro 入门指南
      • Astro 路由与页面
      • Astro 组件与样式
      • Astro 内容集合
      • Astro 集成与部署
    • CSS(25)
      • CSS 选择器基础
      • CSS 盒模型
      • CSS 定位与层叠
      • 浮动与 BFC
      • Flexbox 布局
      • Grid 布局
      • 响应式设计
      • 伪类与伪元素
      • 现代选择器
      • CSS 变量
      • 层叠层
      • 过渡效果
      • CSS 动画
      • 变换与滤镜
      • 容器查询
      • 文字与排版
      • 背景与渐变
      • 滚动与溢出
      • 裁剪与遮罩
      • 颜色系统
      • 边框与阴影
      • 逻辑属性
      • CSS 函数
      • 多列布局
      • 用户交互
    • ES6+(40)
      • let 和 const 命令
      • 解构赋值基础
      • 解构赋值进阶
      • 字符串的扩展
      • 字符串新增方法
      • 正则表达式扩展
      • 数值的扩展
      • BigInt 大整数
      • 函数默认参数
      • rest 参数与扩展运算符
      • 箭头函数详解
      • 尾调用优化
      • 数组扩展方法
      • 数组新增方法
      • 数组不可变方法
      • 对象的扩展
      • Object 新增方法
      • Symbol 基础
      • Symbol 进阶应用
      • Set 数据结构
      • Map 数据结构
      • TypedArray 类型化数组
      • Proxy 基础
      • Proxy 进阶应用
      • Reflect 元编程
      • 元编程实战案例
      • 装饰器 Decorator
      • Iterator 迭代器
      • Generator 基础
      • Generator 进阶
      • Promise 基础
      • Promise 进阶
      • async 函数
      • await 与错误处理
      • 异步迭代
      • Class 基础
      • Class 继承
      • Module 语法
      • Module 加载
      • ES 新特性汇总
    • HTML(8)
      • HTML 入门:构建 Web 的基石
      • HTML5 语义化:让页面更有意义
      • HTML 表单基础:用户交互的起点
      • HTML 表单进阶:验证与现代特性
      • HTML 多媒体:音视频与响应式图片
      • HTML APIs(上):客户端存储完全指南
      • HTML APIs(下):交互与设备能力
      • Canvas 与 SVG:Web 图形绘制入门
    • JavaScript(30)
      • JavaScript 简介
      • 变量与数据类型
      • 运算符
      • 类型转换
      • 控制流语句
      • 函数基础
      • 对象基础
      • 数组基础
      • 原型与原型链
      • this 关键字
      • 面向对象编程
      • 作用域
      • 闭包
      • 执行上下文
      • DOM 选择器
      • DOM 操作
      • 事件处理
      • 事件委托
      • 错误处理
      • 调试技巧
      • 正则表达式
      • Date 日期对象
      • Math 对象
      • 定时器
      • JSON 处理
      • BOM 基础
      • 本地存储
      • 表单处理
      • AJAX 与 Fetch
      • 严格模式
    • Langchain(37)
      • Langchain基本介绍
      • 模型接口
      • 缓存
      • 提示词模板
      • 结构化提示词
      • Message消息对象
      • 消息占位
      • LCEL
      • 并发流式返回结果
      • Runnable接口
      • 条件路由
      • 字符串解析器
      • 结构化输出解析器
      • 列表输出解析器
      • JSON解析器
      • 正则解析器
      • 本地资源Loader
      • Web资源Loader
      • 文本切割
      • 嵌入处理
      • 内存型向量库
      • 检索优化
      • RAG实践
      • Memory基础
      • 自动维护聊天记录
      • 实现长程记忆
      • 持久化记忆
      • 第三方存储
      • Tools基础
      • Tools配置
      • Zod基础
      • LangChain中使用工具
      • 重新认识Agent
      • LangChain中创建Agent
      • Agent实践
      • 回退机制
      • 回调机制
    • LLM(34)
      • LLM发展历史
      • N-Gram模型
      • 词袋模型
      • 词元
      • 嵌入
      • Transformer内部结构
      • Transformer解码策略
      • Transformer块
      • 本地部署大模型
      • Agent
      • 流式返回信息
      • 支持上下文
      • 获取实时消息
      • 外接DeepSeek
      • Function Calling
      • MCP理论知识
      • Resources
      • Schema
      • 注册资源模板
      • Prompts
      • 监听资源更新
      • 远程通信方式
      • MCP Client
      • 大模型幻觉
      • RCT构词法
      • 提示词常见技巧
      • 基于反馈迭代优化
      • 改善提示效果
      • 提示词评估工具
      • RAG基础知识
      • RAG实践
      • RAG架构演进
      • 大模型微调
      • LoRA微调
    • MCP(8)
      • MCP 入门:连接 AI 与外部世界的桥梁
      • 搭建第一个 MCP Server
      • MCP Tools 深入:让 AI 具备行动能力
      • MCP Resources:向 AI 暴露数据
      • MCP Prompts:预定义 AI 交互模板
      • MCP Transport 与部署
      • 构建 MCP Client:集成到你的应用
      • 实战:构建文档助手 MCP Server
    • Nest(31)
      • 快速上手Nest Cli
      • 三层架构与MVC
      • IoC
      • Nest中的装饰器
      • 模块的基本概念
      • 什么是AOP
      • 中间件与守卫
      • 拦截器
      • 文件上传
      • 自定义装饰器
      • mysql相关回顾
      • 对于ORM的理解
      • 快速上手Redis
      • Nest中使用Redis
      • 状态保存方式
      • Nest中实现Session与JWT
      • JWT登录注册后端处理
      • 使用Passport与循环引用问题
      • 通过环境变量获取配置信息
      • RBAC权限设计1
      • RBAC权限设计2
      • Nest中使用Websocket
      • 日志处理
      • 面向切面的日志处理
      • 快速入门GraphQL
      • Nest中使用GraphQL
      • Swagger API文档
      • 单元测试与E2E测试
      • 安全防护实践
      • 定时任务与任务调度
      • Bull队列与异步任务
    • Next(36)
      • Next.js 简介
      • 项目创建与配置
      • App Router 概述
      • 创建第一个页面
      • 开发工具与调试
      • TypeScript 配置
      • 文件系统路由
      • 动态路由
      • 嵌套路由与布局
      • 路由组
      • 并行路由
      • 拦截路由
      • 导航与链接
      • 中间件
      • Server Components
      • Client Components
      • 混合渲染模式
      • Streaming 与 Suspense
      • 静态与动态渲染
      • 数据获取基础
      • 缓存策略
      • Server Actions
      • Route Handlers
      • 数据库集成
      • 错误处理
      • 图片优化
      • 字体优化
      • 脚本优化
      • 元数据与 SEO
      • 性能分析
      • 认证基础
      • NextAuth 集成
      • 环境变量与配置
      • 测试策略
      • 部署方案
      • 项目实战
    • Nuxt(36)
      • web应用变迁史
      • 课程说明
      • SSR初体验
      • 水合操作
      • 改造CSR项目
      • 基本介绍
      • 配置概览
      • 组件类型
      • Nuxt模块
      • 嵌套路由
      • 动态路由
      • 请求数据
      • server目录
      • 应用部署
      • 中间件
      • 插件
      • layers
      • 过渡
      • 状态管理
      • 全匹配路由
      • 路由补充知识
      • 自定义路由
      • 自定义模块
      • 自定义指令
      • meta相关处理
      • 渲染模式
      • 错误处理
      • 不同阶段错误
      • 客户端渲染组件
      • 其余内置组件
      • 配置相关细节
      • 常用组合式函数
      • 服务器引擎
      • NuxtUI
      • SSR注意事项
      • 课程收官
    • React(55)
      • 序章:React课程介绍
      • React 基本介绍
      • JSX 基础语法
      • 组件与事件绑定
      • 组件状态与数据传递
      • 表单
      • 生命周期
      • Hooks
      • React-router介绍
      • React-router v版本学生管理系统课堂笔记
      • React-redux 介绍
      • Antd介绍
      • coder station前台系统笔记
      • coder station 后台系统笔记
      • Antd Pro介绍
      • Dva介绍
      • Umi.js 介绍
      • 属性默认值和类型验证
      • 高阶组件
      • Ref
      • Context
      • Render Props
      • Portals
      • 错误边界
      • 组件渲染性能优化
      • 前端框架的理解
      • Scheduler调度延时任务
      • 最小堆
      • React中的位运算
      • beginWork工作流程
      • completeWork工作流程
      • 图解diff算法
      • commit 工作流程
      • lane模型
      • React 中的事件
      • Hooks原理
      • React和Vue描述页面的区别
      • useState和useReducer
      • effect相关hook
      • useCallback和useMemo
      • useRef
      • Update
      • 性能优化策略之eagerState
      • 性能优化策略之bailout
      • bailout和ContextAPI
      • 性能优化对日常开发启示
      • 前端框架的分类
      • 虚拟 DOM
      • React 整体架构
      • React 渲染流程
      • Fiber双缓冲
      • MessageChannel
      • Scheduler调度普通任务
      • 课程介绍
      • 课程总结
    • ReactNative(33)
      • RN 基本介绍
      • 快速搭建 RN 开发环境
      • 复习 React 基础知识
      • RN 基础知识
      • 实战案例
      • RN 内置基础组件
      • 容器组件
      • Pressable 组件
      • 列表组件
      • 功能组件
      • 第三方组件库
      • 自定义组件案例:弹框组件
      • 自定义组件案例:单选组件
      • 基础API
      • 屏幕API
      • 设备API
      • 动画API
      • 手势API
      • React Navigation简介
      • 参数传递和标题栏信息配置
      • 嵌套路由与生命周期
      • 其他类型的导航
      • 状态管理介绍
      • Redux
      • 其他第三方库
      • Expo SDK
      • Fabric 架构
      • 渲染、提交和挂载
      • 实现跨平台
      • 扁平化视图
      • 线程模型
      • 如何打包发布应用
      • 通过 React Native CLI 搭建环境
    • TailwindCSS(7)
      • TailwindCSS基础介绍
      • 环境搭建与配置
      • 布局系统
      • 间距与尺寸系统
      • 颜色与主题
      • 响应式设计
      • 交互与动画
    • TypeScript(35)
      • 初识 TypeScript
      • 基础类型
      • 数组与元组
      • 对象类型
      • 函数类型
      • 类型推断与断言
      • 联合类型与交叉类型
      • 字面量类型与类型别名
      • 接口基础
      • 接口进阶
      • 接口继承与实现
      • 类基础
      • 类的访问修饰符
      • 类的继承
      • 类与接口对比
      • 泛型基础
      • 泛型接口与泛型类
      • 泛型约束
      • 内置工具类型(上)
      • 内置工具类型(下)
      • 泛型实战
      • 类型守卫
      • 类型收窄
      • 索引类型与索引签名
      • 映射类型
      • 条件类型
      • infer 关键字
      • 模板字面量类型
      • 模块系统
      • 命名空间
      • 声明文件基础
      • 声明文件进阶
      • tsconfig 配置详解
      • 类型体操入门
      • TypeScript 最佳实践
    • 杂谈(9)
      • Cloudflare 全栈部署指南
      • Creem 支付集成指南
      • Dokploy 自托管部署指南
      • GitHub OAuth 登录集成指南
      • Google OAuth 登录集成指南
      • Stripe 支付集成指南
      • Supabase 完全指南
      • Vercel 自动化部署指南
      • Zeabur 部署指南
    • 全部文章(550)
    • 包管理工具(8)
      • Bun 完全指南
      • fnm 完全指南
      • ni 完全指南
      • npm 完全指南
      • nrm 完全指南
      • nvm 完全指南
      • pnpm 完全指南
      • Yarn 完全指南
    • 并发异步(7)
      • 异步任务取消机制
      • Promise静态方法汇总
      • 封装超时工具方法
      • 并发与并行
      • 封装并发任务方法
      • 一道并发相关的面试题
      • 文件写入的原子化与并发操作
    • 打包工具(10)
      • Bun - 全栈 JavaScript 运行时与打包器
      • esbuild - 用 Go 写的极速打包器
      • Parcel - 零配置的极速打包工具
      • Rolldown - Vite 团队打造的 Rust 打包器
      • Rollup - 专注于库开发的打包工具
      • Rspack - Rust 驱动的 Webpack 替代品
      • SWC - Rust 驱动的超快编译器
      • Turbopack - Rust 驱动的下一代打包工具
      • Vite - 下一代前端构建工具
      • Webpack - 功能最强大的模块打包器
    • 算法(74)
      • 课程必看
      • 算法基本概念
      • 评判算法的好坏
      • 复习对数
      • 常见的复杂度
      • 常见算法思维
      • 递归
      • 数据结构
      • 数组结构
      • 顺序查找
      • 二分查找
      • 插值查找
      • 冒泡排序
      • 选择排序
      • 插入排序
      • 折半插入排序
      • 希尔排序
      • 归并排序
      • 快速排序
      • 链表结构
      • 双向链表
      • 单向循环链表
      • 双向循环链表
      • 栈结构
      • 队列结构
      • 循环队列
      • 击鼓传花游戏
      • 双端队列
      • 回文检查器
      • 集合结构
      • 字典结构
      • 树结构
      • 二叉树
      • 二叉树遍历
      • 前序中序还原二叉树
      • 后序中序还原二叉树
      • 二叉树深度优先搜索
      • 二叉树广度优先搜索
      • 二叉树的比较
      • 二叉树diff算法
      • 二叉搜索树
      • 二叉搜索树常见操作
      • 平衡二叉树
      • 二叉树左单旋
      • 二叉树右单旋
      • 二叉树双旋
      • 二叉堆
      • 堆排序
      • 哈夫曼树
      • 图结构
      • 邻接矩阵
      • 邻接表
      • 构建图
      • 图的深度优先搜索
      • 图的广度优先搜索
      • 普里姆算法
      • 克鲁斯卡尔算法
      • LRU算法
      • 动态规划
      • 青蛙跳台阶
      • 不同路径问题
      • 凑零钱问题
      • 打家劫舍
      • 背包问题
      • 回溯算法
      • 数字组合
      • 电话号码字母组合
      • 复原IP地址
      • 数组子集
      • 贪心算法
      • 柠檬水找零
      • 摆动序列
      • 分发糖果
      • 跳跃游戏
    • 文档协同(12)
      • 课程说明
      • 文档协同常见方案
      • OT冲突算法
      • CRDT冲突算法
      • CRDT数据结构
      • 文章翻译
      • Yjs基础介绍
      • Yjs快速上手
      • Yjs细节补充
      • 监听机制
      • 标签页同步
      • WebSocket基础知识
    • 项目实战(1)
      • ShipAny:1小时开发海外游客「中国攻略 + AI旅游助手」SaaS网站
    • AI工具(9)
      • Claude Code 完全指南
      • ComfyUI 完全指南
      • GitHub Copilot 入门指南
      • Coze 完全指南
      • Cursor vs GitHub Copilot 全面对比
      • Cursor-完整指南
      • Dify 完全指南
      • Droid 完全指南
      • n8n 完全指南
    • Astro(5)
      • Astro 入门指南
      • Astro 路由与页面
      • Astro 组件与样式
      • Astro 内容集合
      • Astro 集成与部署
    • CSS(25)
      • CSS 选择器基础
      • CSS 盒模型
      • CSS 定位与层叠
      • 浮动与 BFC
      • Flexbox 布局
      • Grid 布局
      • 响应式设计
      • 伪类与伪元素
      • 现代选择器
      • CSS 变量
      • 层叠层
      • 过渡效果
      • CSS 动画
      • 变换与滤镜
      • 容器查询
      • 文字与排版
      • 背景与渐变
      • 滚动与溢出
      • 裁剪与遮罩
      • 颜色系统
      • 边框与阴影
      • 逻辑属性
      • CSS 函数
      • 多列布局
      • 用户交互
    • ES6+(40)
      • let 和 const 命令
      • 解构赋值基础
      • 解构赋值进阶
      • 字符串的扩展
      • 字符串新增方法
      • 正则表达式扩展
      • 数值的扩展
      • BigInt 大整数
      • 函数默认参数
      • rest 参数与扩展运算符
      • 箭头函数详解
      • 尾调用优化
      • 数组扩展方法
      • 数组新增方法
      • 数组不可变方法
      • 对象的扩展
      • Object 新增方法
      • Symbol 基础
      • Symbol 进阶应用
      • Set 数据结构
      • Map 数据结构
      • TypedArray 类型化数组
      • Proxy 基础
      • Proxy 进阶应用
      • Reflect 元编程
      • 元编程实战案例
      • 装饰器 Decorator
      • Iterator 迭代器
      • Generator 基础
      • Generator 进阶
      • Promise 基础
      • Promise 进阶
      • async 函数
      • await 与错误处理
      • 异步迭代
      • Class 基础
      • Class 继承
      • Module 语法
      • Module 加载
      • ES 新特性汇总
    • HTML(8)
      • HTML 入门:构建 Web 的基石
      • HTML5 语义化:让页面更有意义
      • HTML 表单基础:用户交互的起点
      • HTML 表单进阶:验证与现代特性
      • HTML 多媒体:音视频与响应式图片
      • HTML APIs(上):客户端存储完全指南
      • HTML APIs(下):交互与设备能力
      • Canvas 与 SVG:Web 图形绘制入门
    • JavaScript(30)
      • JavaScript 简介
      • 变量与数据类型
      • 运算符
      • 类型转换
      • 控制流语句
      • 函数基础
      • 对象基础
      • 数组基础
      • 原型与原型链
      • this 关键字
      • 面向对象编程
      • 作用域
      • 闭包
      • 执行上下文
      • DOM 选择器
      • DOM 操作
      • 事件处理
      • 事件委托
      • 错误处理
      • 调试技巧
      • 正则表达式
      • Date 日期对象
      • Math 对象
      • 定时器
      • JSON 处理
      • BOM 基础
      • 本地存储
      • 表单处理
      • AJAX 与 Fetch
      • 严格模式
    • Langchain(37)
      • Langchain基本介绍
      • 模型接口
      • 缓存
      • 提示词模板
      • 结构化提示词
      • Message消息对象
      • 消息占位
      • LCEL
      • 并发流式返回结果
      • Runnable接口
      • 条件路由
      • 字符串解析器
      • 结构化输出解析器
      • 列表输出解析器
      • JSON解析器
      • 正则解析器
      • 本地资源Loader
      • Web资源Loader
      • 文本切割
      • 嵌入处理
      • 内存型向量库
      • 检索优化
      • RAG实践
      • Memory基础
      • 自动维护聊天记录
      • 实现长程记忆
      • 持久化记忆
      • 第三方存储
      • Tools基础
      • Tools配置
      • Zod基础
      • LangChain中使用工具
      • 重新认识Agent
      • LangChain中创建Agent
      • Agent实践
      • 回退机制
      • 回调机制
    • LLM(34)
      • LLM发展历史
      • N-Gram模型
      • 词袋模型
      • 词元
      • 嵌入
      • Transformer内部结构
      • Transformer解码策略
      • Transformer块
      • 本地部署大模型
      • Agent
      • 流式返回信息
      • 支持上下文
      • 获取实时消息
      • 外接DeepSeek
      • Function Calling
      • MCP理论知识
      • Resources
      • Schema
      • 注册资源模板
      • Prompts
      • 监听资源更新
      • 远程通信方式
      • MCP Client
      • 大模型幻觉
      • RCT构词法
      • 提示词常见技巧
      • 基于反馈迭代优化
      • 改善提示效果
      • 提示词评估工具
      • RAG基础知识
      • RAG实践
      • RAG架构演进
      • 大模型微调
      • LoRA微调
    • MCP(8)
      • MCP 入门:连接 AI 与外部世界的桥梁
      • 搭建第一个 MCP Server
      • MCP Tools 深入:让 AI 具备行动能力
      • MCP Resources:向 AI 暴露数据
      • MCP Prompts:预定义 AI 交互模板
      • MCP Transport 与部署
      • 构建 MCP Client:集成到你的应用
      • 实战:构建文档助手 MCP Server
    • Nest(31)
      • 快速上手Nest Cli
      • 三层架构与MVC
      • IoC
      • Nest中的装饰器
      • 模块的基本概念
      • 什么是AOP
      • 中间件与守卫
      • 拦截器
      • 文件上传
      • 自定义装饰器
      • mysql相关回顾
      • 对于ORM的理解
      • 快速上手Redis
      • Nest中使用Redis
      • 状态保存方式
      • Nest中实现Session与JWT
      • JWT登录注册后端处理
      • 使用Passport与循环引用问题
      • 通过环境变量获取配置信息
      • RBAC权限设计1
      • RBAC权限设计2
      • Nest中使用Websocket
      • 日志处理
      • 面向切面的日志处理
      • 快速入门GraphQL
      • Nest中使用GraphQL
      • Swagger API文档
      • 单元测试与E2E测试
      • 安全防护实践
      • 定时任务与任务调度
      • Bull队列与异步任务
    • Next(36)
      • Next.js 简介
      • 项目创建与配置
      • App Router 概述
      • 创建第一个页面
      • 开发工具与调试
      • TypeScript 配置
      • 文件系统路由
      • 动态路由
      • 嵌套路由与布局
      • 路由组
      • 并行路由
      • 拦截路由
      • 导航与链接
      • 中间件
      • Server Components
      • Client Components
      • 混合渲染模式
      • Streaming 与 Suspense
      • 静态与动态渲染
      • 数据获取基础
      • 缓存策略
      • Server Actions
      • Route Handlers
      • 数据库集成
      • 错误处理
      • 图片优化
      • 字体优化
      • 脚本优化
      • 元数据与 SEO
      • 性能分析
      • 认证基础
      • NextAuth 集成
      • 环境变量与配置
      • 测试策略
      • 部署方案
      • 项目实战
    • Nuxt(36)
      • web应用变迁史
      • 课程说明
      • SSR初体验
      • 水合操作
      • 改造CSR项目
      • 基本介绍
      • 配置概览
      • 组件类型
      • Nuxt模块
      • 嵌套路由
      • 动态路由
      • 请求数据
      • server目录
      • 应用部署
      • 中间件
      • 插件
      • layers
      • 过渡
      • 状态管理
      • 全匹配路由
      • 路由补充知识
      • 自定义路由
      • 自定义模块
      • 自定义指令
      • meta相关处理
      • 渲染模式
      • 错误处理
      • 不同阶段错误
      • 客户端渲染组件
      • 其余内置组件
      • 配置相关细节
      • 常用组合式函数
      • 服务器引擎
      • NuxtUI
      • SSR注意事项
      • 课程收官
    • React(55)
      • 序章:React课程介绍
      • React 基本介绍
      • JSX 基础语法
      • 组件与事件绑定
      • 组件状态与数据传递
      • 表单
      • 生命周期
      • Hooks
      • React-router介绍
      • React-router v版本学生管理系统课堂笔记
      • React-redux 介绍
      • Antd介绍
      • coder station前台系统笔记
      • coder station 后台系统笔记
      • Antd Pro介绍
      • Dva介绍
      • Umi.js 介绍
      • 属性默认值和类型验证
      • 高阶组件
      • Ref
      • Context
      • Render Props
      • Portals
      • 错误边界
      • 组件渲染性能优化
      • 前端框架的理解
      • Scheduler调度延时任务
      • 最小堆
      • React中的位运算
      • beginWork工作流程
      • completeWork工作流程
      • 图解diff算法
      • commit 工作流程
      • lane模型
      • React 中的事件
      • Hooks原理
      • React和Vue描述页面的区别
      • useState和useReducer
      • effect相关hook
      • useCallback和useMemo
      • useRef
      • Update
      • 性能优化策略之eagerState
      • 性能优化策略之bailout
      • bailout和ContextAPI
      • 性能优化对日常开发启示
      • 前端框架的分类
      • 虚拟 DOM
      • React 整体架构
      • React 渲染流程
      • Fiber双缓冲
      • MessageChannel
      • Scheduler调度普通任务
      • 课程介绍
      • 课程总结
    • ReactNative(33)
      • RN 基本介绍
      • 快速搭建 RN 开发环境
      • 复习 React 基础知识
      • RN 基础知识
      • 实战案例
      • RN 内置基础组件
      • 容器组件
      • Pressable 组件
      • 列表组件
      • 功能组件
      • 第三方组件库
      • 自定义组件案例:弹框组件
      • 自定义组件案例:单选组件
      • 基础API
      • 屏幕API
      • 设备API
      • 动画API
      • 手势API
      • React Navigation简介
      • 参数传递和标题栏信息配置
      • 嵌套路由与生命周期
      • 其他类型的导航
      • 状态管理介绍
      • Redux
      • 其他第三方库
      • Expo SDK
      • Fabric 架构
      • 渲染、提交和挂载
      • 实现跨平台
      • 扁平化视图
      • 线程模型
      • 如何打包发布应用
      • 通过 React Native CLI 搭建环境
    • TailwindCSS(7)
      • TailwindCSS基础介绍
      • 环境搭建与配置
      • 布局系统
      • 间距与尺寸系统
      • 颜色与主题
      • 响应式设计
      • 交互与动画
    • TypeScript(35)
      • 初识 TypeScript
      • 基础类型
      • 数组与元组
      • 对象类型
      • 函数类型
      • 类型推断与断言
      • 联合类型与交叉类型
      • 字面量类型与类型别名
      • 接口基础
      • 接口进阶
      • 接口继承与实现
      • 类基础
      • 类的访问修饰符
      • 类的继承
      • 类与接口对比
      • 泛型基础
      • 泛型接口与泛型类
      • 泛型约束
      • 内置工具类型(上)
      • 内置工具类型(下)
      • 泛型实战
      • 类型守卫
      • 类型收窄
      • 索引类型与索引签名
      • 映射类型
      • 条件类型
      • infer 关键字
      • 模板字面量类型
      • 模块系统
      • 命名空间
      • 声明文件基础
      • 声明文件进阶
      • tsconfig 配置详解
      • 类型体操入门
      • TypeScript 最佳实践
    • 杂谈(9)
      • Cloudflare 全栈部署指南
      • Creem 支付集成指南
      • Dokploy 自托管部署指南
      • GitHub OAuth 登录集成指南
      • Google OAuth 登录集成指南
      • Stripe 支付集成指南
      • Supabase 完全指南
      • Vercel 自动化部署指南
      • Zeabur 部署指南

    Cursor-完整指南

    2025年9月29日 · 48 min
    ChatGPTClaude

    Cursor 是一款基于 VS Code 打造的 AI 编程增强编辑器,它集成了 GPT-4、Claude 等主流大模型,具备强大的 代码自动补全、对话生成、智能重构 等能力。无论你是初学者还是经验丰富的开发者,Cursor 都能成为你得力的”编程助手”。

    Cursor 具备如下的特点:

    1. 对新手友好:不懂代码也能通过描述需求,让 AI 帮你构建基本的项目骨架,快速搭建 MVP。
      • MVP:Minimun Viable Product(最小可行产品:demo)
    2. 对开发者高效:支持 Chat、Prompt 模板、函数解释、重构建议等,帮助你提升开发效率。
    3. 支持 AI 驱动协作开发:结合”结对编程”理念,Cursor 可以成为你随时在线、逻辑清晰、不知疲倦的搭档。
      • Pair Programming(结对编程):关键的核心模块、新人培训、复杂的问题的 Debug

    安装Cursor

    访问 Cursor 的官网,然后注册 Cursor 的账号。

    点击 Sign in 按钮进行登录,可以选择从 Google 或者 Github 进行登录。

    image-20250513095548787

    也可以选择 Sign up 进行注册,邮箱可以用国内邮箱,比如 QQ 邮箱,163 邮箱,126 邮箱等。

    image-20250513100041551

    成功登录之后,会自动跳转到 Cursor 的个人设置页面,该页面会展示你的账号信息以及额度信息。新用户默认会有一些体验额度,可以免费使用 15 天(体验 Pro 版本)。

    image-20250513100436079

    Cursor 版本更新还是比较频繁的,此前 Cursor 会自动升级到最新版本,但有时新版本不太稳定,会遇到一些问题,也有的用户更习惯使用旧版本的体验, Github 上有个开源的仓库,维护了 0.36.2 版本之后所有 Cursor 的历史版本。

    Cursor收费计划

    Cursor 提供了 3 种不同的订阅计划,可以选择按月付费或者按年付费(年付可节省20%)

    image-20250630091942855

    Hobby 版本(免费)

    完全免费使用,包含以下功能:

    • Pro 两周试用
    • Agent 请求受限
    • Tab 补全受限

    Pro 版本($20/月)

    包含 Hobby 版本所有功能,另外还有:

    • 无限 Agent 请求
    • 无限 Tab 补全
    • 访问后台 Agent
    • 访问 Bug Bot
    • 访问最大上下文窗口

    Ultra 版本($200/用户/月)

    包含 Pro 版本所有功能,另外还有:

    • 在所有 OpenAI、Claude、Gemini 模型上拥有 20 倍的使用额度。

      • 更高的并发请求数
      • 更大的上下文长度或响应 token 限额
      • 更快的响应速度
      • 更少的排队等待时间
    • 优先使用新功能

    Cursor主界面

    Cursor 在结构布局上与 VSCode 十分类似,但它增加了面向 AI 编程的核心区域。

    image-20250513114408392

    • 左侧:资源管理区(Explorer)

    • 中间:主编辑区域

    • 下方:终端(Terminal)

    • 右侧:AI 聊天面板(Chat Assistant)

      • New chat区域:可直接发起 AI 对话
      • @ Add context:绑定当前文件上下文(代码自动传入对话)
      • 输入框:支持提问、代码生成、bug 解释等自然语言操作
      • Agent 下拉:选择对话模式
    • 底部状态栏右下角:Cursor Tab 与模型状态

      • 显示当前是否连接到 AI 服务、当前模型类型

      • 如果网络或模型切换,通常会在这里提示

    基础配置

    左侧菜单还可以进入以下设置:

    • General:通用设置
    • Chat:配置 AI 对话相关设置(例如上下文保留、模型选择)
    • Tab:可能与多标签页或工作区配置相关
    • Models:选择和配置使用的模型(如 GPT-4、Claude、Gemini 等)
    • Background Agents:管理运行中的智能 Agent(NEW,可能是 Cursor 最新引入的功能)
    • Tools & Integrations:集成 Git、终端、测试框架等工具
    • Rules / Indexing & Docs / Network / Beta / Docs:其他开发者相关设置和文档入口

    这里我们先说一下 General 通用设置。

    1. Manage Account
      • 功能:打开账户管理页面(通常跳转到官网管理后台)
      • 可配置内容包括:订阅套餐、账单信息、更换信用卡、取消订阅等
    2. Editor Settings
      • 功能:配置编辑器的行为和界面
      • 支持的配置内容包括:
        • 字体(字体类型、大小、行高)
        • 主题(明亮 / 黑暗)
        • 自动格式化、自动补全
        • 显示 minimap(小地图)、行号、折叠标记
        • Tab 缩进大小、空格 vs Tab
        • 光标样式等
    3. Keyboard Shortcuts
      • 功能:配置键盘快捷键
      • 打开命令面板:Cmd/Ctrl + Shift + P
      • 输入并选择:Preferences: Open Keyboard Shortcuts (JSON)
    4. Import Settings from VS Code
      • 功能:将 VS Code 的设置、扩展、快捷键等导入 Cursor
      • 适合 VS Code 老用户快速迁移到 Cursor 环境
    5. Reset “Don’t Ask Again” Dialogs
      • 功能:重置你之前选中”不再提示”的对话框
      • 用于恢复提醒(比如保存前提示、执行高危命令的确认框等)

    下面有一个隐私设置

    Data Sharing Enabled

    • 功能:控制是否将你的代码、提示词、编辑行为等匿名数据分享给 Cursor 用于产品改进
    • 当前状态为「开启」
    • 可点击「Share Data」按钮切换为关闭状态

    了解了 Cursor 的基本介绍和配置后,接下来我们深入探讨 Cursor 的核心开发模式——对话驱动开发。

    对话驱动开发

    • 测试驱动开发
    • 行为驱动开发
    • 领域驱动开发
    • 事件驱动开发
    • …

    AI 的出现使其出现了新的开发模式:对话驱动开发

    • PDD(Prompt-Driven Development):提示词驱动开发
    • AI-DD(AI-Driven Development):AI 驱动开发

    两者区别如下表:

    维度PDD(Prompt-Driven)AI-DD(AI-Driven)
    驱动方式开发者写 prompt,AI 根据提示生成代码AI 根据上下文、环境、目标主动参与编程
    控制权开发者强控制:AI 是工具控制权部分转移给 AI:AI 是合作者
    主要手段编写清晰、高质量 prompt 是核心能力构建 AI 协作环境(如持续对话、自动分析)是重点
    输出范围局部代码生成(函数、接口、配置)全局参与(项目结构建议、模块拆分、重构建议)
    依赖模型能力通常是调用 GPT、Claude 等接口可能集成多个模型 + 插件 + 工具链
    典型工具Copilot Chat、Cursor Prompt Block、CodeGPTCursor Max Mode、Code Interpreter、AutoDev 工具链、GPT Agents

    PDD举例说明

    帮我写一个注册的接口,带邮箱和密码的验证。

    AIDD举例说明

    该项目是否有可以优化的地方。

    在 Cursor 中,提供了几种不同的对话模式:

    image-20250513114448189

    • Ask:PDD驱动
    • Agent:AI 驱动

    ASK模式

    Ask 模式允许你通过 AI 搜索与提问的方式来探索和了解代码库,但不会对代码做出任何修改。它是一个”只读模式(read-only)“,专门用于:

    • 提问代码相关的问题
    • 探索项目结构和逻辑
    • 学习代码库的实现方式

    它默认启用了搜索工具,可以更方便地定位和读取项目中的文件内容。Ask 模式与其他默认模式(如 Agent 模式、Manual 模式)相比,最大的不同是不会自动对代码进行任何修改:

    • 它拥有完整的读取权限,可以查看项目文件和上下文
    • 但不会自动执行 AI 提出的任何更改建议

    因此,它更适合用于:

    • 阅读和理解陌生代码库
    • 和 AI 一起制定解决方案,但暂时不动代码
    配置项说明
    Model(模型)可以预设一个默认使用的 AI 模型(如 GPT-4 或 Claude)
    Keybinding(快捷键)设置一个快捷键,便于随时切换到 Ask 模式
    Search Codebase(代码库搜索)启用后,Cursor 可以自动搜索项目中的文件作为上下文,无需手动 @ 文件 添加上下文

    Agent模式

    Agent 是一个具备高度自主性的 AI 编码助手,能够独立探索、规划并执行复杂的代码库变更任务,并拥有全套开发工具的支持。

    目前,Agent 是 Cursor 中的默认模式,也是最具”自动驾驶”能力的模式。它设计的初衷是为了应对那些复杂度较高、步骤较多的编码任务,并且尽量减少你对 AI 的逐步引导。

    核心能力

    在 Agent 模式下,AI 可以自主完成以下操作:

    • 浏览和理解整个代码库结构
    • 读取项目文档和说明
    • 搜索网页(例如查找第三方库用法)
    • 编辑文件内容
    • 执行终端命令(如安装依赖、运行脚本)

    Agent 的目标是帮助你高效完成任务、简化流程,甚至实现从”分析问题”到”提交修改”的完整闭环。

    Agent 模式下会自动的更改文件,当然更改也需要用户选择是否接受更改结果。

    整个 Agent 模式的工作流如下:

    1. 理解需求:Agent 会先分析你的任务描述(prompt)以及当前项目的上下文,全面理解你想实现的目标和具体需求。
    2. 探索代码库:它会在整个代码库中进行搜索,查阅相关文件、文档,甚至在需要时访问网页,来搞清楚当前项目的实现方式和结构。
    3. 制定修改方案:在理解项目和任务的基础上,Agent 会将任务拆解为若干步骤,并制定出一个可执行的修改计划,过程中会不断从上下文中学习补充信息。
    4. 执行修改:Agent 根据计划,对项目中的相关文件进行修改。它可能还会建议你引入新的依赖库、执行终端命令,或者提醒你在 Cursor 之外完成一些额外步骤。
    5. 验证结果:修改完成后,Agent 会检查改动是否符合预期。如果检测到错误、语法问题或代码风格问题(如语言支持 linter),它会尝试自动修复。
    6. 任务完成:当 Agent 确认一切修改都妥当后,它会交还控制权,并为你总结本次修改内容,帮助你快速了解变更点。

    官方举了两个使用的例子 来说明 Agent 的工作流程。

    Agent 模式配置选项

    • 选择模型:预先为 Agent 模式选择一个默认的大语言模型,例如 GPT-4 或 Claude,用于执行任务时的 AI 引擎。
    • 编辑快捷键:为 Agent 模式设置或修改快捷键,方便你快速切换或触发 Agent 的功能。
    • 启用自动运行与自动修复:开启此功能后,Agent 可以自动执行修改计划,并在检测到错误(如语法错误、linter 报错)时自动尝试修复。

    Chat窗口回滚和撤销

    在 Chat 窗口中,右下角有一个 Restore 按钮,可以回滚到之前的版本。

    image-20250513165624124

    在回滚之后,还可以使用撤销按钮,撤销回滚。

    image-20250513165558020


    除了 Ask 和 Agent 模式,Cursor 还提供了 Manual 模式,让你在需要精确控制代码修改时使用。

    Manual模式与多形式对话

    Manual模式

    Manual 模式是一种专注且可控的编辑模式,适用于你已经明确知道要修改什么文件、要怎么改的情况。

    与 Agent 模式不同:

    • 根据上下文去自动探索代码库
    • 不会运行终端命令
    • 完全依赖你提供的具体指令和上下文(如通过 @文件名 显式的来指定要修改的文件)

    官方还是举了 两个该模式例子。

    Manual模式和Agent模式最大的区别,就是Manual模式用户明确知道要会修改哪些文件,这些要修改的文件都是由用户指定的。Agent模式会自动根据AI的规划,修改一些相关的文件。

    列举该模式适用场景

    1. 想要 AI 修改某些文件或者某些函数(作为作者目的是非常明确的)
    2. 你不希望 AI 自作主张修改项目的其它部分
    3. 希望 AI 扮演的是执行器,我们自己负责思考和决策

    下面是 Manual 模式的工作流:

    1. 理解请求:像平常一样,在聊天框中输入你想让 AI 做的任务描述。

    2. 添加上下文:使用 @文件名 的方式,在请求中明确指出你希望编辑的文件,为 AI 提供准确的上下文。

    3. 规划修改:AI 会根据你提供的上下文,给出修改建议。你可以预览修改内容,如果你配置了 Linter,AI 也可能会标出潜在的问题。

    4. 执行修改:确认无误后,应用这些修改。任务完成后,Manual 模式不会再进行任何自动处理,始终保持你对过程的掌控。

    Ask、Agent、Manual模式对比

    对比维度Ask 模式Manual 模式Agent 模式
    核心定位只读提问、理解代码精准编辑、按指令操作全自动 AI 开发助手
    主要用途学习代码库、探索项目结构精确修改已知位置的代码实现复杂需求、规划并修改项目
    是否会修改代码❌ 不会修改✅ 修改指定的文件✅ 修改多个文件甚至执行命令
    是否需要手动 @ 文件✅ 推荐使用✅ 必须使用❌ 自动探索上下文
    是否支持终端命令❌ 不支持❌ 不支持✅ 支持(如安装依赖)
    控制权归属用户主导提问,AI仅回复用户全权控制修改范围AI 主导执行,用户可监督
    适合人群初学者、调研者、阅读代码者想要精准控制变更的开发者忙碌或希望 AI 自动执行任务的高级用户
    推荐场景看不懂项目、需要查逻辑想改一个函数/某段代码想让 AI 做一整个功能模块
    修改预览与确认❌ 无修改✅ 提供预览✅ 自动修改并汇报结果
    典型行为”这段代码是做什么的?""请把 @login.ts 中的密码长度改成 12 位""实现一个带搜索功能的用户列表页面”

    内联聊天

    在 Cursor 中,你可以使用以下快捷键打开命令输入栏(Prompt Bar):

    • macOS:Cmd K
    • Windows/Linux:Ctrl K

    命令唤醒的输入栏,也是一个 AI 聊天窗口,不过它不是一个单独的窗口,而是内联在文件中,主要功能包括:

    • 输入自然语言描述来提问
    • 使用 @ 符号引用其他内容
    • 对生成的结果进行多次优化

    常见使用场景

    1. 生成新代码

      • 不选中任何代码,直接按下快捷键

      • 输入你的需求描述

      • Cursor 会根据上下文生成代码

    2. 修改现有代码

      • 选中要修改的代码
      • 按下快捷键并描述修改需求
      • AI 会按照你的要求进行修改

    终端中聊天

    打开终端,然后Cmd K 开启聊天栏,按 Esc 关闭内联聊天,按回车键 Enter 执行。

    使用示例

    1. 查找大文件
    2. 批量重命名
    3. 进程管理

    除了对话模式,Cursor 还提供了强大的智能补全功能,可以显著提升你的编码效率。

    智能补全

    在日常编程中,我们经常需要重复编写大量相似的代码。Cursor的智能编码助手功能可以帮助我们显著提升编码效率。以前最好用的键是复制/粘贴,自从有了 AI 智能补全后,那么现在最好用的是 Tab 键了。

    1. 文本智能补全

    2. 代码智能补全

    最佳实践:

    1. 在编码的时候书写适当的注释
    2. 保持良好的命名规范
      • 望文知意
      • 驼峰命名法
    3. 适当的使用 TS 类型
    4. 保持代码结构良好以及结构的一致性

    3. 部分补全功能

    每次接受一个单词,你可以通过 Ctrl/command + 右箭头逐一接受下一个单词。

    智能编码最佳实践

    1. 合理的输入节奏
      • 给 AI 留出思考时间,不要过快按 Tab 键
      • 遇到无响应时,先检查网络连接
    2. 优化代码上下文
    3. 熟练使用快捷键
      • Tab键:接收建议
      • Esc键:不接受建议
      • Ctrl/Cmd + →:逐词接受

    为了帮助 AI 更好地理解你的项目上下文,Cursor 提供了强大的 @ 命令系统。

    @命令

    @ 命令是一个很有用的工具,核心就是为 AI 聊天添加更加具体的上下文信息。

    你在 Chat 窗口输入 @ 时,就可以看到很多选项。

    你可以这样使用 @ 命令:

    1. 在输入框中输入 @
    2. 用上下键选择你想要的命令
    3. 按 Enter 键确认

    image-20250513195454264

    1. Files&Folders

    引用项目中的特定文件和文件夹作为上下文。

    2. Code

    引用代码片段。

    3. Docs

    获取官方文档或者第三方文档信息。

    4. Git

    使用 @Git 相关的特殊指令来分析当前项目的 Git 变更情况、比较分支内容、以及查看未提交的文件状态。

    image-20250514131137166

    @Commit:引用当前工作状态的改动

    使用 @Commit,你可以让 AI 告诉你当前工作区与最近一次提交(HEAD)之间的”未提交变更”。变更包括新增的文件、修改的文件以及删除的文件

    NOTE

    例如:你在当前项目中修改了 login.js 和 auth.js,尚未提交,现在想知道这两处的改动有没有问题。你可以对 AI 说:请帮我检查一下 @Commit 中的改动有没有潜在的问题,比如逻辑错误或代码风格不统一。

    AI 会读取尚未提交的变更,并反馈比如:

    • “auth.js 中的错误处理逻辑存在重复”
    • “login.js 的登录判断条件可能导致空密码通过验证”

    @Branch:对比当前分支与主分支的差异

    使用 @Branch,可以查看当前分支与主分支(如 main)之间的差异:

    • 显示当前分支新增的提交
    • 展示和主分支不同的代码的变更内容
    NOTE

    例如:你在一个 feature/signup-flow 分支上开发了注册流程,准备合并回 main,但不确定有哪些重要更改。你可以对 AI 说:请帮我总结一下 @Branch 中相对于 main 分支的所有功能改动,方便我写 PR 描述。

    AI 会列出当前分支比 main 多出的提交与变更,比如:

    • “新增了 SignupForm.vue 组件”
    • “修改了 API 调用逻辑”
    • “引入了新的依赖(如 yup 用于表单验证)”

    5. Terminals

    用于在 Chat 中引用你当前终端中的输出结果或状态信息,让 AI 可以根据终端反馈内容给出解释、建议或下一步操作。

    与传统 Chat 模式的区别

    模式是否能读取终端输出是否能帮你生成命令
    普通聊天❌ 只能靠你复制粘贴内容✅ 能生成,但不知上下文
    @Terminal✅ 可自动引用终端上下文✅ 更准确、带环境感知能力

    6. Linter Errors

    @Lint Errors 是 Cursor 中用于访问并引用代码中的 Lint 报错与警告信息的快捷符号。这个符号可以自动捕获并提供你当前激活文件中所有的 lint 报错与警告。

    7. Web

    @Web 命令会自动搜索互联网以查找与 Cursor 查询相关的上下文。


    为了让 AI 更深入地理解你的项目,Cursor 提供了代码库索引功能。

    代码库索引

    将你当前的项目,创建一个嵌入向量(Embeddings),有了嵌入向量,可以帮助 AI 更加准确的去理解的项目。

    代码库索引是 Cursor 的核心功能。它会:

    • 为代码文件创建嵌入向量
    • 把索引数据存储在云端
    • 保持代码本身只在本地存储
    • 确保项目安全性

    在传统开发中,开发者需要记住整个项目结构。使用代码库索引后:

    • AI 回答更准确,因为它能基于当前项目的索引库回答问题
    • 文件搜索更快
    • AI 能更好地理解跨文件的关系
    • 重构建议更精准

    如何配置代码库索引

    最佳实践

    为了更好地使用代码库索引功能:

    1. 定期检查索引状态

    2. 合理设置忽略规则,避免索引无关文件

    3. 大型项目考虑模块化索引

      /project
      /frontend
      /backend
      /docs
      /scirpts

      还是通过 .cursorignore 文件来进行配置

      /backend
      /docs
      /scirpts
      *.md
      node_modules
    4. 团队统一.cursorignore配置

    5. 使用代码库索引功能快速理解项目


    除了让 AI 理解你的代码,你还可以通过 Rules 来指导 AI 的行为方式。

    Rules

    规则是 Cursor 的一个功能。你可以用它来控制 AI 的行为。这些规则会在每次对话时自动使用。这样 AI 就能按照你想要的方式工作。Rules 本质上就是属于提示词工程的一部分。

    主要用途有:

    • 设定编码风格
    • 定制文档格式
    • 统一团队流程
    • 个性化代码审查

    设置的方式有三种:

    1. 全局规则
    2. 项目规则
    3. 规则文件(废弃了,因为兼容性目前还存在,但是未来有可能完全被移除)

    1. 全局规则

    全局规则对所有项目都有效。

    image-20250630151521152

    2. 项目规则

    顾名思义就是每个项目一份,项目之间不会共享。

    在项目根目录的 .cursor/rules 文件夹中创建 .mdc 文件。mdc 是 Cursor 的 Rules 文件的专有格式。它基于 Markdown 格式。这意味着你直接使用最熟悉的 Markdown 语法来写就完事儿了。

    它支持四种规则类型:

    1. Always:自动附加到所有聊天和命令请求(command + k),适用于全局规则。
    2. Auto Attached:基于文件模式匹配自动触发,例如: .tsx, .json, Test.cpp。
    3. Agent Requested:针对特定任务场景,需要提供任务描述。帮助 AI Agent 更好地理解和执行特定任务
    4. Manual:需要手动提及才会被包含,适用于特殊场景的临时规则。

    image-20250514144928052

    支持的功能:

    • 规则内容:用 Markdown 格式写规则
    • 规则引用:用 @file 引用其他规则文件

    image-20250514145419258

    3. 规则文件

    为了兼容性,旧版使用的 .cursorrules 文件,目前仍被支持,但 Cursor 官方文档明确提到 .cursorrules 文件将来会移除。

    建议迁移到新系统,迁移步骤如下:

    1. 将现有规则按功能拆分为多个文件
    2. 在 .cursor/rules 目录创建对应规则
    3. 在 Globs 字段指定适用范围
    4. 通过 @file 引用保持规则链式调用

    image-20250514145731320

    4. 使用案例

    .cursor/rules/base.mdc 写入如下规则:

    # 项目基础开发规范
    ## 基础开发规则
    - 使用 ESLint 和 Prettier 进行代码格式化
    - 文件命名采用 kebab-case
    - 导入语句按类型分组并排序
    - 避免魔法数字,使用常量定义
    - 函数长度不超过 50 行
    ## 项目目录结构
    ├── .cursor/
    │ └── rules/
    │ ├── base.mdc # 基础规则
    │ ├── react.mdc # React 相关规则
    │ ├── typescript.mdc # TypeScript 规则
    │ ├── testing.mdc # 测试规则
    │ └── docs.mdc # 文档规则
    └── src/
    ├── components/
    ├── features/
    └── tests/

    React 组件的开发规范,位于 .cursor/rules/react.mdc

    Description:
    React 组件开发规范,确保组件的可维护性和性能
    Globs:
    src/components/**/\*.tsx, src/features/**/\*.tsx
    # React 组件开发规范
    - 优先使用函数组件和 Hooks
    - 组件文件结构:
    1. 类型定义
    2. 常量声明
    3. 组件实现
    4. 样式定义
    - Props 必须使用 interface 定义类型
    - 使用 React.memo() 优化渲染性能
    - 样式使用 CSS Modules 或 styled-components
    - @base.mdc

    TypeScript 规则,位于 .cursor/rules/typescript.mdc

    Description:
    TypeScript 开发规范,确保类型安全和代码质量
    Globs:
    **/\*.ts, **/\*.tsx
    # TypeScript 规则
    - 禁用 any 类型,使用 unknown 替代
    - 启用 strict 模式
    - 使用类型推导减少冗余类型声明
    - 公共函数必须包含 JSDoc 注释
    - 使用 type 而不是 interface(除了 Props)

    测试规则,位于 .cursor/rules/test.mdc

    Description:
    单元测试和集成测试规范
    Globs:
    src/**/\*.test.ts, src/**/\*.test.tsx
    # 测试规则
    - 使用 React Testing Library
    - 测试文件与源文件同目录
    - 测试用例结构:
    1. 准备测试数据
    2. 执行被测试代码
    3. 断言结果
    - Mock 外部依赖使用 MSW
    - 测试覆盖率要求:
    - 语句覆盖率 > 80%
    - 分支覆盖率 > 70%
    - 函数覆盖率 > 90%

    最后是文档规则,位于 .cursor/rules/doc.mdc

    Description:
    项目文档编写规范
    Globs: \*_/_.md
    # 文档规则
    - 使用中文编写
    - 包含以下部分:
    1. 功能说明
    2. 使用示例
    3. API 文档
    4. 注意事项
    - 代码块标注语言类型
    - 配置说明使用表格格式
    - 重要信息使用引用块标注

    5. Cursor Rules

    通过在聊天中使用 @Cursor Rules,你可以明确告诉 AI:“请按照我们项目的规范来生成或修改代码”。这样可以让 AI 的输出更加贴合你项目的实际需求,而不是”随心所欲”。

    image-20250514193825108


    与 Rules 不同,Notepads 用于提供项目上下文信息,而不是行为规范。

    Notepads

    官方描述:

    Craft and share context between chat and composers

    在聊天和代码编辑器之间构建并共享上下文。

    • Notepad:笔记本,你可以在笔记本里面记录一些内容,供 AI 作为参考信息。

    首先在资源管理器需要开启 Notepads,如下图:

    image-20250701085819423

    笔记内容会自动注入到 AI 的上下文中,影响它对代码、问题和对话的理解。简单说,就是帮 AI”提前看过项目文档”。

    1. 使用场景举例

    假设创建一个如下的 Notepad

    📌 模块:用户管理模块
    ✅ 接口:GET /api/users
    - 返回活跃用户列表(isActive = true)
    - 支持通过 query 参数筛选 role
    - 默认分页大小为 20,最大为 100
    📦 响应字段说明:
    - id: string,用户唯一标识
    - name: string,用户名
    - roles: string[],可包含 "admin" | "editor" | "viewer"
    - createdAt: ISO8601 字符串
    - isActive: boolean,是否处于激活状态
    ⚠️ 注意事项:
    - 部分老用户的 `roles` 字段可能为 null,请使用空数组兜底处理
    - 若无数据,返回空数组 `[]`,不会返回 null
    📍 示例请求:
    GET /api/users?role=editor&page=2

    给 AI 提问

    "为什么我的 `users.length` 总是比预期少?"
    "你请求的是 `/api/users`,根据笔记说明它只返回 `isActive = true` 的用户,建议确认是否有部分用户是未激活状态。"

    2. 如何创建 Notepads?

    3. 和 CursorRules 的区别

    • Notepads 就像你平时写的一些项目备注(比如接口参数说明、组件行为约定、状态流程图解等),可以作为 Notepad 保存。

    • 启用这个功能后,你每次打开 Chat 与 AI 对话时,Cursor 会自动把这些 Notepad 笔记传给 AI 模型;

    • 这样 AI 就像提前”读过你写的文档”,它可以在回答你的问题时参考这些内容,给出更准确、更符合项目上下文的回答。

    • Rules:行为规范,指导 AI 应该怎么做。

    • Notepads:上下文信息,告诉 AI 发生了什么,你结合这个背景信息,自己去判断该做什么。


    最后,让我们了解一些 Cursor 的其他实用功能和细节。

    其它细节

    Auto-Run模式

    早期的 Agent 模式, 会根据你的提示,判断是否需要执行命令,如果需要执行命令,会提示你确认。

    之后 Cursor 推出了 Auto-Run 模式,则是更往前走了一步。Agent 将无需确认就能执行命令和文件操作,朝着”全自动驾驶”又迈进了一步。开启 Auto-run 模式后,Cursor 编辑器能够:

    • 文件的增删改查控制权利更大
    • 执行代码所需的命令
    • 修复可能出现的问题
    • 重复执行这些操作,直到达成最终的目标

    image-20250630211530027

    选项功能解释建议设置
    Auto-Run Mode是否启用自动执行(包括命令行、文件写入、MCP 工具等)建议仅在可信项目中开启
    Command Allowlist指定允许自动执行的命令(如 npm install、echo)安全可控,推荐配合 Auto-Run 使用
    Command Denylist指定禁止自动执行的命令(如 rm -rf、shutdown)强烈建议设置,防误操作
    File-Deletion Protection防止 Agent 自动删除文件默认关闭,建议开发时打开以防误删
    MCP Tools Protection禁止自动运行 MCP 工具(如依赖审计、代码分析)若担心工具链副作用可开启
    Dotfile Protection防止自动修改 dot 文件(如 .gitignore, .env)默认开启,避免污染配置
    External-File Protection防止 Agent 自动创建或改动工作目录之外的文件默认开启,防止越权访问外部文件

    实战案例

    请帮我创建一个新的 React 项目,包含一个计数器组件,要求:
    1. 使用 Vite 创建项目
    2. 创建一个 Counter 组件,包含增加和减少按钮
    3. 添加一些基本的样式
    4. 运行项目并确保一切正常

    自动生成提交信息

    Cursor 提供 AI 生成提交消息功能,让我们不再需要花费大量时间思考如何描述代码变更。

    如何使用

    1. 完成代码修改后,打开源代码管理面板
    2. 在提交消息输入框中,点击右侧的闪光图标 (✨),AI 会自动生成提交消息

    image-20250515163240477

    上图中的 commit 信息是 AI 自动生成的。

    工作原理

    Cursor 的 AI 提交消息生成器通过分析以下内容工作:

    • 修改的文件
    • 具体的代码变更
    • 提交的上下文
    • 仓库的 Git 历史记录

    生成过程包括三个主要步骤:

    1. 分析已暂存(staged)的文件变更
    2. 学习你的提交历史模式
    3. 结合上下文生成合适的提交消息

    最佳实践

    1. 检查生成的消息

    2. 控制提交大小

    3. 遵循常见的提交格式(目前普遍使用的是 Angular commit 规范)

      • feat: 新功能

      • fix: 修复问题

      • docs: 文档更新

      • style: 代码格式调整

      • refactor: 代码重构

      • test: 测试相关

      • chore: 构建过程或辅助工具的变动

    Background Agents

    该特性目前还是 Beta 版本。

    Background Agents 是运行在云端的 AI 智能体,能够在你本地编辑代码的同时,持续、自动地进行项目分析、推理和建议生成,无需你手动触发。

    1. Run agents in the cloud, in beta preview. (Background AI Agent 在云端运行,不依赖本地的性能,随时能够提供服务)
    2. Only works in folders with a Git repository.(比如是做了 git 初始化,使用 git 做版本管理的项目才能用)

    随着 Cursor 的不断发展,2025 年 10 月 29 日发布的 Cursor 2.0 版本带来了多项重大更新和功能增强,进一步提升了 AI 辅助编程的体验。接下来让我们了解这些令人兴奋的新功能。

    Cursor 2.0 更新内容

    Cursor 2.0 于 2025 年 10 月 29 日发布,带来了多项重大更新和功能增强。以下是主要的新功能和改进:

    1. 多智能体(Multi-Agents)支持

    在新的编辑器中,用户可以在单个提示下同时运行最多 8 个智能体。每个智能体在其独立的代码库副本中运行,使用 Git worktrees 或远程机器来避免文件冲突。这使得可以并行探索不同的解决方案,大大提高开发效率。

    使用场景:

    • 同时生成多个功能模块的不同实现方案
    • 并行探索不同的架构设计
    • 快速对比多种代码实现方式

    2. Composer 编码模型

    Cursor 2.0 推出了首款自研编码模型 Composer,其速度比同等智能的模型快 4 倍。该模型专为低延迟的智能编码设计,大多数任务可在 30 秒内完成。

    优势:

    • 更快的响应速度
    • 更低的延迟
    • 专为编码任务优化

    3. 内置浏览器(正式版)

    浏览器功能现已正式发布,并可内嵌于编辑器中。用户可以选择元素并将 DOM 信息传递给智能体,增强了前端开发的便利性。

    功能特点:

    • 在编辑器内直接预览网页
    • 选择页面元素并传递给 AI
    • 实时查看前端效果
    • 方便进行前端调试和开发

    4. 改进的代码评审

    无需在各个文件间来回切换,即可更轻松地查看智能体在多个文件中的所有更改,提升了代码评审的效率。

    改进点:

    • 统一的代码变更视图
    • 更清晰的差异展示
    • 批量审查多个文件的修改
    • 更好的代码变更追踪

    5. 沙盒化终端(GA)

    在 macOS 上,智能体命令默认在安全沙盒中运行。未在允许列表中的 Shell 命令将自动在沙盒中执行,具备对工作区的读写权限,但无法访问互联网,增强了安全性。

    安全特性:

    • 默认启用沙盒保护
    • 限制网络访问
    • 保护系统文件
    • 可配置的命令允许列表

    6. 团队指令

    在 Cursor 仪表板中,团队可以定义自定义命令和规则,这些上下文将自动应用于团队的所有成员,并由团队管理员集中管理。

    功能:

    • 统一的团队开发规范
    • 集中管理团队规则
    • 自动应用到所有成员
    • 提升团队协作效率

    7. 语音模式

    通过内置的语音转文字功能,用户可以使用语音控制智能体,并在设置中自定义提交关键词,以触发智能体开始运行。

    使用方式:

    • 语音输入指令
    • 自定义触发关键词
    • 解放双手,提升效率
    • 适合快速口述需求

    8. 性能提升

    Cursor 使用语言服务器协议(LSP)提供特定语言的功能,如跳转到定义、悬停提示、诊断等。在 2.0 版本中,所有语言的 LSP 加载和使用性能均有大幅提升,特别是在使用智能体和查看差异时表现更为明显。

    性能改进:

    • 更快的 LSP 加载速度
    • 更流畅的代码导航
    • 更快的智能体响应
    • 更高效的差异查看

    9. 后台计划模式

    用户可以使用一种模型制定计划,再用另一种模型执行构建。可以选择在前台或后台构建,或使用并行智能体同时规划,生成多份方案供审阅。

    工作流程:

    1. 使用规划模型制定开发计划
    2. 使用执行模型构建代码
    3. 可选择前台或后台执行
    4. 并行生成多个方案对比

    10. 可共享的团队命令

    将自定义规则、命令和提示与整个团队共享,并通过 Cursor 文档创建深度链接,方便团队协作。

    协作功能:

    • 共享团队规则和命令
    • 创建文档深度链接
    • 统一团队工作流程
    • 提升知识共享效率

    11. 升级的提示界面

    文件和目录现在以内嵌”胶囊”样式显示,改进了带标签上下文的提示词复制与粘贴体验。同时,从上下文菜单中移除了许多明确的条目,如 @Definitions、@Web、@Link、@Recent Changes、@Linter Errors 等,智能体现在可以自动收集上下文,无需手动添加。

    界面改进:

    • 更美观的胶囊样式显示
    • 更便捷的上下文管理
    • 智能自动收集上下文
    • 简化的操作流程

    12. 强化版智能体框架

    大幅改进了适用于所有模型的智能体底层运行框架,带来了显著的质量提升,尤其对 GPT-5 Codex 的改进最为明显。

    框架改进:

    • 更智能的代码生成
    • 更准确的理解能力
    • 更好的错误处理
    • 更强的代码质量

    13. 云端智能体

    云端智能体现已具备 99.9% 的可靠性、即时启动能力,且全新界面即将推出。同时,优化了直接在编辑器中将智能体迁移到云端的体验。

    云端特性:

    • 99.9% 可靠性保障
    • 即时启动能力
    • 全新的云端界面
    • 便捷的迁移体验

    14. Cursor 企业版新功能

    沙盒终端:管理员控制项

    企业版现在可以在团队范围内统一并强制执行沙盒终端的标准设置,可在团队级别配置沙盒可用性、Git 访问以及网络访问。

    钩子:云端分发

    企业团队现在可以直接通过钩子在网页控制台上进行分发。管理员可以新增钩子、保存草稿,并指定各个操作系统适用的钩子。

    审计日志

    在 Cursor 中查看带时间戳的管理员事件日志,包括用户访问、设置更改、团队规则编辑以及成员管理事件。

    企业版优势:

    • 统一的安全策略管理
    • 便捷的团队配置分发
    • 完整的审计追踪
    • 更好的企业级安全保障

    总结

    通过本指南,你已经全面了解了 Cursor 的核心功能和使用方法。从基础配置到对话驱动开发,从智能补全到代码库索引,从 Rules 到 Notepads,这些功能共同构成了 Cursor 强大的 AI 编程助手能力。

    Cursor 2.0 的发布进一步提升了开发体验,多智能体支持、Composer 编码模型、内置浏览器等新功能让 AI 辅助编程变得更加高效和便捷。无论是个人开发者还是企业团队,都能从 Cursor 的强大功能中受益。

    希望这份指南能帮助你更好地利用 Cursor 提升开发效率,享受 AI 辅助编程带来的便利。

    返回 BlogAI工具
    上一篇Cursor vs GitHub Copilot 全面对比下一篇Dify 完全指南
    Skip toc
    • 安装Cursor
    • Cursor收费计划
    • Cursor主界面
    • 基础配置
    • 对话驱动开发
      • ASK模式
      • Agent模式
    • Manual模式与多形式对话
      • Manual模式
      • 内联聊天
      • 终端中聊天
    • 智能补全
    • @命令
    • 代码库索引
    • Rules
    • Notepads
    • 其它细节
      • Auto-Run模式
      • 自动生成提交信息
      • Background Agents
    • Cursor 2.0 更新内容
      • 1. 多智能体(Multi-Agents)支持
      • 2. Composer 编码模型
      • 3. 内置浏览器(正式版)
      • 4. 改进的代码评审
      • 5. 沙盒化终端(GA)
      • 6. 团队指令
      • 7. 语音模式
      • 8. 性能提升
      • 9. 后台计划模式
      • 10. 可共享的团队命令
      • 11. 升级的提示界面
      • 12. 强化版智能体框架
      • 13. 云端智能体
      • 14. Cursor 企业版新功能
    • 总结
    Table of Contents
    • 安装Cursor
    • Cursor收费计划
    • Cursor主界面
    • 基础配置
    • 对话驱动开发
      • ASK模式
      • Agent模式
    • Manual模式与多形式对话
      • Manual模式
      • 内联聊天
      • 终端中聊天
    • 智能补全
    • @命令
    • 代码库索引
    • Rules
    • Notepads
    • 其它细节
      • Auto-Run模式
      • 自动生成提交信息
      • Background Agents
    • Cursor 2.0 更新内容
      • 1. 多智能体(Multi-Agents)支持
      • 2. Composer 编码模型
      • 3. 内置浏览器(正式版)
      • 4. 改进的代码评审
      • 5. 沙盒化终端(GA)
      • 6. 团队指令
      • 7. 语音模式
      • 8. 性能提升
      • 9. 后台计划模式
      • 10. 可共享的团队命令
      • 11. 升级的提示界面
      • 12. 强化版智能体框架
      • 13. 云端智能体
      • 14. Cursor 企业版新功能
    • 总结
    > share on twitter