每一课都配有手绘插图，看完点「完成打卡」拿 30 XP；部分课程还有配套小游戏帮你巩固记忆！
Visual Studio Code（简称 VS Code）是微软出品的免费代码编辑器，轻巧得像记事本，强大得像宇宙飞船 🚀。
它有三大绝技：
1️⃣ 智能补全 —— 你刚打两个字母，它就知道你想写什么；
2️⃣ 万物皆插件 —— 装扩展就像给手机装 App；
3️⃣ 内置终端 + Git —— 写代码、跑程序、管版本，一个窗口全搞定。
别把它和 Visual Studio（超大 IDE，蓝紫色图标）搞混哦 —— 一个是「编辑器」，一个是「全家桶」。
VS Code 的界面就像一间五居室，记住这 5 个区，你永远不会迷路：
1️⃣ 活动栏（最左侧竖条）—— 电梯按钮 🛗：文件、搜索、源代码管理、调试、扩展；
2️⃣ 侧边栏 —— 电梯到达的楼层，显示具体内容；
3️⃣ 编辑器（最大区域）—— 你的主战场，代码在这里写；
4️⃣ 面板（底部）—— 终端 / 问题 / 输出，按 Ctrl+` 呼出；
5️⃣ 状态栏（最底蓝条）—— 仪表盘 📊：分支、错误数、行列号。
高手的双手从不离开键盘！这 10 个快捷键覆盖了 90% 的日常操作，先从它们练起：
记住一个心法：Ctrl 管整体，Shift 管选择，Alt 管移动。练熟它们，你会发现鼠标操作慢得像蜗牛 🐌。
| ✂️ 剪切整行 / 复制行 | Ctrl+X / Ctrl+C |
| 🔁 移动当前行 | Alt+↑ / Alt+↓ |
| 📜 复制本行到上/下方 | Shift+Alt+↓ |
| 💬 注释代码 | Ctrl+/ |
| 🔍 全局搜文件 | Ctrl+P |
| 🎛️ 命令面板 | Ctrl+Shift+P |
| 🖥️ 一分为二编辑器 | Ctrl+\ |
| 🐞 启动调试 | F5 |
| 终端呼出 | Ctrl+` |
| 多光标选中 | Ctrl+D |
扩展（Extensions）就是 VS Code 的 App Store：点活动栏的 🧩 图标，搜索名字，点安装，立刻生效 —— 不用重启！
新手装机六件套 👇，从左到右依次是：中文语言包、主题美化、实时预览、括号彩虹、错误提示美化、图标包。
装完中文包后按 Ctrl+Shift+P 输入 display，选 Configure Display Language 切换中文。
界面变中文
高颜值主题
网页实时预览
彩虹括号
错误直接标在行内
文件图标美化
程序出错别慌，调试（Debug）就是给你的代码做「胃镜」🩺：
1️⃣ 在行号左边点一下，出现红点 = 断点，程序跑到这里会暂停；
2️⃣ 按 F5 启动调试；
3️⃣ 用顶部的工具条单步执行：一行一行走，看变量怎么变；
4️⃣ 左侧面板实时显示所有变量的值，Bug 无处遁形！
常用单步键：F10 逐行跳过函数，F11 钻进函数内部，Shift+F5 停止。
学会这四招，同事会以为你在用魔法 🪄：
1️⃣ 多光标：Ctrl+D 选中一个词再按一次，选中下一个相同的词，所有光标一起编辑！
2️⃣ Emmet：写 HTML 神技，输入 ul>li*3 按 Tab，列表秒生成；
3️⃣ 用户片段 Snippets：把常用代码存成模板，敲缩写一键展开；
4️⃣ 设置同步：登录账号，主题、插件、快捷键跟着你走遍全世界 ☁️。