directory-tree 更轻量、更可控,默认忽略常见噪音文件且支持精准配置排除项,生成结果可直接嵌入 Markdown 代码块,需通过“Open Folder”打开项目根目录才能正确运行。

VS Code 插件选哪个:file-tree-generator 还是 directory-tree?
直接说结论:directory-tree 更轻量、更可控,file-tree-generator 功能多但容易导出冗余内容(比如隐藏文件、node_modules 全展开)。如果你只要一份干净、可读、能直接贴进 README 或文档的结构,优先装 directory-tree。
它默认忽略 .git、node_modules、.DS_Store 等常见噪音,且支持通过配置项 "directoryTree.exclude" 手动追加排除项。而 file-tree-generator 的排除逻辑较弱,常需手动删减输出。
- 安装后无需重启 VS Code,按
Ctrl + Shift + P输入Directory Tree: Generate即可触发 - 默认写入当前项目根目录下的
README.md底部;若无该文件,会自动创建 - 生成结果用 ?/? 图标区分目录与文件,视觉上比纯 ASCII 树更易扫读
如何避免生成时把 .vscode、.gitignore 之类全列出来?
不是所有“存在”的文件都该出现在结构图里——尤其当你要发给协作方或写进技术文档时,这些配置文件反而干扰主线。关键在插件配置。
directory-tree 支持在工作区设置中添加以下 JSON 片段(打开 .vscode/settings.json 编辑):
{
"directoryTree.exclude": [
".vscode",
".git",
".gitignore",
"package-lock.json",
"yarn.lock",
"tsconfig.*.json"
]
}注意:exclude 是 glob 模式,不支持正则;路径名必须精确匹配(如 "*.lock" 不生效,得写成 "package-lock.json" 和 "yarn.lock" 两条)。
- 排除项只对当前工作区生效,不影响其他项目
- 如果某项目需要保留
.env.example,就别把它加进 exclude 列表 - 修改配置后需重新运行命令,已生成的内容不会自动刷新
生成的目录结构怎么嵌入 Markdown 文档才不乱?
直接粘贴到 README.md 里,最容易踩的坑是缩进错位导致渲染失败——尤其是用空格缩进时,VS Code 默认可能用 2 空格,而 GitHub 渲染器对缩进敏感。
安全做法是:确保整个树形结构用 4 个空格缩进(或统一用 Tab),且每行开头无多余空格。更稳妥的是把生成块包裹在代码块里:
```text src/ ├─ assets/ │ └─ logo.svg ├─ components/ │ └─ Button.vue └─ main.ts ```
这样既能保真格式,又避免被 Markdown 解析器误处理。
- 别用
```markdown包裹——树形符号(├─、└─)不是合法 Markdown 语法,会出错 - 如果要用 GitHub 原生 TOC 跳转,得手动把每个文件/目录转成链接,插件不自动做这事
- 导出后建议用预览模式(
Ctrl + Shift + V)检查是否对齐,不对就调一下编辑器的“indentation”设置
为什么有时候生成结果为空或只有一行?
常见原因就两个:directory-tree 没识别到当前是项目根目录,或者工作区打开方式不对。
它依赖 VS Code 的“打开文件夹”行为判断根路径。如果你只是用“File → Open File…” 打开单个 package.json,插件会认为当前没有项目结构,输出就只有那个文件本身。
- 务必通过
File → Open Folder…打开整个项目根目录(含package.json或tsconfig.json的那一层) - 确认左下角状态栏显示的是文件夹名,而不是“No folder opened”
- 如果项目用了多根工作区(workspace),插件默认只处理第一个根,其余需手动切换活动文件夹再运行
极简风格的核心不在图标多好看,而在信息密度和意图清晰——删掉什么,比加上什么更难决定。每次生成前,先想清楚:这份结构图到底给谁看?他们最需要一眼抓住哪几层?这才是“极简”的真正门槛。


















