阿毛
It's me !
想你所想
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,里面的文件目录结构如下图所示:

https://file.blog.humh.cn/2020/06/d2b5ca33bd970f64a6301fa75ae2eb22-26.png

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

https://file.blog.humh.cn/2020/06/d2b5ca33bd970f64a6301fa75ae2eb22-27.png

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

https://file.blog.humh.cn/2020/06/d2b5ca33bd970f64a6301fa75ae2eb22-28.png

第一行出现的“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

发表评论

textsms
account_circle
email

想你所想

markdown之项目结构目录自动生成
一、需求 想要在项目的readme中增加项目结构说明,如下所示显示效果: ├── _config.yml ├── _data | └── members.yml ├── _drafts | ├── begin-with-the-crazy-ideas.md | └…
扫描二维码继续阅读
2020-06-14