Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>dirViz - 树图New to Visual Studio Code? Get it now.
dirViz - 树图

dirViz - 树图

陈随易

chensuiyi.me
|
27 installs
| (1) | Free
dirViz(树图) - Directory Structure Visualization(目录结构可视化)
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

dirViz (树图) - Directory Structure Visualization (目录结构可视化)

📋 Features (功能特性)

  • 🎯 Right-click Generation: Right-click any folder in the explorer to generate directory tree
  • 📝 Text Format: Generate beautiful text format directory trees (.txt files)
  • 📋 Clipboard Support: Copy directory tree directly to clipboard without creating files
  • ⚙️ Highly Configurable: Rich configuration options to meet different usage needs
  • 🚀 High Performance: Smart exclusion rules to avoid performance issues with large directories

  • 🎯 右键生成:在资源管理器中右键点击文件夹,即可生成目录树图
  • 📝 文本格式:生成美观的文本格式目录树 (.txt 文件)
  • 📋 剪贴板支持:直接将目录树复制到剪贴板,无需生成文件
  • ⚙️ 高度配置:丰富的配置选项,满足不同使用需求
  • 🚀 高性能:智能排除规则,避免大型目录性能问题

🚀 Quick Start (快速开始)

Installation (安装方式)

  1. Search for dirViz or Directory Tree Visualizer in VS Code Extensions Marketplace
  2. Click Install to start using

  1. 在 VS Code 扩展商店搜索 dirViz 或 树图
  2. 点击安装即可使用

Basic Usage (基本使用)

  1. Right-click Generation: Right-click any folder in the file explorer
  2. Select Action: Choose an action from the “Dir Viz” submenu
    • Generate Directory Tree File - Generate directory tree file (.txt format)
    • Copy Directory Tree - Copy directory tree to clipboard
  3. Auto Processing: Generated files are automatically saved to the target directory and opened

  1. 右键生成:在文件管理器中右键点击任意文件夹
  2. 选择操作:在弹出的 “Dir Viz” 子菜单中选择操作
    • Generate Directory Tree - 生成目录树文件 (.txt 格式)
    • Copy Directory Tree - 复制目录树到剪贴板
  3. 自动处理:生成的文件会自动保存到目标目录并打开

Output Example (输出示例)

Text Format Example (文本格式示例)

my-project/
├── src/
│   ├── components/
│   │   ├── Button.vue (2.1 KB)
│   │   └── Modal.vue (1.8 KB)
│   ├── utils/
│   │   └── helpers.js (1.2 KB)
│   └── index.js (0.8 KB)
├── public/
│   └── favicon.ico (4.2 KB)
├── package.json (1.5 KB)
├── README.md (2.3 KB)
└── dist/
    ├── assets/
    └── index.html (0.5 KB)

Statistics:
Directories: 5
Files: 8
Total Size: 14.4 KB

⚙️ Configuration Options (配置选项)

Search for dirViz in VS Code settings to find all configuration options:

在 VS Code 设置中搜索 dirViz 可找到所有配置项:

Configuration(配置项) Type(类型) Default Value(默认值) Description(说明)
dirViz.excludePatterns array [] List of directory and file patterns to exclude
排除的目录和文件模式列表
dirViz.maxDepth number 10 Maximum depth for directory scanning
目录扫描的最大深度
dirViz.showHidden boolean false Whether to show hidden files
是否显示隐藏文件
dirViz.fileNameTemplate string {name}_tree_{timestamp} Output file naming template
输出文件命名模板
dirViz.showSize boolean false Whether to show file sizes
是否显示文件大小
dirViz.maxNameLength number 50 Maximum length for file name display
文件名显示的最大长度
dirViz.showStats boolean false Whether to show statistics information
是否显示统计信息
dirViz.showHeader boolean false Whether to show header and generation time
是否显示标题和生成时间

Configuration Example (配置示例)

{
    "dirViz.excludePatterns": ["node_modules", "*.log", ".git", "dist", "build"],
    "dirViz.maxDepth": 5,
    "dirViz.showHidden": false,
    "dirViz.showSize": true,
    "dirViz.showStats": true,
    "dirViz.showHeader": true,
    "dirViz.maxNameLength": 30
}

🛠️ Advanced Features (高级功能)

Custom Exclusion Rules (自定义排除规则)

Supports various wildcard patterns:

支持多种通配符模式:

  • *.log - Exclude all .log files
  • test_* - Exclude files starting with test_
  • node_modules - Exclude entire directory
  • **/*.tmp - Recursively exclude all .tmp files
  • .git - Exclude version control directory

  • *.log - 排除所有。log 文件
  • test_* - 排除以 test_ 开头的文件
  • node_modules - 排除整个目录
  • **/*.tmp - 递归排除所有。tmp 文件
  • .git - 排除版本控制目录

File Naming Template (文件命名模板)

Supports the following variables:

  • {name} - Directory name
  • {timestamp} - Current timestamp (format: YYYYMMDDHHMMSS)

Examples:

  • {name}_tree_{timestamp} → my-project_tree_20250603120000.txt
  • {name}_structure → my-project_structure.txt
  • tree_{name} → tree_my-project.txt

支持以下变量:

  • {name} - 目录名称
  • {timestamp} - 当前时间戳 (格式:YYYYMMDDHHMMSS)

示例:

  • {name}_tree_{timestamp} → my-project_tree_20250603120000.txt
  • {name}_结构图 → my-project_结构图.txt
  • tree_{name} → tree_my-project.txt

Performance Optimization (性能优化)

  • Depth Limitation: Use maxDepth configuration to prevent deep directory structures from affecting performance
  • Smart Exclusion: Preset exclusion rules for common large directories (like node_modules)
  • File Name Limitation: Use maxNameLength to avoid long file names affecting display

  • 深度限制:通过 maxDepth 配置防止过深的目录结构影响性能
  • 智能排除:预设常见的大型目录 (如 node_modules) 排除规则
  • 文件名限制:通过 maxNameLength 避免过长的文件名影响显示效果

🔥 Extension Recommendation (扩展推荐)

outlinePlus - Function Map Extension

A powerful code navigation extension for quickly locating and jumping to function definitions.

Main Features:

  • 🗺️ Visual function map
  • ⚡ Quick function jumping
  • 🔍 Smart code search
  • 📊 Code structure analysis

📖 Learn More


fnMap - 函数地图扩展

一个强大的代码导航扩展,快速定位和跳转到函数定义。

主要功能:

  • 🗺️ 可视化函数地图
  • ⚡ 快速函数跳转
  • 🔍 智能代码搜索
  • 📊 代码结构分析

📖 了解更多

📱 Author (作者)

yidash007

Focusing on creating exquisite tools.

  • X(twitter) yidash007
  • email:yicode@qq.com

公众号

加微信 chensuiyime 加入编程技术交流群。

祝你今天、明天、后天,每天都能享受到编码的乐趣!

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft