Overview Version History Q & A Rating & Review
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
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
) :
Alternate Example (Standard View) :
Alternate Example (Editing View - cursor inside or selection overlapping) :
Credits