markdown之项目结构目录自动生成

一、需求

想要在项目的readme中增加项目结构说明，如下所示显示效果：

├── _config.yml
├── _data
|   └── members.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.md
|   └── on-simplicity-in-technology.md
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
.......

这样，在对于项目整体没有大概认识的时候，这样的说明一目了然，可以快速认识项目的结构。但是以往我们的项目比较庞大，手动去通过markdown的语法编写这样的目录结构，会非常耗时，麻烦且容易出错。

因为我们在大多数情况下，都是在已经编写完项目部分代码，已有组织结构的情况下，再去写readme这样的结构说明，所以如果可以根据代码直接自动生成，将是一个非常高效便捷的操作。

二、解决方案

mddir是个能帮助我们快速生成markdown语法形式的文件目录结构的工具，详细说明请参考官方文档 https://www.npmjs.com/package/mddir

1、安装mddir工具

要安装mddir工具，必须先安装npm包管理工具。我的npm包管理工具是在安装node时自动安装的，node的下载安装地址如下：https://nodejs.org/zh-cn/download/

在命令行中输入并执行“npm install mddir -g”便可完成安装

2、使用mddir工具

假设现在有一个文件夹wisdomclass，里面的文件目录结构如下图所示：

要使用mddir工具，我们首先利用命令行进入wisdomclass文件夹，然后输入并执行“mddir”命令

最终在wisdomclass文件夹内会生成一个directoryList.md文件，mddir工具默认会忽略node_modules和.git文件夹。而directoryList.md文件内容如下图所示：

第一行出现的“undefined”用父文件夹名，即wisdomclass代替即可。注意，上图内容还是纯文本内容，markdown解析器解析渲染之后并不会正确显示，而是需要像markdown中的代码块一样用两个三重反引号(“`)包围起来，最终结果如下所示：

|-- wisdomclass
    |-- app.js
    |-- package-lock.json
    |-- package.json
    |-- bin
    |   |-- www
    |-- public
    |   |-- images
    |   |-- javascripts
    |   |-- stylesheets
    |       |-- style.css
    |-- routes
    |   |-- index.js
    |   |-- users.js
    |-- views
        |-- error.pug
        |-- index.pug
        |-- layout.pug