简介：这是一份面向编程初学者与前端开发新人的VSCode基础使用教程，聚焦日常编码提效场景，系统梳理编辑器核心功能与高频快捷键。资源以PDF文档形式呈现，共1个文件，大小711KB，内容结构清晰，覆盖命令面板调用、界面认知、终端集成、光标移动与多光标编辑、文本选择与删除、代码注释与格式化、大小写转换、行合并排序等30+实用操作，并针对Mac与Windows双平台提供对应快捷键对照（如Cmd+Shift+P/Ctrl+Shift+P），附带快速跳转（Cmd+P/Ctrl+P）、符号导航（Cmd+Shift+O）、定义跳转（F12）等进阶技巧说明。教程强调“先用再学”理念，从文本编辑器视角切入，降低学习门槛，适合零基础用户快速上手并建立高效编辑习惯。目前已有1248人学习下载。
1. 这不是“另一个编辑器”：VSCode 是你写代码时真正能搭把手的“数字工作台”
你刚学编程，老师说“装个编辑器”，你搜到 VSCode，点开官网——满屏英文、一堆“extension”“debugger”“integrated terminal”，心里一咯噔：这玩意儿是不是得先考个证才能用？
别慌。VSCode 不是 Photoshop 那种要背几十个图层菜单的软件，它本质上是个「聪明的记事本」：你打开它，敲字、保存、再打开——这事它一秒就干利索；但当你开始写真实项目（比如一个带按钮的网页、一段处理表格的 Python 脚本），它就会悄悄递给你三样东西：能秒跳到任意代码位置的“导航仪”、能同时改十处变量名的“分身术”、还有遇到报错时自动标出哪一行出问题的“显微镜”。
它不强制你学新语法，也不要求你记住所有快捷键——你今天只记住Cmd+Shift+P（Windows 是Ctrl+Shift+P），明天就能调出所有功能；你今天只会用鼠标点“保存”，后天就能用Cmd+S代替；你甚至可以先把它当 Word 用三个月，等哪天发现“咦，我改了 5 个文件里的函数名，居然只按了一次 F2”，才突然意识到：哦，原来它一直在等我准备好，才把真正的力气使出来。
这份《VSCode 基础使用教程》就是专为这样的你写的：零基础、没碰过命令行、连“插件”是什么都懒得查——但你希望今天装完，今晚就能顺手写完作业、跑通第一个小 Demo，而不是对着界面发呆两小时。它不讲原理，不堆术语，只告诉你：哪一步该按什么键、为什么这一步能省 30 秒、如果按了没反应该怎么救回来。接下来，我们就从最不敢动的“命令面板”开始，像拆一个乐高盒子那样，一块一块，把 VSCode 拆成你能摸得着、用得上的工具。
2. 先搞懂一个核心入口：命令面板（Cmd+Shift+P）不是菜单，是你的“万能遥控器”
很多新手第一次打开 VSCode，盯着顶部一排“文件、编辑、选择……”的菜单栏，下意识去点“编辑 → 查找 → 替换”，结果发现：找不到自己要的功能，或者点了半天没反应。这不是你手慢，是方向错了——VSCode 的设计哲学很直白：90% 的操作，不该靠“找菜单”，而该靠“说人话”。这个“说人话”的地方，就是命令面板（Command Palette）。它不是某个隐藏功能，而是整个编辑器的“语音助手”：你不用记住它在哪，只要知道怎么唤醒它，就能让它干几乎所有事。
2.1 为什么必须第一个学会它：它比菜单快 3 倍，比搜索框准 10 倍
想象你在写一个 HTML 页面，想给某段文字加粗，但不确定 VSCode 有没有内置的“加粗”功能（其实没有，但你不知道）。如果你去翻菜单：“编辑 → 文本操作 → 格式化 → …？”——菜单层级深、名字抽象、还可能根本不在那里。
换成命令面板：按Cmd+Shift+P（Mac）或Ctrl+Shift+P（Windows），输入“bold”，立刻跳出“Toggle Bold”（切换加粗）；输入“comment”，立刻看到“Add Line Comment”（添加单行注释）、“Toggle Block Comment”（切换块注释）；输入“format”，马上列出“Format Document”（格式化整个文档）、“Format Selection”（仅格式化选中部分）。
关键在于：它支持中文、英文、缩写、模糊匹配。你输“save”，它懂你要“保存”；输“save as”，它给你“另存为”；输“set path”，它直接跳到“在 PATH 中安装 'code' 命令”——这个功能，正是后面让你能在终端里直接打code .打开当前文件夹的关键。
提示：命令面板是 VSCode 的“中枢神经”，所有插件装好后，它们的功能也全靠这里调用。你以后装的任何新工具（比如 Markdown 预览、JSON 校验、Git 图形化操作），第一步永远是打开它，输名字，回车启用。
2.2 第一个实操：用命令面板完成“三步开机任务”，验证它真能干活
我们不做虚的，现在就动手，用命令面板完成三个真实场景任务。每一步你都能立刻看到效果，确认“这玩意儿真的听我的”。
步骤 1：让 VSCode 认得你电脑的“终端”
这是后续所有高效操作的基础。很多新手卡在这一步，导致后面学“在终端运行代码”时死活打不开终端窗口。
- 按
Cmd+Shift+P（Mac）或Ctrl+Shift+P（Windows）打开命令面板； - 输入
shell command（输前 3 个字母she就够了，它会自动联想）； - 在下拉列表中找到
Shell Command: Install 'code' command in PATH（Mac 用户）或Shell Command: Install 'code' command in PATH（Windows 用户，名称一致）； - 回车执行。
✅ 成功现象：Mac 用户会看到弹窗提示“已安装”，Windows 用户无明显提示但后台已生效；
✅ 验证方法：打开系统终端（Mac 的 Terminal，Windows 的 PowerShell 或 CMD），输入code --version，如果返回类似1.85.0的版本号，说明成功；
✅ 为什么重要：装好后，你就能在任何文件夹里右键 → “在终端打开”，然后直接输入code .，VSCode 就会以当前文件夹为根目录打开整个项目——这才是真实开发的起点，不是双击图标再手动点“打开文件夹”。
步骤 2：快速创建一个“测试文件”，亲眼看看命令面板多懂你
- 按
Cmd+Shift+P/Ctrl+Shift+P； - 输入
new file； - 选择
File: New File； - 回车后，编辑区出现一个未命名标签页（显示为
Untitled-1）； - 按
Cmd+S/Ctrl+S保存，输入文件名test.js（注意后缀.js），选择保存位置（比如桌面）；
✅ 成功现象：左侧资源管理器里立刻出现test.js文件，且编辑区顶部标签页显示为test.js；
✅ 关键细节：VSCode 会根据你输入的后缀名（.js、.py、.html）自动识别语言，并启用对应语法高亮和智能提示——你什么都没配置，它已经默默开工了。
步骤 3：用“说人话”方式，给代码加注释（不用记快捷键）
- 在刚创建的
test.js文件里，输入一行代码：console.log("Hello, VSCode!");； - 按
Cmd+Shift+P/Ctrl+Shift+P； - 输入
line comment（输line com就够）； - 选择
Editor: Toggle Line Comment； - 回车。
✅ 成功现象：那一行代码自动变成// console.log("Hello, VSCode!");；
✅ 再试一次：光标放回这行，再按Cmd+Shift+P→line comment→ 回车，注释消失，代码恢复原样；
✅ 为什么这比记Cmd+/更可靠：当你忘记快捷键时，命令面板永远在；而且它明确告诉你“这是切换行注释”，不会和“块注释”混淆。
2.3 常见问题排查：命令面板打不开？输不出？按了没反应？三分钟自救指南
新手第一次用命令面板，90% 的问题都集中在这几个“玄学时刻”。别关软件重装，按下面顺序检查，基本 3 分钟内解决：
现象 1：按Cmd+Shift+P没反应，屏幕毫无变化
→ 原因：键盘被其他软件劫持（常见于输入法、远程控制工具、某些游戏辅助软件），或 VSCode 窗口未获得焦点（比如你刚从微信切回来，VSCode 看似开着，实际没被激活）。
→ 解决：先点一下 VSCode 编辑区任意位置，确保它是最前端窗口；再按组合键。如果还不行，试试F1键（VSCode 官方定义的命令面板默认键，所有系统通用）；若F1有效，说明是Cmd+Shift+P组合键冲突，可暂时用F1替代。
现象 2：命令面板打开了，但输入中文/英文什么都搜不到，列表空空如也
→ 原因：VSCode 正在加载插件或索引大文件，处于“假死”状态；或你误触了“过滤模式”（比如之前按过Cmd+K Cmd+P，进入了“仅显示最近命令”模式）。
→ 解决：耐心等 5 秒，看左下角状态栏是否有“正在加载…”提示；若等待无效，按Esc关闭面板，再按一次Cmd+Shift+P重新打开；如果仍为空，尝试输入> reload（大于号加 reload），回车执行“Developer: Reload Window”，强制刷新编辑器。
现象 3：输入shell command后，列表里没有“Install 'code' command in PATH”选项
→ 原因：VSCode 未以管理员权限安装（Windows）或未通过官方 dmg 包安装（Mac），导致系统级 PATH 修改权限被拒绝；或你用的是便携版（Portable Version），它天生不支持此功能。
→ 解决：Windows 用户右键 VSCode 快捷方式 → “以管理员身份运行”，再试；Mac 用户去官网下载最新.dmg安装包重装（不要用 Homebrew 或第三方渠道安装）；便携版用户请放弃此功能，改用“文件 → 打开文件夹”手动操作。
现象 4：命令面板里找到了命令，但回车后报错“command not found”或“permission denied”
→ 原因：系统环境变量 PATH 未正确更新（尤其 Mac 重启终端后未生效），或 VSCode 与终端不是同一套 shell 环境（比如你用 zsh，但 VSCode 启动的是 bash）。
→ 解决：Mac 用户重启终端应用（完全退出 Terminal，再重新打开），再输code --version测试；Windows 用户重启 PowerShell/CMD，或直接在 VSCode 内置终端（Ctrl+）里执行code --version`，如果内置终端能用，说明外部终端需手动添加 PATH。
3. 别再用鼠标点来点去了：掌握这 5 个高频快捷键，效率直接翻倍
命令面板是“万能遥控器”，但遥控器总不能每次换台都念一遍“CCTV-1”吧？有些操作太常用，必须肌肉记忆。新手常犯的错误是：试图一次性背下所有快捷键表，结果三天后全忘光。正确的做法是——只记你现在正要用的那 5 个，用熟一个，再加一个。我们挑的这 5 个，覆盖了 80% 的日常编码动作：移动光标、跳转文件、格式化代码、加注释、重命名变量。它们不依赖插件，开箱即用，按错也不会崩。
3.1 光标移动：告别“狂按方向键”，3 秒定位到任意位置
你写代码时，是不是经常这样：想改第 10 行开头的变量名，于是按住→键，数着“1、2、3……”直到光标挪过去？或者想删掉整行代码，先Shift+→选中，再Delete？这些动作，在 VSCode 里都有“一键直达”的解法。
移动到行首/行尾：
Cmd+←（Mac）或Home（Windows）→ 光标瞬间跳到当前行最左边；Cmd+→（Mac）或End（Windows）→ 瞬间跳到行尾。
✅ 场景：你刚写完const userName = "Alice";，想在=前加let，不用慢慢挪，Cmd+←两次（第一次到行尾，第二次到行首？不对！Cmd+←是到行首，Cmd+→是到行尾，Cmd+←再按一次还是行首，所以只需Cmd+←到行首，再按→两次到c和o之间即可）；
✅ 为什么比方向键强：方向键是“像素级移动”，快捷键是“语义级移动”——它理解“行”这个概念，所以永远一步到位。移动到文档开头/结尾：
Cmd+↑（Mac）或Ctrl+Home（Windows）→ 跳到第一行第一列；Cmd+↓（Mac）或Ctrl+End（Windows）→ 跳到最后一行最后一个字符后。
✅ 场景：你打开一个 500 行的配置文件，想快速看最上面的import语句，Cmd+↑一下搞定；
✅ 注意：Cmd+↑/↓在 Mac 上有时会被系统快捷键（比如 Mission Control）劫持。如果失效，去“系统设置 → 键盘 → 快捷键 → 调度中心”，关闭Cmd+↑和Cmd+↓的系统绑定。在花括号
{}之间跳转：Cmd+Shift+P→ 输入goto bracket→ 选择Go to Bracket（或直接记快捷键Cmd+Shift+P→Cmd+Shift+P太长，其实有更快的：Cmd+Shift+P→Go to Bracket，但更常用的是Cmd+Shift+P→Go to Bracket，不过 VSCode 默认没给它分配快捷键，所以首次用命令面板，之后可自定义）。等等，我们简化：最实用的其实是Cmd+Shift+P→Go to Bracket，但为了不增加记忆负担，新手直接用命令面板搜就行。
✅ 场景：你写了一个很长的if语句，光标在}处，想快速看到对应的{在哪行，搜Go to Bracket回车，光标自动跳过去；
✅ 价值：读别人代码、调试嵌套逻辑时，这是救命技能，避免手动滚动找“配对括号”浪费 2 分钟。
3.2 文件与符号跳转：5 秒内打开任意文件、定位任意函数
大型项目动辄几十个文件，你不可能靠左侧文件树一层层点开。VSCode 的跳转能力，是它区别于普通记事本的核心——它像有个“全项目搜索引擎”，你只要说出名字，它立刻带你到现场。
快速打开文件（Cmd+P）：按
Cmd+P（Mac）或Ctrl+P（Windows），输入文件名关键词（比如main、config、user），列表实时过滤，回车即开。
✅ 场景：项目里有src/components/UserCard.vue、src/utils/userHelper.js、tests/user.test.js，你只想开 Vue 文件，输user card，第一个结果就是它；
✅ 进阶技巧：输user后，按Cmd+Enter（Mac）或Ctrl+Enter（Windows），文件会在新编辑器组（新标签页区域）打开，不挤占当前工作区——这招在对比两个文件时超有用。跳转到指定行（Ctrl+G）：按
Ctrl+G（所有系统通用），输入行号（比如53），回车，光标直落第 53 行。
✅ 场景：浏览器控制台报错Uncaught TypeError: Cannot read property 'name' of undefined at app.js:53，你立刻Ctrl+G→53，精准定位；
✅ 组合技：想跳转到app.js的第 53 行？先Cmd+P→app.js→ 回车打开，再Ctrl+G→53；或者一步到位：Cmd+P→app.js:53→ 回车，直接打开并跳转。跳转到符号（函数/类/变量名）（Cmd+Shift+O）：按
Cmd+Shift+O（Mac）或Ctrl+Shift+O（Windows），输入函数名（比如fetchUserData、render），列表显示所有匹配符号，回车跳转。
✅ 场景：你在index.js里看到initApp()调用，想知道它在哪定义，Cmd+Shift+O→initApp→ 回车，瞬间跳到utils/init.js里的函数体；
✅ 为什么比Cmd+P强：Cmd+P找文件，Cmd+Shift+O找文件里的具体“东西”，它是代码级的导航。
3.3 代码编辑加速：格式化、注释、重命名，三键解决
写完代码，别急着 Ctrl+S 保存就完事。这几步操作，能让代码从“能跑”变成“好读、好改、好维护”，而且全是“一键生成”。
格式化整个文件（Option+Shift+F）：按
Option+Shift+F（Mac）或Alt+Shift+F（Windows），VSCode 自动按语言规范调整缩进、空格、换行。
✅ 场景：你从网上复制了一段 Python 代码，缩进全是 Tab 和空格混用，运行报IndentationError，按这一键，立刻变整齐；
✅ 注意：首次使用可能提示“找不到格式化程序”，这时它需要一个插件（比如 Python 语言需装 “Python” 插件，JavaScript 需 “Prettier” 或 “ESLint”）。别慌，按提示点“安装”，重启 VSCode 即可——这就是命令面板的延伸价值。添加/取消单行注释（Cmd+/）：选中一行或多行代码，按
Cmd+/（Mac）或Ctrl+/（Windows），自动在每行开头加//（JS/TS）或#（Python）；再按一次，注释取消。
✅ 场景：调试时想临时禁用几行代码，不用删，Cmd+/一按，它们就“隐身”了；
✅ 玄学经验：如果按了没反应，大概率是你没选中代码（光标在行内但未选中），先Cmd+A（全选）再Cmd+/，保准成功。重命名变量/函数（F2）：把光标放在变量名上（比如
userName），按F2，输入新名字（比如userFullName），回车——所有同名变量、函数调用、定义处，全部同步更新。
✅ 场景：你写了个getData()函数，后来发现它其实只获取用户数据，想改成getUserData()，F2一按，整个项目里所有getData()都变成getUserData()；
✅ 为什么是“后悔药”：再也不用担心起错名，改名成本从“手动搜 10 次替换”降到“2 秒”。
3.4 常见问题排查：快捷键失灵？按了没反应？三步定位根源
快捷键是 VSCode 的“高速公路”，但新手常卡在收费站。别盲目重装，按这个顺序排查：
现象 1：Cmd+P打不开文件搜索，但Cmd+Shift+P能用
→ 原因：Cmd+P被系统或其它软件占用（Mac 的 Spotlight 是Cmd+Space，一般不冲突，但某些清理软件会劫持Cmd+P）；或 VSCode 主题/设置意外禁用了此快捷键。
→ 解决：先试Ctrl+P（Windows 键位），如果有效，说明是 Mac 键位冲突；去“系统设置 → 键盘 → 快捷键 → 输入源”，关闭所有Cmd+P相关绑定；若无效，按Cmd+Shift+P→ 输入open keyboard shortcuts→ 回车，打开快捷键设置页，搜workbench.action.quickOpen，确认其绑定是Cmd+P，且未被禁用。
现象 2：F2重命名没反应，光标只是闪了一下
→ 原因：光标没准确停在“可重命名的标识符”上（比如停在变量名中间的字母上，或停在空格/标点上）；或当前文件类型不支持（比如纯文本.txt文件，VSCode 不知道怎么解析变量）；或语言服务未启动（插件加载慢）。
→ 解决：把光标移到变量名最开头（比如userName的u上），确保左侧状态栏显示语言为JavaScript或Python（不是Plain Text）；若状态栏是Plain Text，点击它，选择正确语言；若仍无效，Cmd+Shift+P→Developer: Restart Language Server，重启语言服务。
现象 3：Option+Shift+F格式化报错“no formatter installed for 'javascript'”
→ 原因：VSCode 默认不带 JS 格式化器，必须装插件；或插件已装但未启用（比如你装了 Prettier，但没在当前工作区设为默认）。
→ 解决：Cmd+Shift+P→Extensions: Install Extensions→ 搜prettier，安装 “Prettier - Code formatter”；安装后，Cmd+Shift+P→Preferences: Open Settings (JSON)，在右侧 JSON 里添加：
"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }保存，重启 VSCode。再试Option+Shift+F，立竿见影。
4. 别再手动复制粘贴了：多光标编辑，让你一次改遍所有相同内容
你有没有过这种经历：写一个表格，10 行数据，每行都要加class="item"，于是你复制class="item"，粘贴 10 次，再手动调整每个item为不同名字？或者改一个 API 接口地址，项目里 20 个文件都写了https://api.example.com/v1/，你想升级到v2，只能一个文件一个文件打开，Ctrl+F 搜索替换？
多光标（Multi-cursor）就是 VSCode 给你的“分身术”：它允许你同时在多个位置编辑，输入一次，所有光标位置同步响应。这不是炫技，是每天能省下 15 分钟的刚需技能。新手最大的误区是觉得“多光标很复杂”，其实它只有两种启动方式：鼠标点选和快捷键选词，我们从最简单的开始。
4.1 鼠标启动法：按住 Option（Mac）或 Alt（Windows），点哪光标就在哪
这是最直观、零门槛的多光标入门法。它不依赖键盘记忆，纯粹靠手眼协调，适合第一次体验“分身”感觉。
- 操作步骤：
- 打开一个新文件（比如
test.html），输入以下 3 行：<div class="card">Content 1</div> <div class="card">Content 2</div> <div class="card">Content 3</div> - 把鼠标移到第一行
card的c上，按住Option（Mac）或Alt（Windows）不放； - 用鼠标点击第二行
card的c，再点击第三行card的c； - 松开
Option/Alt，你会看到三行card下方同时出现光标（闪烁的小竖线）； - 此时输入
item，三行的card同时变成item； - 按
Esc退出多光标模式。
✅ 成功现象：三行同步修改，0 失误；
✅ 为什么安全：鼠标点选完全可控，你想选哪几个就点哪几个，不会误伤；
✅ 进阶用法：点选时按住Shift，可以框选连续多行的同一列（比如三行都点在<符号上，就能同时修改所有<div>为<section>）。
- 打开一个新文件（比如
4.2 快捷键启动法：Cmd+D（Mac）或 Ctrl+D（Windows），智能选中相同单词
鼠标点选适合少量、分散的位置；当你要改的是大量重复单词（比如变量名、CSS 类名、API 路径），Cmd+D是神技。它的逻辑是：第一次按，选中光标所在单词；第二次按，选中下一个相同单词；第三次按，选中再下一个……直到所有匹配项都被点亮。
- 操作步骤：
- 在
test.html里，把光标放在第一行card的任意位置（比如c上）； - 按
Cmd+D（Mac）或Ctrl+D（Windows）→ 第一个card被选中（高亮蓝底）； - 再按一次
Cmd+D→ 第二个card被选中； - 再按一次 → 第三个
card被选中； - 此时三处
card全部高亮，输入item，全部同步替换； - 如果你只想改前两个，按
Cmd+K Cmd+D（Mac）或Ctrl+K Ctrl+D（Windows）跳过当前选中的，继续找下一个。
✅ 成功现象：无需鼠标，3 秒完成 10 处替换；
✅ 关键细节：Cmd+D是“增量选择”，不是“全选”。它尊重上下文，比如你光标在userCard的card上，它只会选card，不会选userCard整个词——这避免了误操作。
- 在
4.3 多行光标启动法：Option+Shift+I（Mac）或 Alt+Shift+I（Windows），给每行末尾加光标
这是处理“列表型数据”的绝招。比如你有一堆 URL，想在每行末尾加&format=json，或者一堆 CSS 属性，想在每行末尾加;。
- 操作步骤：
- 输入以下 3 行 URL：
https://api.example.com/users https://api.example.com/posts https://api.example.com/comments - 用鼠标拖选这三行（按住
Shift+ 方向键，或鼠标框选）； - 按
Option+Shift+I（Mac）或Alt+Shift+I（Windows）→ 每行末尾（换行符前）自动出现光标； - 输入
&format=json，三行同时追加； - 按
Esc退出。
✅ 成功现象：每行独立追加，不互相干扰；
✅ 为什么比复制粘贴强：复制粘贴要算好位置、怕漏行；多光标是“所见即所得”，你框选几行，它就处理几行。
- 输入以下 3 行 URL：
4.4 常见问题排查：多光标乱飞？选错词？按了没反应？新手必看三避坑
多光标是高效利器，但新手常因小细节翻车。记住这三条，少走 2 小时弯路：
避坑 1：按Cmd+D后，光标跳到了奇怪的地方，不是我要的单词
→ 原因：Cmd+D默认按“单词边界”选择，如果单词里有-、_、.等符号（比如user-name、data_url、obj.property），它会把它们切成多个“单词”。你光标在user-name的n上，Cmd+D可能只选中name，而不是整个user-name。
→ 解决：按Cmd+A全选当前单词（Cmd+A在单词上是“选中整个标识符”，包括-和_），再按Cmd+D，它就会以全选范围为基准查找匹配项；或Cmd+Shift+P→Preferences: Open Settings (JSON)，添加：
"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;':\",.<>/?"去掉-和_，让它们不再被当作分隔符。
避坑 2：鼠标按住Option点击，光标没出现，反而打开了别的软件
→ 原因：Mac 系统快捷键冲突（比如Option+Click是 Mission Control 的“显示桌面”），或 VSCode 设置里禁用了鼠标多光标。
→ 解决：去“系统设置 → 键盘 → 快捷键 → 调度中心”，关闭Option+Click相关选项；VSCode 内，Cmd+Shift+P→Preferences: Open Settings (JSON)，确认"editor.multiCursorModifier": "alt"存在且未被注释（Mac 默认是alt，即Option）。
避坑 3：多光标模式下，按Backspace删除，结果只删了第一个光标处的字符，其他没动
→ 原因：你按的是Backspace，但多光标编辑时，删除操作必须用Cmd+Shift+K（Mac）或Ctrl+Shift+K（Windows）才能同步删除整行；Backspace和Delete是“逐字符删除”，只影响当前活动光标（最亮的那个）。
→ 解决：多光标状态下，想删整行，用Cmd+Shift+K；想删选中内容，先Cmd+X剪切（它会剪切所有光标选中的内容）；想删单个字符，确保只有一个光标亮着（按Esc退出多光标，再用方向键定位）。
5. 从“能用”到“顺手”：三个真实工作流，带你跑通第一个完整项目
前面学的都是“零件”：命令面板是引擎，快捷键是油门，多光标是变速箱。现在，我们把这些零件组装成一辆能上路的车——用三个真实、微小、但完整的工作流，带你从新建文件开始，到运行出结果结束。每个流程都只用到前面学过的技能，不引入新概念，目标是：你照着做，5 分钟内一定能跑通，且明白每一步为什么这么做。
5.1 工作流 1：用 VSCode 写一个“Hello World”网页，并在浏览器里看到它
这不是教 HTML，是教你怎么用 VSCode 把代码变成网页。很多新手卡在“写完了，然后呢？怎么看到效果？”
步骤 1：创建项目文件夹
在桌面新建一个文件夹，命名为my-first-webpage；
打开 VSCode，Cmd+Shift+P→File: Open Folder→ 选择my-first-webpage文件夹；
✅ 此时左侧资源管理器显示空文件夹，VSCode 以它为根目录。步骤 2：创建 HTML 文件
Cmd+Shift+P→File: New File→ 回车；Cmd+S→ 输入index.html→ 保存；
✅ 左侧出现index.html文件。步骤 3：写最简 HTML 代码
在index.html里输入：<!DOCTYPE html> <html> <head> <title>My First Page</title> </head> <body> <h1>Hello, VSCode!</h1> <p>This is my first webpage.</p> </body> </html>✅ 写完后，VSCode 自动高亮语法（
<h1>是蓝色，Hello是黑色），说明它认出了 HTML。步骤 4：在浏览器里打开
右键index.html文件 →Reveal in Finder（Mac）或Open Containing Folder（Windows）→ 在文件夹里双击index.html，浏览器自动打开；
✅ 看到标题 “My First Page” 和段落文字；
✅ 进阶：Cmd+Shift+P→Simple Browser: Open in Simple Browser（需先装插件 “Simple Browser”），直接在 VSCode 内置浏览器预览，不用切窗口。
5.2 工作流 2：用 VSCode 写一个 Python 脚本，计算两个数的和，并在终端运行它
Python 新手常困惑：“代码写在哪？怎么运行？报错在哪看？”这个流程直击痛点。
步骤 1：创建 Python 文件
Cmd+Shift+P→File: New File→Cmd+S→calculator.py→ 保存。步骤 2：写 Python 代码
本文还有配套的精品资源，点击获取
