在线目录树生成工具

VS Code 里选中多个文件右键复制相对路径；命令行 find . -type f 或 Windows dir /s /b；Git 项目直接 git ls-files。

webkitdirectory 目前只有 Chromium 系浏览器支持，Firefox 和 Safari 用不了，改用粘贴路径。

只要有更深的路径经过它就按目录处理，比如同时有 a 和 a/b.js，a 会画成目录。

粘贴路径的方式看不到空目录。想显式包含，加一行以斜杠结尾的路径如 logs/。

不会。路径拆解和绘制都在你的浏览器里。

📖 工具说明

把一串文件路径变成 tree 命令那样的目录树，贴进 README、Issue、聊天窗口都清楚。

读取的文件夹只在浏览器本地解析，路径不上传。

输入：

src/components/Header.js
src/components/Footer.js
src/utils/math.js
package.json

输出：

.
├── src/
│   ├── components/
│   │   ├── Header.js
│   │   └── Footer.js
│   └── utils/
│       └── math.js
└── package.json

Q：怎么快速拿到文件路径列表？ A：VS Code 里选中多个文件右键"复制相对路径"；命令行 find . -type f（去掉前面的 ./）或 Windows dir /s /b；Git 项目直接 git ls-files。

Q：读取本地文件夹为什么灰着？ A：webkitdirectory 目前只有 Chromium 系浏览器（Chrome、Edge、Opera）支持，Firefox 和 Safari 用不了，改用粘贴路径。

Q：某个名字既当文件又当目录？ A：只要有更深的路径经过它，就按目录处理。比如同时有 a 和 a/b.js，a 会画成目录。

Q：空目录能显示吗？ A：粘贴路径的方式看不到空目录（没有文件就没有路径）。想显式包含空目录，加一行以 / 结尾的路径，如 logs/。

Q：数据会上传吗？ A：不会。路径拆解和绘制都在你的浏览器里。