Skip to content
| Marketplace
Sign in
Visual Studio Code>Linters>Console TreeNew to Visual Studio Code? Get it now.
Console Tree

Console Tree

Klender Carrasco

|
4 installs
| (1) | Free
Tree view to find, navigate and remove console statements from your project.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Visual Stuido Code

Console Tree

TypeScript Node ESLint

Extension that provides a tree view to easily find, navigate, and remove console statements from your project.

Basic Usage of the Extension

Table of Contents

  1. Features
  2. Installation
    • From VS Code Marketplace
    • From Source
  3. Usage
  4. Configuration
  5. Supported File Types
  6. Contributing
  7. License
  8. Acknowledgments

Features

🌳 Tree View Interface - Browse all console statements organized by files
🔍 Smart Detection - Finds console.log, console.warn, console.error, console.info, and console.debug
🎯 Click to Navigate - Jump directly to any console statement in your code
🗑️ One-Click Removal - Remove individual console statements or all at once
⚡ Auto-Refresh - Tree updates automatically when you modify files
⚙️ Configurable - Customize file patterns and search patterns

Back to top ⬆️

Installation

From VS Code Marketplace

  1. Open Visual Studio Code
  2. Go to Extensions (Ctrl + Shift + X / Cmd + Shift + X)
  3. Search for "Console Tree"
  4. Click Install

From Source

git clone https://github.com/MarcosKlender/ConsoleTree.git
cd ConsoleTree
pnpm install
pnpm run compile

Then press F5 to test the extension.

Back to top ⬆️

Usage

  1. Open a project in VSCode
  2. Click on the Console Tree icon in the Activity Bar (Sidebar)
  3. The tree view will show all console statements in your project organized by files
  4. Navigate: Click on any console statement to jump to that line
  5. Remove individual: Click the trash icon next to any console statement
  6. Remove all: Click the trash icon in the tree view title bar
  7. Refresh: Click the refresh icon to manually update the tree

Back to top ⬆️

Configuration

You can customize Console Tree in your VSCode Settings:

{
  "consoleTree.includePatterns": [
    "**/*.js",
    "**/*.ts",
    "**/*.jsx",
    "**/*.tsx",
    "**/*.vue",
    "**/*.svelte"
  ],
  "consoleTree.excludePatterns": [
    "**/node_modules/**",
    "**/dist/**",
    "**/build/**",
    "**/*.min.js"
  ],
  "consoleTree.patterns": [
    "console\\.log\\s*\\(",
    "console\\.warn\\s*\\(",
    "console\\.error\\s*\\(",
    "console\\.info\\s*\\(",
    "console\\.debug\\s*\\("
  ]
}

Back to top ⬆️

Supported File Types

  • JavaScript (.js, .mjs, .cjs)
  • TypeScript (.ts)
  • React (.jsx, .tsx)
  • Vue.js (.vue)
  • Svelte (.svelte)

Back to top ⬆️

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch
  3. Commit your changes
  4. Push to the branch
  5. Open a Pull Request

Back to top ⬆️

License

This project is licensed under the MIT License - see the LICENSE file for details.

Back to top ⬆️

Acknowledgments

If you find this extension helpful and give credits, it would be greatly appreciated! Feel free to:

  • ⭐ Star this repository
  • 🐛 Report issues or suggest improvements
  • 💬 Share your experience with the extension
  • 🚀 Enjoy coding without console clutter

  • Inspired by the popular Todo Tree extension
  • Made with ❤️ for the VS Code community!

Back to top ⬆️

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