打开你的项目:VS Code - Phase 1 · 1.2

上一节 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，也可以手动操作。去官网下载对应你系统的安装包，和安装普通软件一样：

认识界面:三大区

下面是一张 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 窗口核对,诚实地勾。勾不上的那条,就是你还没真打开成功的地方。

未全部勾选？以下为三种常见问题及对应解法：

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

本节小测

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

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