When writing a blog, you often need to show the directory structure of the project. My computer is windows, and the tree command is not very effective. If you can use Node, you can use Node! So I found several cross platform ones. namely tree-cli and tree-node-cli These two are one author. Among them, tree node cli is more suitable for Linux users. It is case sensitive and has API, but it can't generate files directly at present. In addition to this type, there are also generated md, can generate web pages and so on, you can search by yourself.

Install tree node cli

npm install -g tree-node-cli

use

Execute the following command to generate in the terminal, copy and save.

treee -L 3 -I "node_modules|.idea|objects|.git" -a --dirs-first

result:

├── config

│ ├── config.js

│ ├── defaultSettings.js

│ ├── plugin.config.js

│ ├── proxy.js

│ └── themePluginConfig.js

├── mock

│ ├── notices.js

│ ├── route.js

│ └── user.js

├── public

│ ├── change

│ │ ├── asideNavImg

│ │ ├── img

│ │ └── js

│ ├── icons

│ │ ├── icon-128x128.png

│ │ ├── icon-192x192.png

│ │ └── icon-512x512.png

│ ├── favicon.png

│ └── ver.version

├── src

│ ├── assets

│ │ ├── MonitoringCenterImg

│ │ ├── Nav

│ │ ├── PlatformImg

│ │ ├── Rest

│ │ ├── Top

│ │ ├── blank.png

│ │ └── logo.svg

│ ├── components

│ │ ├── AddMember

│ │ ├── AddTags

│ │ ├── Authorized

│ │ ├── Crumbs

│ │ ├── GlobalHeader

│ │ ├── HeaderDropdown

│ │ ├── HeaderSearch

│ │ ├── Information

│ │ ├── MemberTab

│ │ ├── NoticeIcon

│ │ ├── OutSide

│ │ ├── PageLoading

│ │ ├── ParentOrg

│ │ ├── ResetPass

│ │ ├── RoleTree

│ │ ├── ServiceGovernance

│ │ ├── Ssologout

│ │ └── TreeModal

│ ├── e2e

│ │ ├── ****mocks****

│ │ ├── baseLayout.e2e.js

│ │ └── topMenu.e2e.js

│ ├── layouts

│ │ ├── BasicLayout.jsx

│ │ ├── BlankLayout.jsx

│ │ ├── index.less

│ │ └── SecurityLayout.jsx

│ ├── models

│ │ ├── AsideNavStore.js

│ │ ├── global.js

│ │ ├── Home.js

│ │ ├── LogCenter.js

│ │ ├── login.js

│ │ ├── MonitoringCenter.js

│ │ ├── Platform.js

│ │ ├── ServiceGovernance.js

│ │ └── setting.js

│ ├── pages

│ │ ├── .umi

│ │ ├── LogCenter

│ │ ├── MonitoringCenter

│ │ ├── Platform

│ │ ├── ServiceGovernance

│ │ ├── 404.jsx

│ │ ├── Authorized.jsx

│ │ └── document.ejs

│ ├── services

│ │ ├── Home.js

│ │ ├── LogCenter.js

│ │ ├── login.js

│ │ ├── MonitoringCenter.js

│ │ ├── NavStore.js

│ │ ├── Platform.js

│ │ ├── serviceGovernance.js

│ │ └── user.js

│ ├── utils

│ │ ├── authority.js

│ │ ├── authority.test.js

│ │ ├── Authorized.js

│ │ ├── cac.js

│ │ ├── date.js

│ │ ├── getEchart.js

│ │ ├── getIframeHeight.js

│ │ ├── getResUrl.js

│ │ ├── request.js

│ │ ├── tableIcon.js

│ │ ├── tree.js

│ │ ├── utils.js

│ │ ├── utils.less

│ │ └── utils.test.js

│ ├── global.jsx

│ ├── global.less

│ ├── manifest.json

│ └── service-worker.js

├── tests

│ ├── run-tests.js

│ └── setupTests.js

├── .editorconfig

├── .eslintignore

├── .eslintrc.js

├── .prettierignore

├── .prettierrc.js

├── .stylelintrc.js

├── CHANGELOG.md

├── jest-puppeteer.config.js

├── jest.config.js

├── jsconfig.json

├── package.json

└── README.md

explain

• windows users need to replace tree with tree to avoid conflicts with tree commands of the system. treee
• The level of the specified path is level 3.

  -L 3

• Ignore folders (if regular expressions match,. git will match. gitignore, so the. gitignore file is not displayed).

  -I "node_modules|.idea|objects|.git"

• Display all files (those with a "." prefix by default will not be displayed, such as ". Electron Vue").

  -a

• The directory is in the front, and the file is in the back (the default is alphabetical order, which is inconsistent with the order shown in idea).

  --dirs-first

Full options

-5. -- version output version number - A, -- all files print all files, including hidden files -- dirs first directory first, file last - D, -- dirs only directory - I, --exclude [patterns] exclude files matching patterns. Separated by | and wrapped in double quotation marks. For example, "node_modules|.git "- L, -- max depth < n > maximum display depth of directory tree - r, --reverse sort the output in reverse alphabetical order - F, -- tracking slash add '/' - h to the directory, - help output usage information

uninstall

npm uninstall -g tree-node-cli