Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Inline Tag Context Hider - VSCNew to Visual Studio Code? Get it now.
Inline Tag Context Hider - VSC

Inline Tag Context Hider - VSC

ilverism

|
3 installs
| (0) | Free
Define foldable inline content areas with Regex to hide extraneous info when viewing a file.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

About ITCH-VSC (Inline Tag Context Hider for VS Code)

ITCH-VSC is a VS Code extension used to collapse user-defined inline tags so that only the inner content is visible while viewing a file. When the content is being edited or selected, the collapsed 'context' (e.g., inner and outer HTML tags) will automatically expand.

The original purpose of this extension was to support my web-based visual novel engine, and the ability to have inline-styled content while retaining readability was important.

Table of Contents

  • About
  • Features
  • Installation
  • Configuration
  • Usage
  • Commands
  • Examples
  • Credits

Features

  • Easily configurable to support different tags
  • Built-in helper function to support HTML tags
  • Modifiable styling for folded tags (e.g., text color, font weight, content marker, etc.)
  • Exclude commented content from being folded (❗ Toggleable, ON by default)
  • Support multi-line folds (❗ Toggleable, OFF by default)

Installation

  • Download the VS Code Extension 🔗here
  • Run the Config Generation command:
    • Open the VS Code Command Palette
      • Windows/Linux: Ctrl + Shift + P or F1
      • macOS: Shift + Command + P or F1
    • Run the following command in the Command Palette: >ITCH-VSC: Create Fold Config
  • Verify that .itch-vsc/foldconfig.mjs and .itch-vsc/foldexamples.html have been created in your project directory
  • Verify that the examples in the foldexamples.html file collapse properly (check Examples to compare)
  • Follow the steps in the Configuration section below

Configuration

  • Use the generated foldconfig.mjs file for the configuration
  • Create basic HTML tag Fold instances with the createHTMLFold(...) helper function
  • Create custom Fold instances with calls to new Fold(...)
  • Fold instances are stored inside a static list, so there is no need to do any additional work with the created instances

Usage

  • Content matching your fold configurations will collapse automatically while the extension is enabled
  • Click or select a collapsed item to expand it
  • Toggle certain functionality using the commands below

Commands

  • >ITCH-VSC: Create Fold Config - Generate the config and example files
  • >ITCH-VSC: Toggle - Toggle the extension on/off - Ctrl + Alt + H
  • >ITCH-VSC: Toggle Multiline - Toggle multiline functionality on/off
  • >ITCH-VSC: Toggle Comment Folds - Toggle folding of commented content on/off

Examples

  • Standard Examples (From foldexamples.html):
image
  • Alternate Example (Standard View):
image
  • Alternate Example (Editing View - cursor inside or selection overlapping):
image

Credits

  • Extension by ilverism.
  • Code comment detection (modified, commentconfig.ts) via https://stackoverflow.com/a/71538680 (CC BY-SA 4.0)
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft