Compact HTML & JavaScript Folding in one line

Collapse HTML elements and JavaScript blocks into one line, with the ellipsis between the opening and closing delimiters.

Publisher: Prutal · Version: 0.2.1

Demo

Example summaries:

<body>…</body>
<style>…</style>

function greet(name) {…}
const options = {…};
items.map(item => {…});

These are editor decorations, not source edits. Expanding restores the original view.

Install or upgrade

Existing Prutal installations can upgrade directly. When migrating from a different publisher, uninstall the earlier local build to avoid duplicate folding providers and commands.
Download Prutal.compact-html-folding-0.2.1.vsix.
In VS Code, press Ctrl+Shift+P and run Extensions: Install from VSIX....
Select the file, then fully close and restart VS Code so the folding and color defaults load.
Open an HTML or JavaScript file, unfold existing folds, and collapse again.

If you previously selected a folding provider manually, update its value to Prutal.compact-html-folding as shown below. This publisher change creates a new extension identity.

Requires VS Code 1.100 or newer, which supports the fold-placeholder color used to hide the native trailing dots. Node.js is not needed to use the VSIX.

Command-line alternative:

code --install-extension Prutal.compact-html-folding-0.2.1.vsix --force

Changes in 0.2.1

Updates the package version for the extension icon and README changes.
Keeps the original 0.2.0 folding behavior and automatic native-dot color default.

Changes in 0.2.0

Renders … and the closing tag/delimiter together, in the correct order.
Hides VS Code's original trailing dots using a supported theme-color default.
Uses a dedicated HTML tag color: blue in dark themes, dark red in light themes, with high-contrast variants. It no longer uses the gray CodeLens color. The color can be customized below.
Supports JavaScript functions, classes, methods, blocks, objects, arrays and callbacks, including punctuation such as };, ]; and });.
Supports ordinary inline JavaScript and type="module" scripts inside HTML. JSON script blocks are excluded.
Uses Microsoft's JavaScript parser/outliner so strings, regexes, comments and template strings do not create false brace pairs.
Leaves else, catch and adjacent statements visible when they share a closing line. Those ranges use a plain … summary.

Native trailing-dot color

VS Code exposes one global color for its native folding dots. This extension contributes the following default, without writing to your settings file:

"workbench.colorCustomizations": {
  "editor.foldPlaceholderForeground": "#00000000"
}

This hides native dots in all editor languages while the extension is enabled. The replacement summaries are provided for HTML and JavaScript. Other languages retain the gutter folding arrows but do not get replacement inline summaries. The invisible native placeholder may still occupy a small amount of space.

Existing user, workspace or theme-specific color overrides can take precedence. If trailing dots remain, merge the entry above into your existing workbench.colorCustomizations object, and check any theme-specific overrides of the same color.

Disabling or uninstalling the extension removes its contributed default. Any override you added manually must be removed manually. Turning off only compactHtmlFolding.enabled restores normal folding ranges but does not remove the contributed color default.

This approach does not modify VS Code's installation or inject custom CSS.

Folding providers

The extension contributes default folding providers for HTML and JavaScript. If another provider or indentation folding is selected, merge these entries into your existing settings:

"[html]": {
  "editor.foldingStrategy": "auto",
  "editor.defaultFoldingRangeProvider": "Prutal.compact-html-folding"
},
"[javascript]": {
  "editor.foldingStrategy": "auto",
  "editor.defaultFoldingRangeProvider": "Prutal.compact-html-folding"
}

Remove manually added provider overrides when uninstalling.

Commands

Command	Action
Compact Folding: Fold Block	Fold the innermost eligible region containing the cursor.
Compact Folding: Unfold Block	Expand that region.
Compact Folding: Fold All	Collapse all provided folding regions.
Compact Folding: Unfold All	Expand every fold in the active editor.

The existing gutter arrows and standard folding shortcuts also work.

Settings and colors

Setting	Default	Effect
`compactHtmlFolding.enabled`	`true`	Use compact HTML/JavaScript folding ranges.
`compactHtmlFolding.showClosingTag`	`true`	Include the closing tag or delimiter after `…`.
`compactHtmlFolding.showBorder`	`true`	Outline the folded opening text.
`compactHtmlFolding.maxFileSizeKB`	`1024`	Approximate UTF-16 size limit for document parsing.

To choose a different closing-tag color, merge this entry into workbench.colorCustomizations:

"compactHtmlFolding.tagForeground": "#00BFFF"

The extension's default tag colors are theme-aware presets, not automatic copies of every custom theme's syntax colors. JavaScript delimiters use the normal editor text color.

Limitations

Supported language modes: HTML and JavaScript. JSX, TSX, TypeScript, XML and Razor are not included in this version.
Compact HTML requires a single-line opening tag and an explicit closing tag on its own line. Other layouts keep ordinary line folding and receive a plain ellipsis summary.
Compact JavaScript requires the opening delimiter to end its line and the closing delimiter to have no preceding code on its line. Continuation clauses and neighboring statements are never hidden as part of that fold.
The stable VS Code API does not expose fold state directly. The extension detects gaps in visible lines. At the viewport boundary or EOF without a final newline, the gutter may fold correctly while the summary is temporarily absent. Use Compact Folding: Fold Block there, or scroll so the following line becomes visible. A final newline also helps.
The outline covers original opening text. The added label remains a decoration; it is not included when copying text.
CSS semantic folding inside style blocks is not added. The style element itself can be folded.
Large documents over the configured limit skip this provider and may use the editor's indentation fallback.
Automated parsing and decoration-payload checks cover this release. The rebuilt package has not had a live editor visual test in the build environment.

Privacy and implementation

No telemetry, accounts, network requests, shell execution, source-file writes or VS Code installation patches at runtime. Parsers run locally and are bundled into the VSIX. The source uses commented JavaScript. Included dependencies retain their licenses in THIRD_PARTY_NOTICES.md.

Publishing

The publisher ID is Prutal. Publishing requires access to that Marketplace publisher.

The extension icon is bundled at assets/icon.png and referenced by the top-level "icon": "assets/icon.png" field in package.json. Keep that file included when packaging. It does not require a separate image-hosting URL.

Develop

Use Node.js 20 or later for the build tools:

npm ci
npm test
npm run build
npm run package

Open the source folder in VS Code and press F5 after building. The examples folder includes both HTML and JavaScript samples.

Run the live editor suite with npm run test:integration. It downloads VS Code if needed; Linux requires a working display or Xvfb. Set COMPACT_VSCODE_EXECUTABLE to use an existing installation.

References: VS Code folding API, fold-placeholder theme color, Microsoft HTML language service, TypeScript language service.