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

Posted by Mike on 2020-05-24

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

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

  1. 扫描目录

  2. 编辑注释

  3. 隐藏希望忽略的文件

  4. 生成美观的结构图

今天我们就给大家介绍一款可以自动扫描目录、分析文件结构和生成统计信息的利器 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 详细功能介绍

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
├─.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 编辑器中的日常操作演示

  1. 展开和折叠节点

  1. 移除节点

  1. 给文件或者目录添加注释

添加注释后的导出结果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
├─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
  1. 从上面的导出结果我们可以看到,并不会导出被折叠和隐藏的文件或目录,并且会根据折叠之后的状态重新计算树形结构。
  1. 备注有记忆功能,例如扫描 /a 目录后添加了注释,之后扫描了 /b 目录,当再次扫描 /a 目录后第一次添加的注释会自动还原。
  1. 直接在 Folder-Explorer 中打开文件

  1. 直接在 Folder-Explorer 中打开目录

  1. 扫描子文件夹

在 Folder-Explorer 中进行统计

  1. 文件类型统计

  1. 文件大小统计

将目录结果进行导出

目前支持以下导出方式:

  1. 文本

  1. JSON

  1. Xmind

  1. XML

  1. HTML

更多个性化设置

  1. 自定义扫描

支持自定义扫描忽略的文件夹和文件,并可以指定忽略的文件类型。

为方便快速设置,选项会自动根据当前的扫描结果改变。

  1. 自定义扫描深度

  1. 只扫描文件夹

  1. 忽略隐藏文件

支持设置忽略 . 开头的文件,因为这些文件在 macOS 和 Linux 上是隐藏的

  1. 预设文件名

几乎所有的导出都支持自定义文件名,并支持多种占位符,请注意输入框右上角的提示:

点击提示之后会弹出这个位置所有可用的占位符,点击占位符可以快速复制到剪贴板:

占位符示例:

注:在一些其它的设置位置也支持占位符,例如:设置备注的格式化,脑图的节点内容等。

至此,这款好用的项目结构分析工具就介绍完了。如果你也有些需求,就赶紧的用起来吧!