Skip to content

A Visual Studio Code extension for navigating, visualizing, and managing code regions in your files.

License

Notifications You must be signed in to change notification settings

alythobani/vscode-region-helper

Repository files navigation

Region Helper

VSCode Marketplace

A Visual Studio Code extension for navigating, visualizing, and managing code regions.

⚡️ Features

  • 📁 Regions View – Interactive tree for navigating regions.
  • 🏛 Full Outline View – Unified interactive tree for regions and language symbols.
  • ⚠️ Diagnostics – Detects unmatched region boundaries.
  • 🐇 Quick Navigation – Jump, search, and select regions with commands.

Region Helper Demo

📖 Table of Contents

  1. ⚡️ Features
  2. 📖 Table of Contents
  3. 🔬 Detailed Features
    1. 📂 Regions View
    2. 🏛 Full Outline View
    3. ⚠️ Region Diagnostics
    4. 🔍 Go to Region...
    5. 🐇 Go to Region Boundary
    6. ⏭ Go to Next / Previous Region
    7. 🎯 Select Current Region
  4. ⚙️ Settings
    1. 🙈 Show/Hide Views
    2. 🔄 Toggling Auto-Highlighting in Views
    3. 🔧 Custom Region Patterns
  5. 📡 Extension API
  6. 🚀 Installation
  7. 🚧 Known Limitations
  8. ❤️ Contributing & Feedback

🔬 Detailed Features

📂 Regions View

  • Displays a structured tree view of all regions in the current file.
  • Automatically reveals and highlights the cursor’s active region (this can be toggled on/off with commands/settings).
  • Click a region to instantly navigate to it.

Regions View Demo

🏛 Full Outline View

  • Combines all regions and language symbols (classes, methods, variables, etc) into a unified tree view for the current file.
  • Just like the Regions View, the cursor's active region/symbol is automatically revealed and highlighted, and this behavior can be toggled on/off.
  • Click any item to instantly navigate to it.

Full Outline View Demo

⚠️ Region Diagnostics

  • Detects unmatched region boundaries and adds warnings in both the editor (blue squiggles) and the Problems panel, helping you catch incomplete or misplaced regions quickly.

Region Diagnostics Demo

🔍 Go to Region...

  • Like VSCode’s built-in "Go to Symbol...", but for regions:
    • Opens a fuzzy-searchable dropdown to jump to any region in the current file.
  • 📌 Default Keybinding:
    • Windows/Linux: Ctrl + Shift + R
    • Mac: Cmd + Shift + R

Go to Region Demo

🐇 Go to Region Boundary

  • Like VSCode’s built-in "Go to Bracket", but for regions:
    • Jumps between matching start and end region boundaries.
    • Jumps to the next region if the cursor is not already inside a region.
  • 📌 Default Keybinding: Alt + M

Go to Region Boundary Demo

⏭ Go to Next / Previous Region

  • Jumps to the next or previous region in the file.
  • 📌 Default Keybindings:
    • Next Region: Ctrl + Alt + N
    • Previous Region: Ctrl + Alt + P

Go to Next / Previous Region Demo

🎯 Select Current Region

  • Selects the entire active region containing the cursor.
  • 📌 Default Keybinding: Alt + Shift + M

Select Current Region Demo

⚙️ Settings

🙈 Show/Hide Views

To quickly show or hide the Regions or Full Outline views, you can use the following commands and associated settings:

  • Show/Hide Region View
    • Commands: Show Regions View / Hide Regions View
    • Setting: regionHelper.shouldShowRegionsView
  • Show/Hide Full Outline View
    • Commands: Show Full Outline View / Hide Full Outline View
    • Setting: regionHelper.shouldShowFullOutlineView

🔄 Toggling Auto-Highlighting in Views

  • Sometimes you might want to keep the Regions View or Full Outline View collapsed, but the auto-highlighting of the active region/item will annoyingly re-open the view.
  • To avoid this, you can use the following commands/settings to toggle this auto-revealing / auto-highlighting behavior:
    • Regions View:
      • Commands: Regions View: Stop Auto-Highlighting Active Region / Regions View: Start Auto-Highlighting Active Region
      • Setting: regionHelper.regionsView.shouldAutoHighlightActiveRegion
    • Full Outline View:
      • Commands: Full Outline View: Stop Auto-Highlighting Active Item / Full Outline View: Start Auto-Highlighting Active Item
      • Setting: regionHelper.fullOutlineView.shouldAutoHighlightActiveItem
    • Each view also has a title bar action to toggle this setting:

Toggle Full Outline Auto-Highlighting Title Action

🔧 Custom Region Patterns

  • Supports nearly 50 languages out of the box, including:
    • C, C++, C#, Java, Python, JavaScript, JSX, TypeScript, TSX, PHP, Ruby, Swift, Go, Rust, HTML, XML, Markdown, JSON/JSONC, YAML, SQL, and more.
  • Define your own custom region patterns, or adjust the existing default patterns, to customize how regions are parsed.
    • Setting: regionHelper.regionBoundaryPatternByLanguageId

📡 Extension API

Region Helper provides an API for accessing code regions and full outline symbols programmatically. You can use it to build region-aware tools for VSCode without having to write your own file-parsing logic.

See the full API documentation for details and examples.

🚀 Installation

  1. Install Region Helper from the VSCode Marketplace.
  2. ???
  3. Profit!

(Really, things should work out of the box. Let me know if they don't!)

🚧 Known Limitations

  • 🔍 Go to Region... only supports camelCase matching (not full fuzzy search) due to a VSCode API limitation.
  • The 📁 Regions and 🏛 Full Outline tree views always highlight the cursor's last active item, even when outside any region/symbol (another VSCode API limitation).

❤️ Contributing & Feedback

I may have limited availability, but bug reports, suggestions, and contributions are always welcome! Feel free to:


Hope you enjoy using Region Helper! Have a great day, and try to make someone else's day great too. 😊

About

A Visual Studio Code extension for navigating, visualizing, and managing code regions in your files.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published