ゴゴゴゴゴ
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 vs GitHub Copilot 全面对比

    2025年9月29日 · 18 min
    ChatGPTClaude

    原文连接:https://www.builder.io/blog/cursor-vs-github-copilot

    image-20250519095715496

    让我们聊聊 AI 编码助手。它们已经成为开发工具领域的新宠,这并不令人意外。AI 编码助手的目标是帮助开发者更高效地编写代码,减少错误,确实相当酷炫。

    目前这个领域的竞争者不少,但我们今天聚焦于两个主要选手。一边是老牌选手 GitHub Copilot,另一边是新晋挑战者 Cursor,它正在搅动这片水域。这两者的共同目标,都是让开发者的工作变得更加轻松。

    在使用了一段时间的 Copilot 和 Cursor 之后,我觉得有必要把它们进行一下对比分析。无论你是正打算试用其中之一,还是只是想搞清楚它们到底有什么特别,不妨继续往下看。我们将深入探讨一些对开发者来说真正重要的核心功能。

    Cursor AI

    Cursor 本质上是一款“打了激素”的 AI 驱动代码编辑器。它是基于 Visual Studio Code 的一个分支,在熟悉的界面上引入了更强大的 AI 能力。

    GitHub Copilot

    GitHub Copilot 是一款 AI 编码助手,旨在帮助你更高效地编写代码,减少重复劳动,让你可以将更多精力投入到问题解决和团队协作上。

    它由 GitHub 与 OpenAI 联合开发,通过机器学习技术在你的代码编辑器中(支持 Visual Studio Code、Visual Studio、Vim/Neovim、JetBrains 系列 IDE)生成代码建议并完成各类任务。

    Cursor AI 和 GitHub Copilot 都提供了一系列旨在提升开发效率、支持开发者工作的功能。接下来我们将深入了解这些具体功能,看看这两者究竟有何不同。

    Tab自动补全

    你知道那种打字时 IDE 恰好“读懂”你想做什么的感觉吗?我们说的就是这种体验。

    Cursor

    Cursor 的 Tab 补全功能相当惊艳。它不仅能补全多行代码,还会基于整个项目上下文来生成建议。对于 TypeScript 和 Python 文件来说,当 Tab 补全涉及未导入的符号时,Cursor 会自动将对应的 import 加到当前文件中。除此之外,它甚至还会尝试预测你接下来可能编辑的位置。

    <video autoplay=“autoplay” loop="" preload=“metadata” class=“builder-video css-cz4v3a” muted=“muted” playsinline=“playsinline”

    Copilot

    Copilot 更专注于内联补全。按下 Tab 即可接受建议,继续编码,效率飞快。它通常会根据开发者的编码风格预测下一行逻辑代码,从而显著加快编码流程。需要更多选择?可以使用 Alt+] 或 Alt+[ 切换不同的建议,或者按 Ctrl+Enter 在新标签页中查看多个替代方案。

    代码生成

    精彩的部分来了。想象一下,你只需描述代码要实现的功能,接着——代码就自动生成了。

    Cursor

    Cursor 有一个叫 Composer 的功能,可以根据你的描述生成完整的应用程序。生成代码时它会参考整个项目上下文,因此会尽量贴合你的代码风格。你可以使用 ⌘ + I 打开 Composer,使用 ⌘ + N 创建新的 Composer。

    对于内联生成、样板代码以及代码编辑操作,可以使用 ⌘ + K 功能。更厉害的是,它能够在同一个项目中处理多种编程语言,并根据语言自动调整生成的建议。

    <video autoplay=“autoplay” loop="" preload=“metadata” class=“builder-video css-cz4v3a” muted=“muted” playsinline=“playsinline”

    Copilot

    Copilot 更专注于内联建议,但如果你通过 Copilot Chat 提出请求,它也能处理较大块的代码。它的 CLI 工具同样支持自然语言描述生成代码,只需用英文说明你想要实现的功能即可。

    聊天

    有时候你只是想问个问题。但和 AI 聊天真的有用吗?

    Cursor

    Cursor 的聊天功能(⌘ + L)具备上下文感知能力,因此它知道你当前正在处理的内容。你还可以将文件夹拖拽到 Chat 中,提供更多上下文信息,并直接在对话中应用代码建议,这一点非常实用。它甚至支持图像输入,用于提供可视化上下文。

    <video autoplay=“autoplay” loop="" preload=“metadata” class=“builder-video css-cz4v3a” muted=“muted” playsinline=“playsinline”

    Copilot

    GitHub Copilot Chat 也有类似的功能——你可以让它解释代码或提出改进建议。它集成在 VS Code 中,整体体验非常顺滑。最近还上线了一些新功能,比如更完善的聊天记录、拖拽文件夹添加上下文等。不过,如果你已经在使用 Cursor,这些功能可能不会让你感到特别惊喜。

    终端

    终端操作有时会让人头疼,尤其是处理复杂命令的时候。

    Cursor

    Cursor 通过 ⌘ + K 将其 AI 能力延伸到终端操作中,用来把模糊的想法转化为实际命令相当方便。不过,它会占用终端原本用于清屏的快捷键,这点确实有点烦人。

    <video autoplay=“autoplay” loop="" preload=“metadata” class=“builder-video css-cz4v3a” muted=“muted” playsinline=“playsinline”

    Copilot

    Copilot 提供了一个非常顺畅的终端集成功能,只需按下 ⌘ + I,输入你想做的事,它就会给出对应的命令。不再需要精通 bash——只要用自然语言描述你的意图,按下回车即可搞定。使用 ⌘ + Enter 执行建议命令的快捷方式也非常实用。

    上下文感知能力

    这是个关键点。这些工具到底能否真正理解整个项目,还是只能看到当前文件?

    Cursor

    Cursor 在这方面的表现相当出色。它会分析整个代码库和项目结构。你甚至可以使用 @ 符号来引用项目中的特定部分,比如 @Files、@Folders、@Code 等,非常灵活。

    <video autoplay=“autoplay” loop="" preload=“metadata” class=“builder-video css-cz4v3a” muted=“muted” playsinline=“playsinline”

    Coplilot

    Copilot 在上下文感知方面也表现得相当智能。它会分析你当前打开的文件,并根据 import、注释和函数名等线索推断你的意图。你可以使用 # 引用文件,或者通过 “Attach Context” 按钮手动选择希望 Copilot 参考的内容。

    <video autoplay=“autoplay” loop="" preload=“metadata” class=“builder-video css-cz4v3a” muted=“muted” playsinline=“playsinline”

    多文件协同

    支持跨多个文件协同工作,是让 AI 助手理解和修改复杂项目结构的关键能力。

    Cursor Cursor 的 Composer 功能可以对整个项目进行修改,这点非常强大。它能够理解不同文件和组件之间的关系,支持一次性生成整个应用所需的文件。我自己就曾用它将一个单一文件重构为更有组织的文件和文件夹结构。

    Copilot Copilot 最近新增了 Edits 功能,也非常值得一试。你只需定义一组工作文件,用自然语言描述想要实现的修改,Copilot 就能在多个文件中自动应用变更。你可以逐条审查这些修改,选择合适的方案并不断迭代,直到结果满意为止。

    在我们的测试中,这项功能表现不太稳定,有时速度较慢,甚至会卡在无限加载状态,或者对错误的文件进行了更改。

    💡 小贴士:建议手动指定要修改的文件,而不是依赖自动识别——虽然多花一点工夫,但结果会更可靠。

    AI agent

    这里说的是那种可以接管你编辑器的 AI 助手——执行命令、管理文件、处理整个项目范围内的任务。

    Cursor 在 Composer 中按下 ⌘.,你就能调用 Cursor Agent,这是一位功能强大的 AI 助手。它会自动获取上下文信息,执行终端命令、操作文件,甚至支持语义代码搜索。需要注意的是,它目前仅支持 Claude 模型,且每次操作都会计入配额。但如果你需要快速完成任务,这确实是个效率神器。

    <video autoplay=“autoplay” loop="" preload=“metadata” class=“builder-video css-cz4v3a” muted=“muted” playsinline=“playsinline”

    Copilot

    Copilot 目前还没有类似的功能。虽然 Copilot Chat 能处理一些类似的任务,但它在项目级集成和自动化操作方面,还达不到 Cursor Agent 那样的能力水平。

    将 Figma 设计稿转换为代码

    这里讨论的是与其他 AI 工具(如 Visual Copilot)的兼容性。

    Cursor 要将 Figma 设计稿转换为代码,只需启动对应的 Figma 插件,选择你想要转换的元素或画板,点击 “Export to Code”。然后复制生成的命令,粘贴到 Cursor 的终端中。接下来,你可以让 Cursor 添加交互、动画、事件处理函数等增强功能。它会根据你的需求生成所需的全部代码。

    <video autoplay=“autoplay” loop="" preload=“metadata” class=“builder-video css-cz4v3a” muted=“muted” playsinline=“playsinline”

    Copilot 配合 VS Code,Copilot 同样支持从设计到代码的转换。你只需在终端中粘贴生成的命令,然后用自然语言指示 Copilot 按照你的需求优化生成的代码。

    代码评审

    有时候我们都需要“第二双眼睛”。AI 驱动的代码评审可以对代码质量、潜在的 bug,以及是否符合最佳实践提供自动化反馈。

    Cursor Cursor 新推出的 bug finder 功能相当实用。它会对比当前代码和 main 分支的差异,扫描潜在 bug 并进行评分。只需一键,即可在编辑器中自动修复问题。不过需要注意的是,这项功能是按次收费的——每次点击可能就要花费一美元或更多。

    <video autoplay=“autoplay” loop="" preload=“metadata” class=“builder-video css-cz4v3a” muted=“muted” playsinline=“playsinline”

    Copilot Copilot 最近上线了代码评审功能,体验相当不错(目前仍处于限量发布阶段)。你可以在 Source Control 面板中点击 Review 按钮,它会检查你已暂存或未暂存的改动,并在代码中直接内联提出建议。你可以一键应用喜欢的修改,跳过不需要的部分,整个流程非常简洁高效。

    自定义能力

    编码从来不是“一刀切”的事。这些工具是否能根据你的具体需求进行调整,还是只能接受默认设置?

    Cursor Cursor 支持通过设置项和 .cursorrules 文件配置自定义指令。你可以根据项目的具体需求对其行为进行调整和优化。

    Copilot Copilot 也支持自定义指令,通过 .github/copilot-instructions.md 文件实现,方式类似于 Cursor。这允许你指定编码偏好和项目规范,Copilot 在生成代码时会尽量遵循这些规则。

    AI 提交信息生成

    来看一下这些工具在 git 提交方面的表现。

    Cursor AI 生成的提交信息看起来可能不算什么,但它确实能帮我每天节省几分钟时间,减轻思考提交说明的负担。不过,Cursor 的提交信息有时会显得……有点啰嗦。你可以通过在 .cursorrules 文件中添加相关指令来调整这一行为。

    Copilot Copilot 在这方面的默认体验不错。只需点击自动生成提交信息按钮即可开始。我发现它生成的信息相比 Cursor 更简洁、清晰,当然,在提交前快速检查一下依然是个好习惯。

    IDE 集成

    没有人愿意在多个工具之间来回切换。

    Cursor Cursor 是一个独立的编辑器——它基于 VS Code 构建,所以如果你本来就习惯使用 VS Code,上手会非常自然。

    Copilot Copilot 则集成进了多个 IDE,包括 VS Code、IntelliJ、Neovim。同时,它的 CLI 工具可以在任意终端中使用,适用场景更加灵活。

    模型支持

    Cursor Cursor 提供多种模型选项,包括 GPT-4o、o1、Claude 3.5 Sonnet,以及自研的 cursor-small 模型。你可以根据需求在速度和能力之间做出权衡选择。

    Copilot Copilot 也显著扩展了其模型支持范围。目前你可以在 Claude 3.5 Sonnet、o1、GPT-4o 等多个模型之间选择。这种灵活性让你可以根据任务类型进行优化——无论是快速补全代码,还是需要更复杂的推理和理解。

    价格

    说到底,还要看需要花多少钱。来看看两者的定价模型。

    Cursor Cursor 提供一个功能受限的免费 Hobby 套餐,Pro 套餐为每月 $20,Business 套餐为每位用户每月 $40。

    Copilot Copilot 目前也推出了一个免费套餐,包含每月约 12,000 次补全等基础功能。Pro 套餐起价为每月 $10,面向团队的 Business 套餐为每位用户每月 $19,Enterprise 套餐则为每位用户每月 $39。

    总结:最终赢家

    在深入体验了 Cursor 和 GitHub Copilot 之后,是时候揭晓谁更胜一筹了。请鼓声响起……最终胜出的是 Cursor。它的一系列独特功能,让它在 AI 编码助手领域遥遥领先。

    当然,Copilot 依然是一款非常扎实的工具。它在快速补全、广泛 IDE 兼容性方面表现出色。但 Cursor 的整体表现,确实高出了一个维度。

    Cursor 胜出的原因如下:

    • 项目级智能能力强大:Cursor 对整个代码库的理解和操作能力目前仍无对手。Copilot 虽然具备上下文感知,但在大型项目中容易变慢。
    • 速度与稳定性更胜一筹:在进行项目级操作时,Cursor 的 Composer 表现始终稳定、快速。相比之下,Copilot 的 Edits 虽然潜力十足,但经常会卡顿或反应迟缓。Cursor 则能稳稳完成任务。
    • Agent 模式更强大:Cursor 拥有成熟的 Agent 模式,能准确理解你的意图并执行复杂操作。

    当然,如果你更看重无缝集成、简单上手,Copilot 依然是个很好的选择。它的代码补全能力确实非常优秀。但如果你想真正体验 AI 编码的前沿能力,Cursor 才是更值得投入的方向。

    我偏好的 AI 技术栈

    我的整体工作流大致如下:

    • 编码时,我使用 Cursor 进行迭代式开发
    • 设计团队在 Figma 中完成界面设计
    • Builder.io 负责将设计稿转换为代码,并在需要时同步更新设计改动

    image-20250519104348988

    但这仅仅是我自己的个人偏好,仅做参考。

    返回 BlogAI工具
    上一篇Coze 完全指南下一篇Cursor-完整指南
    Skip toc
    • Cursor AI
    • GitHub Copilot
    • Tab自动补全
    • 代码生成
    • 聊天
    • 终端
    • 上下文感知能力
    • 多文件协同
    • AI agent
    • 将 Figma 设计稿转换为代码
    • 代码评审
    • 自定义能力
    • AI 提交信息生成
    • IDE 集成
    • 模型支持
    • 价格
    • 总结:最终赢家
    • 我偏好的 AI 技术栈
    Table of Contents
    • Cursor AI
    • GitHub Copilot
    • Tab自动补全
    • 代码生成
    • 聊天
    • 终端
    • 上下文感知能力
    • 多文件协同
    • AI agent
    • 将 Figma 设计稿转换为代码
    • 代码评审
    • 自定义能力
    • AI 提交信息生成
    • IDE 集成
    • 模型支持
    • 价格
    • 总结:最终赢家
    • 我偏好的 AI 技术栈
    > share on twitter