.gitignore Integration

Overview

The .gitignore integration feature allows Draw Folder Structure to automatically exclude files and folders that are already ignored by Git. This is perfect for creating clean documentation that only shows the relevant parts of your project.

By default, this feature is disabled. You need to enable it in your VS Code settings.

Why Use .gitignore Integration?

When documenting your project structure, you typically don’t want to include:

node_modules/ - Dependencies that bloat the output
dist/ or build/ - Compiled/generated files
.env files - Environment variables
IDE-specific files - .vscode/, .idea/
OS files - .DS_Store, Thumbs.db
Temporary files - *.log, *.tmp

If you already have these patterns in your .gitignore, why duplicate them in the extension settings?

Enabling .gitignore Integration

VS Code Settings UI
settings.json

Open Settings

Press Cmd/Ctrl+, or go to File > Preferences > Settings

Search for the Setting

Type “draw folder structure gitignore” in the search bar

Enable the Checkbox

Check the box for Draw Folder Structure: Respect Gitignore

Generate Structure

The next time you generate a structure, .gitignore rules will be applied

Open settings.json

Press Cmd/Ctrl+Shift+P and type “Preferences: Open User Settings (JSON)”

Add Configuration

Add this line to your settings:

{
  "draw.folder.structure.respectGitignore": true
}

Save and Use

Save the file and generate a structure to see the difference

How It Works

When respectGitignore is enabled, the extension:

Looks for a .gitignore file in your project root
Parses all the ignore patterns defined in it
Applies those patterns during structure generation
Excludes any matching files and folders from the output

The extension uses the same ignore matching logic as Git, supporting all standard .gitignore patterns and syntax.

Example Comparison

See the difference between structures generated with and without .gitignore integration:

Sample .gitignore File

.gitignore

node_modules
dist
build
.env
.DS_Store
*.log
coverage
.vscode-test

Without .gitignore Integration

When respectGitignore is false (default):

Notice how the output includes:

All node_modules dependencies
The dist build folder
.env and .DS_Store files
coverage reports
*.log files

This creates a cluttered structure that’s hard to read and not useful for documentation.

With .gitignore Integration

When respectGitignore is true:

Much cleaner! The output only shows:

Configuration files
Source code directory
Actual application files

This is exactly what you want in documentation - a clear view of the project structure without the noise.

Use Cases

1. Repository Documentation

Creating README Project Structure

When documenting your repository in a README file, you want to show the source structure, not dependencies.Configuration:

{
  "draw.folder.structure.respectGitignore": true
}

Result: Only the committed source files appear in the structure, making your README clean and professional.

2. Architecture Documentation

Documenting Application Architecture

When explaining your application’s architecture, you want to focus on the logical structure, not build artifacts.Configuration:

{
  "draw.folder.structure.respectGitignore": true,
  "draw.folder.structure.style": "ClassicDashes"
}

Result: A clean, professional structure showing only the architectural components.

3. Onboarding Documentation

Helping New Team Members

New developers need to understand the source code structure, not the build system.Configuration:

{
  "draw.folder.structure.respectGitignore": true,
  "draw.folder.structure.exclude": ["**/tests", "**/*.test.ts"]
}

Result: A beginner-friendly structure showing the core application code without tests or build artifacts.

4. PR Descriptions

Showing Changes in Pull Requests

When creating a pull request that restructures code, show only the relevant source structure.Configuration:

{
  "draw.folder.structure.respectGitignore": true
}

Result: Reviewers see the actual code organization without being distracted by dependencies or build files.

Combining with Exclude Patterns

You can use both .gitignore integration and custom exclude patterns together for maximum control:

settings.json

{
  "draw.folder.structure.respectGitignore": true,
  "draw.folder.structure.exclude": [
    "**/tests",
    "**/*.test.ts",
    "**/*.spec.ts",
    "**/mocks"
  ]
}

This configuration:

Excludes everything from .gitignore (dependencies, build files, etc.)
Additionally excludes test files and mock data
Results in a super clean structure showing only production code

Use .gitignore integration for general exclusions (dependencies, builds) and custom exclude patterns for project-specific filtering (tests, examples, etc.).

Common .gitignore Patterns

Here are common patterns that work well with the integration:

Node.js Projects
Python Projects
Java Projects
Generic Projects

.gitignore

# Dependencies
node_modules/
package-lock.json
yarn.lock

# Build output
dist/
build/
out/
.next/

# Environment
.env
.env.local
.env.*.local

# Testing
coverage/
.nyc_output/

# Logs
*.log
npm-debug.log*

# OS files
.DS_Store
Thumbs.db

.gitignore

# Virtual environments
venv/
env/
.venv/

# Compiled Python
__pycache__/
*.py[cod]
*$py.class
*.so

# Distribution
dist/
build/
*.egg-info/

# Testing
.pytest_cache/
.coverage
htmlcov/

# IDE
.vscode/
.idea/
*.swp

.gitignore

# Compiled class files
*.class

# Package files
*.jar
*.war
*.ear

# Build directories
target/
build/
bin/

# IDE files
.idea/
*.iml
.eclipse/

# Logs
*.log

.gitignore

# Build output
dist/
build/
out/

# Dependencies
vendor/
packages/

# Environment
.env
.env.*

# Logs
*.log
logs/

# OS files
.DS_Store
Thumbs.db
desktop.ini

# IDE
.vscode/
.idea/
*.swp
*~

Best Practices

Keep .gitignore Updated

Regularly update your .gitignore to include new build artifacts or dependencies. The extension will automatically pick up changes.

Use for Documentation

Enable this feature specifically when generating structures for documentation. Disable it if you need to see all files for debugging.

Test Both Modes

Generate structures with and without .gitignore integration to see which gives you the view you need.

Combine with Recursion

For large projects, combine .gitignore integration with recursion control for optimal results:

{
  "draw.folder.structure.respectGitignore": true,
  "draw.folder.structure.allowRecursion": true
}

Troubleshooting

.gitignore not being respected

Possible causes:

Feature not enabled: Verify respectGitignore is set to true in settings
No .gitignore file: Make sure a .gitignore file exists in your project root
Pattern syntax: Check that your .gitignore patterns are valid
Cache issues: Try reloading VS Code window (Cmd/Ctrl+Shift+P > “Reload Window”)

Solution:

{
  "draw.folder.structure.respectGitignore": true
}

Make sure the .gitignore file is at your project root level.

Too many files still showing

Issue: Even with .gitignore enabled, you’re seeing files you want to exclude.Solution: Combine .gitignore with custom exclude patterns:

{
  "draw.folder.structure.respectGitignore": true,
  "draw.folder.structure.exclude": [
    "**/tests",
    "**/docs",
    "**/*.md"
  ]
}

Missing files I want to see

Issue: .gitignore is excluding files you want in the structure.Solution: Either:

Disable respectGitignore temporarily
Remove those patterns from .gitignore
Use separate documentation-specific patterns in the exclude setting

{
  "draw.folder.structure.respectGitignore": false,
  "draw.folder.structure.exclude": ["**/node_modules", "**/dist"]
}

Real-World Example

Let’s see a complete example from a typical VS Code extension project:

Project .gitignore

.gitignore

out
dist
node_modules
.vscode-test/
*.vsix
.DS_Store
.env

Settings Configuration

settings.json

{
  "draw.folder.structure.style": "EmojiDashes",
  "draw.folder.structure.respectGitignore": true,
  "draw.folder.structure.allowRecursion": true
}

Generated Structure

└── 📁 draw-folder-structure ├── package.json ├── tsconfig.json ├── README.md └── 📁 src ├── extension.ts ├── 📁 functions ├── generate-structure.ts ├── find-files.ts └── get-prefix.ts ├── 📁 services └── telemetry.ts ├── 📁 types └── style.ts └── 📁 assets ├── drawstructurelogo.png └── screen01.png

Perfect for documentation! No node_modules, no out folder, no build artifacts - just the source code structure.

Next Steps

Exclude Patterns

Learn about custom exclusion patterns for fine-grained control

All Settings

Explore all available configuration options

Custom Styles

Choose from 20+ visual styles for your structures

Get Started

Guides

Examples

Overview

Why Use .gitignore Integration?

Enabling .gitignore Integration

How It Works

Example Comparison

Sample .gitignore File

Without .gitignore Integration

With .gitignore Integration

Use Cases

1. Repository Documentation

2. Architecture Documentation

3. Onboarding Documentation

4. PR Descriptions

Combining with Exclude Patterns

Common .gitignore Patterns

Best Practices

Keep .gitignore Updated

Use for Documentation

Test Both Modes

Combine with Recursion

Troubleshooting

Real-World Example

Project .gitignore

Settings Configuration

Generated Structure

Next Steps

Exclude Patterns

All Settings

Custom Styles

Build docs developers (and LLMs) love

Get Started

Guides

Examples

​Overview

​Why Use .gitignore Integration?

​Enabling .gitignore Integration

​How It Works

​Example Comparison

​Sample .gitignore File

​Without .gitignore Integration

​With .gitignore Integration

​Use Cases

​1. Repository Documentation

​2. Architecture Documentation

​3. Onboarding Documentation

​4. PR Descriptions

​Combining with Exclude Patterns

​Common .gitignore Patterns

​Best Practices

Keep .gitignore Updated

Use for Documentation

Test Both Modes

Combine with Recursion

​Troubleshooting

​Real-World Example

​Project .gitignore

​Settings Configuration

​Generated Structure

​Next Steps

Exclude Patterns

All Settings

Custom Styles

Build docs developers (and LLMs) love

Overview

Why Use .gitignore Integration?

Enabling .gitignore Integration

How It Works

Example Comparison

Sample .gitignore File

Without .gitignore Integration

With .gitignore Integration

Use Cases

1. Repository Documentation

2. Architecture Documentation

3. Onboarding Documentation

4. PR Descriptions

Combining with Exclude Patterns

Common .gitignore Patterns

Best Practices

Troubleshooting

Real-World Example

Project .gitignore

Settings Configuration

Generated Structure

Next Steps