推荐一款全平台目录结构分析神器 folder-explorer

对于一个比较复杂的项目来说，我们经常需要在项目文档中对其结构和重要的文件进行介绍。而要形像生动的介绍清楚项目中所有内容，无疑是用一张漂亮的目录结构图。

通常一个目录结构图的制作需要以下几个步骤：

扫描目录
编辑注释
隐藏希望忽略的文件
生成美观的结构图

今天我们就给大家介绍一款可以自动扫描目录、分析文件结构和生成统计信息的利器 Folder-Explorer。 Folder-Explorer 不仅能自动分析目录和文件，还能给任意文件添加备注和导出多种格式的树形目录结构图，大大方便了项目技术文档的编写。

项目地址：https://github.com/d2-projects/folder-explorer

Folder-Explorer 功能介绍

支持扫描指定的目录（支持拖拽）以及再次扫描当前结果中的指定目录
展示文件结构的树形统计，
支持给文件添加注释
支持隐藏单个文件或者文件夹内容
支持文件类型统计
支持文件体积分布统计
支持导出文字构成的树形结构图，支持注释和自动对齐，支持自定义内容格式
支持导出 JSON 文件和 XML 文件供其他软件或者程序使用
支持导出 Xmind 结构图，支持自定义节点、Label 和注释的内容格式化
支持自定义导出文件的名称预设
支持注释信息记忆功能
支持个性化设置的备份和导入
更多其它丰富的设置选项

Folder-Explorer 常见使用场景

项目文档书写，附上文件结构和注释可以更清晰地让别人上手项目
展示课程目录，如果你是讲师，可以一口气将你的课程所有章节生成树形结构展示
统计某个资源文件夹中的文件大小分布，例如分析你的照片文件夹，或者一目了然磁盘里每部电影占了多大空间

安装 Folder-Explorer

Folder-Explorer 的安装非常简单，主流平台 (macOS、Windows、Linux) 都支持了，开箱即用。你只需到项目官方地址的 Releases 页面下载即可。

Folder-Explorer 详细功能介绍

以下所有演示，都将基于下述的目录结构进行。

├─.DS_Store 
├─.browserslistrc 
├─.gitignore 
├─README.md 
├─babel.config.js 
├─package.json 
├─postcss.config.js 
├─public 
│ ├─favicon.ico 
│ └─index.html 
├─src 
│ ├─App.vue 
│ ├─assets 
│ │ └─sys 
│ │   └─logo 
│ │     └─w200.png 
│ ├─components 
│ │ └─HelloWorld.vue 
│ ├─layout 
│ │ └─headerAside 
│ │   ├─components 
│ │   │ ├─aside 
│ │   │ │ ├─index.vue 
│ │   │ │ └─style.scss 
│ │   │ └─header 
│ │   │   ├─index.vue 
│ │   │   └─style.scss 
│ │   └─index.vue 
│ └─main.js 
└─yarn.lock

Folder-Explorer 编辑器中的日常操作演示

展开和折叠节点

移除节点

添加注释后的导出结果：

├─README.md --------------- // 介绍
├─babel.config.js 
├─package.json 
├─postcss.config.js 
├─public ------------------ // 公共资源
│ ├─favicon.ico 
│ └─index.html 
├─src 
│ ├─App.vue --------------- // 根组件
│ ├─assets 
│ │ └─sys 
│ │   └─logo 
│ │     └─w200.png 
│ ├─components 
│ │ └─HelloWorld.vue 
│ ├─layout 
│ │ └─headerAside 
│ │   ├─components 
│ │   │ ├─aside 
│ │   │ │ ├─index.vue 
│ │   │ │ └─style.scss 
│ │   │ └─header 
│ │   │   ├─index.vue 
│ │   │   └─style.scss 
│ │   └─index.vue 
│ └─main.js 
└─yarn.lock