（第十九期）用 VS Code 管理项目：目录文件夹与根目录，一次讲清

（第十九期）用 VS Code 管理项目：目录文件夹与根目录，一次讲清

在开始路径知识点之前，先把两个基础概念说明白：什么是“目录文件夹”，什么是“根目录”。理解这两个概念，能让你在 VS Code 里高效地新建、管理和查找项目文件。

什么是目录文件夹（项目文件夹）

• 目录文件夹：装着网站相关所有素材的那一层“总文件夹”，例如 HTML、CSS、图片等，集中管理，便于查找与维护。
• 在实际项目中，我们会创建一个总文件夹（例如取名为 web），把项目用到的所有资源都放进去。

一个典型的目录结构如下：

web/            # 目录文件夹（项目的最外层容器）
├─ index.html
├─ css/
│  └─ style.css
├─ images/
│  ├─ banner.jpg
│  └─ logo.png
└─ js/
   └─ app.js

• 这样做的好处：文件统一管理、结构清晰、后期扩展方便；换电脑或发给同事，拷贝整个 web 文件夹即可。

什么是根目录

• 根目录：双击打开目录文件夹后，看到的“最外层这一层”就叫根目录。
• 例如打开 web 后，index.html、css/、images/、js/ 所在的那一层就是根目录。
• 注意区分：进入 images/ 后的那一层就不再是根目录了，它是根目录下的子目录。

一句话记忆：根目录 = 打开项目文件夹后映入眼帘的第一层。

在 VS Code 中打开目录文件夹（两种高效方式）

把项目作为一个整体在 VS Code 中打开，后续新建/删除文件会更顺手。

• 方式一：菜单打开

  1. 点击菜单栏：文件 → 打开文件夹
  2. 选择你的项目文件夹（例如 web）
  3. 确认后，VS Code 左侧资源管理器会显示整个项目结构

• 方式二：拖拽打开

  1. 将窗口稍微缩小
  2. 直接把目录文件夹（例如 web）拖拽到 VS Code 窗口中
  3. 松手，等待 VS Code 加载

打开后你会在左侧看到项目树；可以展开/折叠文件夹，直观查看根目录与其子目录。

在 VS Code 中新建/管理文件更顺手

• 在左侧资源管理器中，对着项目根节点或某个文件夹：
  • 点击“新建文件”图标，新建如 index.html
  • 点击“新建文件夹”图标，新建如 images/
• 新建的文件会自动保存到当前打开的目录文件夹中，无需每次“另存为”
• 不需要的文件/文件夹，右键“删除”或键盘 Delete 即可

示例操作：

• 在根目录直接新建 index.html（输入 ! 可快速生成 HTML 骨架）
• 新建 images/ 文件夹，批量放置图片资源，便于管理

常见易错点与再次强调

• 根目录只指最外层：打开 web 看到的那一层是根目录；进入 images/ 后就不是根目录了。
• 统一入口很关键：所有项目文件建议放进同一个目录文件夹中，避免散落在各处。
• 打开项目应打开文件夹：不要只打开单个文件，打开文件夹能提升 2 倍效率（新建、删除、预览一气呵成）。

小结

• 目录文件夹：项目的“总文件夹”，例如 web，用于集中管理网站相关所有文件。
• 根目录：打开目录文件夹后看到的第一层。
• VS Code 打开项目：推荐“文件 → 打开文件夹”或直接拖拽文件夹到 VS Code。
• 管理更高效：新建文件/文件夹即刻就位，组织清晰，维护省心。