第一章 · 第 2 节

打开你的项目：VS Code

这一节你会拿到

你能用 VS Code 打开上一节那个项目文件夹，认得左侧的文件树。

回头一题

这道题不考这一节，考前面学过的。想不起来就回去翻一眼再答——记不住的东西，真用的时候一样会卡。

一份 HTML 文本里，改哪一处会让浏览器显示的画面跟着变？

上一节 Agent 帮你做出了个人主页，这一节用 VS Code 把它打开。VS Code 能一次打开整个项目文件夹，左边把里面的文件列成一棵树，这个项目里有哪些文件，一眼就能看清。

操作 · ▸ 开始前确认

你知道上一节那个项目文件夹在电脑上的哪个位置。Agent 把文件放在哪、怎么在文件夹里找到它，见 1.1。VS Code 还没装也不要紧，这一节会先带你装上，再用它打开那个文件夹。

VS Code 是什么

一句话

VS Code 是一个用于查看和编辑文件的编辑器。它跟普通文本编辑器不一样的地方是：能一次打开整个文件夹，左边列出所有文件，点哪个看哪个。

你不用它写代码——写代码是 Agent 的事。你用它来查看 Agent 改了什么、查找某个文件的位置，偶尔手动修改几个字。

先把它装上

操作 · 让 Agent 帮你安装。

在终端里对 Agent 说："帮我在电脑上安装 VS Code。" Agent 会看你是什么系统，自己把安装包下下来装好。装完终端里会告诉你成了。

装的时候终端大致是这样（仿真示意，你的系统和版本号不一样是正常的）：

终端

~ $ 帮我在电脑上安装 VS Code

正在检测系统...

Windows 系统，通过 winget 安装 Visual Studio Code

正在下载 Microsoft.VisualStudioCode (3.07 MB)...

████████████████████████████████ 100%

安装完成。VS Code 已就绪。

可以在开始菜单中找到并启动。

看到"安装完成"就说明 VS Code 已就绪。

想自己动手装也行。去官网下对应你系统的安装包，跟装别的软件一样：

Mac:下载 macOS 版，把图标拖进"应用程序"文件夹。
Windows:下载 Windows 版，双击安装包，一路下一步。

code.visualstudio.com · 下载

认识界面：三大区

下面是一张 VS Code 的界面示意图，不是真软件。把鼠标移到每个区域上(手机上点一下),会弹出这块是干什么的。要认的是三块：左边文件树、中间编辑区、底部终端。

steve-homepage - VS Code

资源管理器

steve-homepage
index.html
style.css
images

文件树:项目里所有文件的目录。想知道这个项目有哪些文件，就看这里；点一个文件名，它就在中间打开。

index.html

1<h1>你好，我是 Steve</h1>

2<p>修了 10 年电脑</p>

3<button>联系我</button>

编辑区:文件打开后，内容显示在这里。Agent 改了哪行字、你想看某个文件长什么样，都在这块看。

终端

steve-homepage $ opencode

终端:敲命令、和 Agent 对话的地方。后面装工具、让 Agent 干活、把网站上线，很多事都在这块敲一行命令完成。和你在 0.4 用过的那个终端是一回事，只是搬进了 VS Code 里。

第一次看记不住是正常的，下面有个标注小挑战，点几下就记住了。

怎么打开你的项目

操作 · 用 VS Code 打开 1.1 的文件夹。

注意是打开整个文件夹，不是单个文件——只有打开文件夹，左边才会出现文件树。Mac 和 Windows 的点法有点不一样，选你的系统看。

打开 VS Code,顶部菜单点 File,再点 Open Folder…(打开文件夹)。
找到 1.1 那个项目文件夹，选中它，点 Open。
左侧出现文件树，就成了。另一个办法：在访达(Finder)里右键文件夹，选 打开方式 里的 Visual Studio Code。

打开 VS Code,顶部菜单点 文件(File),再点 打开文件夹(Open Folder…)。
找到 1.1 那个项目文件夹，选中它，点 选择文件夹。
左侧出现文件树，就成了。另一个办法：在文件资源管理器里右键文件夹，选 通过 Code 打开。

常见错误

不要选择"打开文件"（Open File），那样每次只能查看单个文件，左侧不会出现文件树。要选打开文件夹（Open Folder），VS Code 才会把整个项目装进来。步骤记不清就直接问你的 Agent。

打开对了长什么样

怎么知道自己开对了？对着下面这张示意图挨个看。这是打开文件夹成功后的样子，留意三个标记：窗口顶部显示的是文件夹名称（而非某个文件名）、左侧文件树中列出了多个文件、选中的文件在中间编辑区显示出了内容。三条都对上，就是开对了。

steve-homepage - VS Code　(顶部是文件夹名，对了)

资源管理器

steve-homepage
index.html
style.css
images

index.html

1<h1>你好，我是 Steve</h1>

2<p>修了 10 年电脑</p>

3<button>联系我</button>

注意：你电脑上那个文件夹不一定叫 steve-homepage，显示的是你在 1.1 自己起的名字，不一样很正常。只要"顶部是文件夹名、左侧列着多个文件"，就说明打开正确。

打开错误的典型界面

要是窗口左边空空的，只开了孤零零一个文件，顶部显示的还是文件名不是文件夹名，那就是你点成"打开文件"了。回上一步，改用打开文件夹再来一次。

动手挑战：在界面图上认出三大区

还是上面那张界面图，按提示点对应的区域。三处全点对才完成，点错会标红、提示你那是哪一区，再点正确的那块。

请点击：文件树(项目里所有文件的目录，在哪一区？)

文件树编辑区终端

steve-homepage - VS Code

资源管理器

steve-homepage
index.html
style.css
images

index.html

1<h1>你好，我是 Steve</h1>

2<p>修了 10 年电脑</p>

3<button>联系我</button>

终端

steve-homepage $ opencode

提示：文件树在最左边那一竖条。

自检：对着你真实的 VS Code 窗口逐项核对

挑战是在示意图上认区。下面这几条要对着你自己电脑上刚打开的那个 VS Code 窗口核对，诚实地勾。勾不上的那条，就是你还没真打开成功的地方。

VS Code 窗口顶部显示的是文件夹名字,不是单个文件名。
左侧出现了文件树,里面列着不止一个文件(比如 index.html 之类)。
我能点左侧任一文件名,它的内容就在中间编辑区显示出来。
我打开的确实是 1.1 做个人主页那个文件夹,不是随便别的文件夹。

还差几项就齐了。

有勾不上的？八成是这三种

左侧没有文件树，只孤零零开着一个文件：你点成了"打开文件",改用打开文件夹重开。
左侧是空的、什么文件都没有：多半是开错了文件夹，或者那个文件夹本来就是空的，回 1.1 确认 Agent 把文件落在了哪个文件夹。
菜单和这里写的字不完全一样:VS Code 版本或语言不同会有差异，认"打开文件夹 / Open Folder"这个意思就行，实在找不到就把截图发给你的 Agent。

小测：三大区

你想知道一个项目里到底有哪些文件，该看 VS Code 的哪一块？

打不开文件夹、左侧没出现文件树、菜单和这里写的不一样？把你的系统(Mac 还是 Windows)和卡住的那一步发到群里问问大家，或者直接向 Abel 或助教提问。