打两个字，后面一整段自动浮出来，按一下 Tab 就成真的了。
上一篇我们用 Cursor 做出了第一个能点能用的网页。今天换个路数。
Cursor 是”你说，它做”；Copilot 是”你动，它接”。
- Cursor：你说「做个待办清单」，它憋十几秒，甩给你三个文件
- Copilot：你在文件里敲下
// 计算两个日期相差多少天，回车，下一秒完整代码就以灰色浮现在光标后面，按 Tab 收下
一个像外包，一个像副驾。今天讲副驾这个。
有人会问：我都有 Cursor 了，还学这个干嘛？三个实在理由：① 公司电脑不一定让装 Cursor，但 VS Code + Copilot 是最主流组合，几乎哪都能用；② Copilot 有免费额度，个人开发者和学生能长期白嫖；③ 两者用法互补，第60篇做选型对比时你会发现很多人两个都装。
一、先搞清楚：GitHub 和 Copilot 是什么关系
不懂代码的人常被这俩名字绕晕，一句话讲明白：
- GitHub：全球程序员放代码的网站，可以理解成”代码界的百度网盘 + 朋友圈”
- Copilot：GitHub 出的 AI 编程助手，装在你编辑器里帮你写代码
关系就是：Copilot 是 GitHub 家的产品，所以你得先有个 GitHub 账号。 “Copilot” 这个词本身是”副驾驶”——它不抢方向盘，在旁边看路随时递东西。
二、第一步：注册一个 GitHub 账号
没有的话现在就注册，五分钟，免费。
操作步骤：浏览器打开 github.com → 右上角 Sign up → 依次填邮箱（能收验证码）、密码（字母+数字至少8位）、用户名（全站唯一，建议英文小写，比如 huge2026，这名字以后很难改，想好再填）→ 拼图验证 → 邮箱收验证码 → 中间问”用来干什么”随便选或直接跳过。
费用给你一张实在表：
| 档位 | 谁能用 | 能干什么 |
|---|---|---|
| 免费版 | 所有注册用户 | 每月 2,000 次补全 + 基础对话 + Copilot CLI，无需绑卡，够新手学；重度用 Agent 模式才需付费 |
| 个人付费版 | 高频长期用的人 | 不限次补全，更强模型 |
| 学生/教师 | 有教育邮箱 | 申请通过完全免费，等同付费版 |
有 .edu 教育邮箱一定去搜”GitHub 学生认证”，Copilot 免费用；没有也别急，免费版跑完本系列开发篇够用。
三、第二步：装 VS Code
Copilot 是插件，得有个”宿主”。最主流的是 VS Code（微软出的，免费）。去 code.visualstudio.com 下载，双击安装；Windows 用户中间勾选项全勾上，尤其”添加到 PATH”和”通过 Code 打开”。
第一件事改中文：Ctrl+Shift+P（Mac Cmd+Shift+P）→ 输入 language → Configure Display Language → 简体中文 → 重启。上一篇装了 Cursor 的话，它本就基于 VS Code，你已经会用了。
四、第三步：装 Copilot 插件
左边竖排找到方块状”扩展”图标（快捷键 Ctrl+Shift+X），搜 GitHub Copilot，两个都装：Copilot（灰字补全）+ Copilot Chat（对话问答），各点 Install。
装完右下角弹登录提示 → Sign in to GitHub → 浏览器点绿色 Authorize。看右下角状态栏：图标正常=已连接；带斜杠/感叹号=没登录或额度用完。
五、核心用法一：灰字补全（最爽的那个）
新建 test.js，打一行中文注释：
// 写一个函数，输入一个手机号字符串，判断是不是合法的中国大陆手机号
回车，停一秒，光标下方浮出灰色代码（那是建议，不算数）：
- Tab → 灰字变真代码
- Esc → 拒绝消失
- **Alt+]
** → 换一个方案（MacOption+]`）
这是本篇最值钱的一句话：你写的那行注释，本质就是给 AI 的提示词。注释越具体，代码越准。 对比一下：
| 你写的注释 | 结果 |
|---|---|
// 处理数据 |
完全猜不到你要什么 |
// 计算数组平均值 |
能出对，边界可能没考虑 |
// 计算数字数组平均值，空时返回0，忽略非数字，保留两位 |
基本一次到位 |
看出规律没？要什么 + 边界怎么办 + 输出什么格式，和第27篇”角色+任务+格式+约束”一回事。在代码里，注释就是你的提示词框。
除了写注释，你还可以只写个函数名让它猜内容，比如 function 把秒数转成时分秒格式( 打到左括号停手，它通常能把参数和函数体都补出来——名字起得越清楚，补得越准。
六、核心用法二：Copilot Chat（问答与改写）
灰字适合”往下写”，要商量用 Chat。三种打开方式：
| 快捷键 | 形态 | 适合 |
|---|---|---|
Ctrl+Alt+I |
右侧面板 | 长对话、问概念 |
Ctrl+I |
光标处小窗 | 就地改这一段 |
| 选中代码→右键 | 菜单 | 解释/修复选中 |
新手记四个斜杠命令：/explain 解释、/fix 修复、/tests 生成测试、/doc 加注释。选中代码后 Ctrl+Alt+I 输 /explain 即可，它会用大白话讲。小白可加强：/explain 请假设我完全没有编程基础，用生活比喻解释。
七、实操：十分钟做一个 BMI 计算器
场景：输入身高体重，点计算显示 BMI 值和健康区间。步骤：① 桌面建 bmi-tool 文件夹（英文名）；② VS Code 打开它；③ 左侧右键新建 index.html；④ 第一行写中文注释描述需求（直接发模板三）；⑤ 回车等灰字，Tab 一路接受；⑥ 右键 Open with Live Server 看效果（没装就扩展里搜 Live Server）；⑦ 不满意用 Chat 改细节：「按钮改大一点」「结果按区间显示不同颜色」。
你会体会到：Copilot 更适合”我知道下一步写什么，只是懒得敲”；Cursor 更适合”完全不知道怎么开始，你先搭出来”。
八、Cursor 还是 Copilot？给你一个决策表
| 你的情况 | 建议 |
|---|---|
| 完全零基础，只想快速做出东西 | Cursor 优先 |
| 公司电脑只能装 VS Code | Copilot |
| 想省钱，有教育邮箱 | Copilot（学生免费） |
| 已能看懂一点，想提速 | Copilot 补全更顺 |
| 从零搭多文件项目 | Cursor 的 Agent 更强 |
| 我全都要 | 两个都装，VS Code 装 Copilot，重活开 Cursor |
第60篇会把 Trae、Qoder CN（原通义灵码）、Claude Code 一起摆上桌横向比，到时候定最终方案。
九、五个必须知道的注意事项
- 灰字不是真的，Tab 了才算——没按 Tab 光标一挪就消失，新手常问”代码怎么没了”。
- 它给的不一定对——是”猜”你要什么，涉及金额、日期一定跑一遍验证。
- 公司代码别乱喂——回看第20篇隐私红线，含真实用户数据的文件别开着 AI 编辑。
- 它看得见你打开的文件——想让它更懂项目，把相关文件都打开着。
- 补全断了先看两处——右下角图标正常不？免费额度用完没？
十、提示词模板盒子
模板一：注释驱动开发（Copilot 核心）
// 【功能】一句话说清这个函数干什么
// 【输入】参数是什么类型，例如：一个字符串数组
// 【输出】返回什么格式，例如：保留两位小数的数字
// 【边界】异常怎么办，例如：数组为空返回0，非数字项跳过
写完这四行注释，回车、Tab，四行注释换一整个函数，是 Copilot 最高效用法。
模板二：Chat 两场景（对应第五、六节）
场景A｜小白版解释（选中代码后 Ctrl+Alt+I）：
/explain 请假设我完全没有编程基础，解释上面这段代码：
1. 整体干什么，用生活比喻
2. 逐段说明作用，不用术语
3. 想改（某具体行为）该改哪里
场景B｜报错修复（Ctrl+I 或选中后右键）：
/fix
我遇到的问题：
- 我做了什么：（描述操作/输入）
- 期望：（应该发生什么）
- 实际：（实际发生什么）
- 报错：（粘贴控制台红字，无就写"无报错但功能不工作"）
请直接修复，用一句大白话讲原因。
模板三：从零做单文件小工具（含习惯约定，对应第七节）
<!-- 做一个完整的单页网页工具：
【功能】解决什么问题
【输入】用户填什么，几个框，什么类型
【处理】点按钮后算什么/做什么
【输出】结果怎么展示
【样式】居中卡片，简洁现代，主色（颜色），圆角轻阴影，手机正常
【要求】HTML+CSS+JS 写在一个文件，不用外部框架，全中文
以后这个项目里：注释用中文；变量用有意义英文；用户能看到的文案一律中文；不引第三方库。
-->
十一、一句话总结
Cursor 教你”把想法说清楚”，Copilot 教你”把意图写进注释”。 两个练下来，你会养成新习惯：动手前先用一句话把要做的事描述准确。这个习惯比任何工具都值钱。
下篇预告
第57篇：Trae / Qoder CN（原通义灵码）——国内平替。 卡在注册、网络、付费的人看过来，两个国内方案打开就能用、全中文、个人基础版免费。