Inline Fold

VS Code Inline Fold extension mimics VS Code's folding experience for inline code. This is especially useful when working with frameworks like Tailwind CSS which use lots of utility classes that often disfigure code visual structure. You can expand the folds by clicking on them. You can also configure the extension to target specific attributes in your markup. The characters used as a mask can be configured in the settings and you can update the regex expression to match any code pattern you want. The extension also enables folding of attribute values within HTML/JSX tags. It makes your code tidy and easier to navigate.

Examples

Note: Some of the following examples uses unescaped regex, use VS Code Settings UI for auto escaping.

React Component className value

These settings can help you fold your React component's className attribute values with template strings.

Regex to Match: (className)=(({(`|))|(['"`]))(.*?)(\2|(\4)})
Regex Flags: g
Regex Group: 6

Fold class/className value after set number of characters. #60

Sometimes you have only a couple of short classnames which you don't necessarily want to fold, so you could modify the regex to only fold a list of classes if it's longer than 30 characters.

Note: This doesn't work with template strings.

Regex to Match: (class|className)=[`'{"]([^`'"}]{30,})[`'"}]
Regex Flags: g
Regex Group: 2

SVG

Embeded SVG also tend to have alot of code, that you just dont wanna focus on. So with this settings below you can fold the ugly part.

Note: Minfing SVG maybe required for better experience. Beside we looking forward that this extension will support multiple Regex soon.

Regex to Match: <svg(\s*.*?\s*)<\/svg>
Regex Flags: gs
Regex Group: 2

Markdown links

The extension is very useful for collapsing markdown link URLs #70:

Regex: \[.*\]\((.*)\)
Regex Flags: g
Regex Group: 1
Supported languages: markdown

Available Settings

• inlineFold.regex regex to match the code line
• inlineFold.regexFlags regex flags
• inlineFold.regexGroup regex group that match the code that should be folded
• inlineFold.unfoldedOpacity opacity of the unfolded code when it's clicked or is selected
• inlineFold.maskChar text/character to mask the code when it is folded
• inlineFold.maskColor color of the mask character(s)
• inlineFold.after an optional text/character that will be appended to the end of folded code
• inlineFold.supportedLanguages a list of targeted language Ids
• inlineFold.unfoldOnLineSelect unfold the line when any part of the line is selected
• inlineFold.autoFold the default state of inline folding when opening a file

Running the extension

You can install the extension in the marketplace here. If you encounter any issue or would like to contribute, visit the GitHub page.

Notes

• Use settings UI to configure the extension (better for regex escaping).
• If the extension doesn't work, then check for your language id, you can add it from the settings under inlineFold.supportedLanguages using the specific language Id.
• You can set a keyboard shortcut to toggle the folding on and off. Search for "Inline Fold" in the commands panel, then click the gear icon and set the desired keybinding.

Current default language Ids (see here for more):

• astro
• vue
• html
• svelte
• vue-html
• php
• blade
• erb
• twig
• nunjucks
• django-html
• jinja-html
• javascript
• typescript
• javascriptreact
• typescriptreact

Known Issues

If you encounter any problems, you can open an issue at the extension's GitHub repository

Changelog

See the project's changelog here.

Contributors

Screenshot by Cody