vscode 生成项目目录结构 directory-tree 实用教程

1. 安装插件 directory-tree

有中文介绍，极其友好！

2. 用 vscode 打开目标项目

3. 快捷键 Ctrl + Shift + p，输入 Directory Tree 后回车

会在 README.md 文件的底部生成项目目录（若项目中没有 README.md 文件，则会自动创建 README.md 文件）

4. 打开项目目录下的 README.md 文件，滚动到底部查看即可。

登录后复制

EC-web-vue3
├─ 📁.vscode
│  └─ 📄extensions.json
├─ 📁cypress
│  ├─ 📁e2e
│  │  ├─ 📄example.cy.ts
│  │  └─ 📄tsconfig.json
│  ├─ 📁fixtures
│  │  └─ 📄example.json
│  └─ 📁support
│     ├─ 📄commands.ts
│     └─ 📄e2e.ts
├─ 📁public
│  └─ 📄favicon.ico
├─ 📁src
│  ├─ 📁assets
│  │  └─ 📄main.css
│  ├─ 📁components
│  │  └─ 📄webName.vue
│  ├─ 📁layouts
│  │  ├─ 📄default.vue
│  │  └─ 📄ECclub.vue
│  ├─ 📁pages
│  │  ├─ 📁users
│  │  │  ├─ 📄index.vue
│  │  │  └─ 📄[id].vue
│  │  ├─ 📄about.vue
│  │  ├─ 📄index.vue
│  │  └─ 📄[...404].vue
│  ├─ 📁router
│  │  └─ 📄index.ts
│  ├─ 📁stores
│  ├─ 📁views
│  │  └─ 📄test.vue
│  ├─ 📄App.vue
│  └─ 📄main.ts
├─ 📄.eslintrc.cjs
├─ 📄.gitignore
├─ 📄.prettierrc.json
├─ 📄auto-imports.d.ts
├─ 📄components.d.ts
├─ 📄cypress.config.ts
├─ 📄env.d.ts
├─ 📄index.html
├─ 📄package-lock.json
├─ 📄package.json
├─ 📄README.md
├─ 📄tsconfig.app.json
├─ 📄tsconfig.json
├─ 📄tsconfig.node.json
├─ 📄tsconfig.vitest.json
├─ 📄typed-router.d.ts
├─ 📄uno.config.ts
├─ 📄vite.config.ts
└─ 📄vitest.config.ts

• 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.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.
• 38.
• 39.
• 40.
• 41.
• 42.
• 43.
• 44.
• 45.
• 46.
• 47.
• 48.
• 49.
• 50.
• 51.
• 52.
• 53.
• 54.
• 55.

原创作者: u_15715491 转载于: https://blog.51cto.com/u_15715491/11315147