【VSCode 使用指南】基本操作：文件管理、浏览器和标签页的使用

你好！正在阅读这篇文章的你，想必是刚开始学习 Web 开发，觉得“编辑器用起来好难……”吧。说实话，几个月前的我和你完全一样。编程知识为零，是从“HTML 是什么？”的水平开始的。

就是这样的我，在 AI 的帮助下，经过反复试验，在一个半月的时间里独立建成了两个网站（buyonjapan.com, copicode.com）。通过这次经历，我深刻地体会到，“掌握工具的技能和编写代码的技能同等重要”。

特别是，许多专业人士喜爱的编辑器“VSCode (Visual Studio Code)”，正因为功能丰富，对初学者来说可能显得有些复杂。本文将根据我的实际经验，聚焦于 Web 开发的核心——“文件操作”。我将尽量避免使用专业术语，结合我实际遇到的问题，深入浅出地讲解 VSCode 的基本 UI（用户界面）——“浏览器”的使用方法、高效的“标签页”管理，以及一些实用的“基本操作”。

读完本文时，你对 VSCode 文件管理的模糊不安感应该会烟消云散，能够自信地投入到项目中。来吧，让我们一起迈出舒适编码生活的第一步！

为什么 VSCode 的“文件操作”是所有基础的基础？

刚开始学习时，我总是把 HTML 文件保存在桌面上，然后直接拖拽到 VSCode 图标上打开。乍一看，这似乎没什么问题，对吧？但是，当我想修改 CSS 时，就得去另找 CSS 文件打开；想添加图片时，又得打开另一个文件夹……工作流程变得异常繁琐。

这种“单文件编辑”正是初学者最容易掉入的陷阱。一个网站是由 HTML、CSS、JavaScript、图片等众多文件相互协作才形成的。VSCode 的真正价值在于，它不是零散地处理这些文件，而是将整个项目作为一个“整体”来管理。

为此，最重要的基本操作就是“打开文件夹”。这和单纯地打开文件完全不同。通过在 VSCode 中打开整个项目的父文件夹，项目的所有文件结构都会显示在左侧边栏的“浏览器”中，从而实现统一管理。

这种“管理整个项目”的思想，正是 VSCode UI 设计的核心。左侧是整个项目（浏览器），中间是单个文件（编辑器），底部是各种信息（终端或问题面板）——这样的布局是为了高效开发而优化的。

完全掌握浏览器：你项目的指挥中心

成功“打开文件夹”后，就该掌握 VSCode 的核心——“浏览器”视图了。它位于最左侧活动栏上，图标是两个重叠的文档。你打开的文件夹内容会以树状结构显示在这里。

将鼠标悬停在文件夹名称（示例中为“MY-PROJECT”）右侧，会出现几个小图标。这些 UI 元素将成为你的强大武器。

• 新建文件：创建新文件（如 .html 或 .css）。
• 新建文件夹：创建新文件夹（如 images 或 scripts）。
• 刷新浏览器：如果在 VSCode 之外更改了文件，刷新视图以显示最新状态。
• 折叠浏览器中的文件夹：关闭所有打开的文件夹，使树状视图更整洁。

创建文件和文件夹：整理的第一步

随着项目越来越大，文件整理变得至关重要。例如，通常会将 CSS 文件放在 css 文件夹中，将 JavaScript 文件放在 js 文件夹中。

让我们在 css 文件夹中创建一个 style.css 文件。首先，用“新建文件夹”图标创建 css 文件夹。然后，选中创建的 css 文件夹，点击“新建文件”图标，输入 style.css 并按 Enter 键。

1. 点击“新建文件夹”图标 → 输入 `css` 并按 Enter
2. 选中创建的 `css` 文件夹
3. 点击“新建文件”图标 → 输入 `style.css` 并按 Enter

注意事项：文件操作与“路径”的密切关系

重命名文件和文件夹（选中文件后按 F2）、移动（拖放）和删除（Delete 键）都可以直观地操作。但这里有一个非常重要的注意事项：“路径断裂”。

例如，假设你的 index.html 文件正在从 images 文件夹中加载 logo.png。HTML 代码可能如下所示：

<img src="images/logo.png" alt="公司 Logo">

在这种情况下，如果你将 images 文件夹的名称更改为 assets 会发生什么？由于 HTML 代码中的路径仍然是旧的，浏览器将找不到该图片，导致显示损坏。

我的失败经历：在制作网站时，我曾为了整理图片而更改了文件夹名称。虽然 VSCode 很智能地提示我自动更新路径，但我忽略了一些，结果导致网站上的一些图片无法显示。从那次经历中，我养成了移动文件或文件夹后，务必检查相关文件路径的习惯。

你需要手动将其更正为正确的路径。

<!-- 更正为正确的路径 -->
<img src="assets/logo.png" alt="公司 Logo">

掌控标签页者，掌控编码

从浏览器中打开文件时，它会以“标签页”的形式出现在编辑器顶部。理解这些标签页的行为是顺利在多个文件之间切换的关键。

初学者的障碍！理解“预览模式”

“咦？我只是单击了一下文件，为什么之前打开的标签页就消失了？”这是 VSCode 初学者 100% 会遇到的现象。我当然也经历过。这个现象的罪魁祸首就是“预览模式”。

• 预览模式：在浏览器中单击文件时，它会以该模式打开。其特点是标签页上的文件名是斜体。这是一种“快速查看”模式。当你单击另一个文件时，此标签页会自动关闭，并在同一标签页中预览新文件。
• 普通模式：当你双击文件，或双击处于预览模式的标签页时，它会切换到该模式。标签页名称变为常规字体（非斜体），并且该标签页将保持打开状态，直到你明确关闭它。

理解了这一区别后，我就能区分“需要仔细编辑的文件就双击”和“只想快速查看的文件就单击”，再也不会因为标签页无限增多而感到困惑了。

用分屏将工作效率提高到 200%！

对于 Web 开发人员来说，一个几乎可以说是不知道就致命的功能是“分屏”。你可以在编写 HTML 的同时，显示和编辑定义其样式的 CSS。

操作很简单。只需右键单击标签页，然后选择“向右拆分”或“向下拆分”。或者，你也可以通过将标签页拖放到编辑器区域的右、左、上或下边缘来进行拆分。甚至可以实现复杂的布局，例如四分屏。

多亏了这个功能，来回切换文件所浪费的时间为零。如果你在 HTML 中更改了类名，可以立即在相邻的屏幕上修改 CSS 中的选择器。一旦体验了这种流畅的工作流程，你就再也回不去了。

更进一步：用工作区加速生产力

一旦你习惯了基本操作，就一定要尝试一下“工作区”这个概念。这个功能可以看作是迈向中级用户的第一步。

例如，假设你正在构建的网站分为面向用户的“前端”部分和在服务器端运行的“后端”部分，并且它们位于不同的文件夹中。每次都单独打开它们很麻烦，对吧？这时候工作区就派上用场了。

1. 首先，在 VSCode 中打开第一个文件夹（例如 frontend-project）。
2. 然后，从“文件”菜单中选择“将文件夹添加到工作区...”，然后选择第二个文件夹（例如 backend-project）。
3. 当两个项目文件夹都显示在浏览器中时，从“文件”菜单中单击“将工作区另存为...”。

这会创建一个扩展名为 .code-workspace 的文件，例如 my-project.code-workspace。这是一个“配置文件”，记录了你的项目打开方式。从下次开始，只需打开这一个 .code-workspace 文件，就可以立即重现设置了多个文件夹的状态。

顺便说一下，这个配置文件的内容大致如下。

{
    "folders": [
        {
            "path": "frontend-project"
        },
        {
            "path": "backend-project"
        }
    ],
    "settings": {}
}

如你所见，它只是记录了要打开哪些文件夹。它不是一个黑匣子，了解其工作原理将使你能够更有效地应用它。

总结：让工具成为你的盟友，展开创造的翅膀

虽然篇幅很长，但只要你牢牢掌握本文讲解的内容，就足以应付 VSCode 文件管理的基本操作了。最后，让我们再回顾一下要点。

• 打开“文件夹”而不是单个文件，是一切的开始。
• 熟练使用浏览器的 UI（图标）来整理文件。
• 注意文件操作（尤其是移动和重命名）中的“路径断裂”问题。
• 有意识地区分使用标签页的“预览模式（单击）”和“普通模式（双击）”。
• 通过“分屏”同时打开 HTML 和 CSS，极大地提高开发效率。

一旦你学会了这些操作，你就能下意识地使用它们。俗话说，“熟能生巧”。请参考本文，在自己的电脑上多多尝试创建和删除文件和文件夹。一旦你对工具不再感到焦虑，你就能更专注于编码本身，学习和创作都会比现在更有趣。我为你加油！