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 完全指南
    ›share on twitter
    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 企业版新功能
    • 总结