显影· 三主题树 · 高中 术语表

VS Code:一间可扩展的工作室

装好、配顺、认得工作区——给自己搭第一间数字工作室。

⏱ 10–15 分钟讲 · 例 · 做 · 卡编号 hs-make-02
学习证据 学完后,怎么核对? 如何核对 · 适用边界 · 最后复核

把学习结果留在一个可以回看、可以复做的动作里;这一区只写学生能自己检查的证据。

如何核对

  • 工作区范围与扩展来源记录
  • 安装权限、同步与遥测设置核对

适用边界

本地编辑无需账号;只在有安装权限的设备上打开自己有权访问的文件夹。扩展、账号登录、设置同步与遥测按学校政策和当前官方说明核对,共用设备不保留账号。

最后复核

这是内容复核日期,不是学习截止日期。

例子记事本写页面的第三天,小雨破防了

初中时用文本编辑器、浏览器和项目 HTTP 预览就能做出第一个网页,工具很少,流程也短。可项目一长大就露怯了:小雨想把页面里十几处旧颜色全换掉,记事本连「全部替换预览」都没有;标签少敲一个斜杠,没有任何提醒,页面白屏找错找了半小时。木匠不会一辈子蹲在地板上干活——活儿多了,就该有间工作室。

名词这间工作室叫 VS Code(Visual Studio Code)——一款免费开源的代码编辑器,也是当下用得最广的一款。两个配套词:工作区=你「打开的那个项目文件夹」,一次打开一棵树而不是一个文件;扩展=按需加装的插件,让同一间工作室能干不同的活。

定义一间工作室的三块地皮

别被密密麻麻的按钮吓住,VS Code 的布局就三块:侧栏是货架(资源管理器摆着你的项目树),编辑区是工作台(可以分屏对照着改),集成终端是传声筒(上一课的 pwd / ls / cd 在这里照用,而且天生就站在项目文件夹里)。

VS Code 窗口 Ctrl+Shift+P=万能门铃:记不住按钮就敲它,打字点菜 侧栏=货架 资源管理器 studio ├ index.html ├ assets/ └ notes/ 整棵项目树在手边 编辑区=工作台 可以左右分屏:左边 HTML,右边 CSS,对照着改 改错有波浪线提醒,少个斜杠立刻看见 集成终端=传声筒 Ctrl+` 呼出,天生站在项目文件夹里,pwd / ls / cd 照用

三块地皮认全,这间工作室就算入住了:货架(侧栏)、工作台(编辑区)、传声筒(终端)。

入住之后,先记五把顺手的钥匙(macOS 把 Ctrl 换成 Cmd):

钥匙开哪扇门
Ctrl+P按文件名秒开文件——项目再大也不用鼠标翻树
Ctrl+F当前文件里找(和替换)
Ctrl+Shift+F整个项目里找——跨文件搜文字,命中处全列出来
Ctrl+/把选中行变成注释/取消注释
Ctrl+`呼出集成终端

泛化换个角度:这是学一切专业工具的三步法

今天的路线其实是个通用套路——先认布局(三块地皮各管什么),再记五键(最高频的操作练到不过脑),扩展等真问题来了再装(需要驱动,不是囤积)。以后你学 Photoshop、剪映、Blender,或任何一款专业软件,都是这三步。专业工具的可怕来自功能大全;专业用户的从容来自「我只精通我需要的那一小圈,并且知道怎么扩」。

核心句:专业工具上手三步:先认布局、再记五个快捷键、扩展等真问题来了再装——工作室是按需配出来的,不是一次装满的。

补充三例——两个常见用法,一个易错。

例一 · 常见用法:把 studio 整棵搬进工作区

小雨用「文件 → 打开文件夹」打开上一课的 studio——注意是打开文件夹,不是打开单个文件。左边货架立刻长出项目树;她点开 index.html,右键「在侧边打开」分出第二屏,一边看结构一边改文字;Ctrl+` 呼出终端,pwd 一敲,果然已经站在 studio 里。改完保存,在项目 HTTP 预览中刷新,浏览器里立刻是新样子——编辑器、终端、项目树,从此在同一扇窗里。

例二 · 常见用法:全项目搜索,一网打尽

阿哲的项目做到第七个页面,想把口头禅「超级好用」全改成「顺手」。他按 Ctrl+Shift+F 搜「超级好用」——三个文件里 11 处命中全部列在左栏,每处带上下文预览。他逐条扫一眼(第 8 处在引用别人的话里,不能改),其余点替换。比逐个文件开开关关快十倍,还不漏、不误伤。

例三 · 易错:扩展当收藏品囤

阿豪听说「VS Code 全靠扩展」,一晚上装了 30 多个:五套图标主题、四个「效率神器」、还有俩功能重复的格式化工具。结果启动变慢、右下角通知弹个不停,两个格式化工具还打架——保存一次代码被改成两种风格。错在哪:把「可扩展」理解成了「多多益善」,扩展没有需求牵引,装了也不会用,还互相干扰。修法:卸到零,改成「遇到一个真问题,才装一个对症的」,装前看一眼下载量和评分;月底清一次这个月没用过的。

你想知道「深色模式」这几个字出现在项目的哪些文件里——按哪把钥匙?

安全与替代:本地编辑无需账号。只从官方渠道安装,并先确认学校设备和安装权限;不能安装或联网时,不要绕过限制,可用记事本+浏览器继续编辑和预览。VS Code 只打开你有权访问的项目文件夹,不要把整台电脑当工作区。扩展可能读取工作区或联网,安装前核对发布者、用途和学校规则;共用设备不启用设置同步或保留登录,遥测设置按学校政策处理。
上手 · 入住你的工作室
  1. 先确认学校设备允许安装;允许时只从 VS Code 官网(code.visualstudio.com)下载。安装步骤看懂再点,遇到管理员提示就停,不要自行绕过;共用设备不要登录设置同步,并核对遥测设置是否符合学校政策。
  2. 「文件 → 打开文件夹」只打开上一课的 studio,确认左侧货架长出了你的项目树。
  3. 打开 index.html 写上一句话保存,用项目 HTTP 预览打开并在浏览器里看到它。
  4. Ctrl+` 开终端,pwd 确认自己站在 studio;再把五把钥匙各真按一次。

怎么算过关:工作区左侧能看到 studio 三项;改动保存后浏览器能看到;五个快捷键各用过一次,说得出各开哪扇门。

复习卡 · 点一下翻面

VS Code 的三块布局是什么?学专业工具的三步法呢?

答案

侧栏=货架(项目树)、编辑区=工作台(可分屏)、集成终端=传声筒(Ctrl+`)。三步法:先认布局,再记五个高频快捷键,扩展等真问题来了再按需装。

  • 打开的是文件夹不是文件:工作区一次装下整棵项目树。
  • 五把钥匙练到不过脑:P 开文件、F 页内找、Shift+F 全项目找、/ 注释、` 终端。
  • 扩展按需装、定期清——工具服务于问题,不是收藏品。