如何优雅地导出 VS Code 项目目录结构

watermelo37

发布于 2025-12-24 15:42:45

290

作者：watermelo37 CSDN优质创作者、华为云云享专家、阿里云专家博主、腾讯云“创作之星”特邀作者、火山KOL、支付宝合作作者，全平台博客昵称watermelo37。一个假装是giser的coder，做不只专注于业务逻辑的前端工程师，Java、Docker、Python、LLM均有涉猎。 --------------------------------------------------------------------- 温柔地对待温柔的人，包容的三观就是最大的温柔。 ---------------------------------------------------------------------

如何优雅地导出 VS Code 项目目录结构

在日常开发中，无论是前端 Vue 项目、后端 SpringBoot 工程，还是基于 Docker 的微服务架构，我们经常需要“导出项目目录结构”。具体有哪些常见场景，又要如何操作呢？

一、哪些场景需要导出 VS Code 目录结构？

仅我个人，就遇到过以下几类典型的场景：

1、代码评审（Code Review）或分享架构设计

当你想让其他开发者快速理解一个项目的模块拆分、业务边界、基础设施层次时，整棵项目树非常直观。一张清晰的目录结构比千言万语更有说服力。

比如 Vue 前端的 /components、/views、/composables组织方式；SpringBoot 的 /controller、/service、/domain 分层方式；Docker 多服务如何在 /deploy、/docker 中安排等等。都需要结合具体的项目目录来进行分享。

2、技术博客或者项目文档

仅我个人，经常在博文内容中分享具体的项目结构（或者局部结构），引导读者理解代码结构，来帮助读者快速理解场景、问题或者解决方案。

项目文档中也是一样，项目目录的作用与技术博文内容相似。

3、做LLM结构化输入

一些复杂的项目需求，经常需要给大语言模型输入项目结构作为参考，否则大模型哪怕给出正确的解决方案，也经常无法满足项目的实际需求。

这些场景都需要方便地导出 VS Code 的文件/目录结构。那么，具体怎么做呢？来看下面的几种方案。

二、实际可用的目录导出方法

以下所有方法我都实践过，并附上优缺点，让你能快速选到最适合的一种。

1、VS Code 插件：file-tree-generator / projecct-tree

这是 VS Code 生态中常用的方案，可以在编辑器中直接生成树形结构。

使用方式：

①在 VS Code 拓展中搜索 file-tree-generator，下载该拓展。

②右键要生成的目录，点击 Generate to Tree 即可生成对应的项目结构了：

这种方法简单易用，图形化操作，树结构清晰，能识别文件类型，但是输入目录过大时可能稍慢，不适合做自动化（CI、脚本）。

此外还有一些类似的拓展，比如 projecct-tree，这个拓展支持生成 Markdown 格式的项目目录，在某些场景使用起来更加方便。

2、使用树形命令 tree

这是最经典、最常用、最灵活的方法。要先安装：

macOS: brew install tree Ubuntu: sudo apt install tree Windows: 原生不支持，需要使用 Git Bash 的内置 tree

然后就可以使用命令：

tree -I "node_modules|dist|.git" -L 3 > tree.txt

这里的 -I：排除目录，-L：深度限制，其他的参数可以自行了解。

这个方法最灵活、最快，支持脚本，可大量自定义格式、过滤规则，但是需要终端操作并且默认输出格式比较丑。

3、使用 Node.js 自写脚本导出目录结构

这个方法适合自动生成目录树、做项目分析、自动文档化。但是需要配置node环境。

给个简单的示例脚本吧，将下面的代码保存为 tree.js 文件。

const fs = require('fs');
const path = require('path');

function generateTree(dir, prefix = '') {
  const files = fs.readdirSync(dir);
  let result = '';

  files.forEach((file, idx) => {
    const isLast = idx === files.length - 1;
    const fullPath = path.join(dir, file);
    const stats = fs.statSync(fullPath);

    result += `${prefix}${isLast ? '└── ' : '├── '}${file}\n`;

    if (stats.isDirectory()) {
      result += generateTree(fullPath, `${prefix}${isLast ? '    ' : '│   '}`);
    }
  });

  return result;
}

console.log(generateTree(process.argv[2] || '.'));

然后在存放 tree.js 的文件夹中打开终端，运行下列命令就可以将当前文件夹的目录生成并导出到 tree.txt 文件中：