XMLify

XMLify is a Visual Studio Code extension that makes XML files easier to read without forcing you to permanently rewrite the document while you browse it.

It adds visual indentation, readable tag colors, optional nesting-level markers, XML formatting, and folding ranges for XML-like files.

Features

• Visual XML indentation based on nesting depth.
• Existing real indentation is compensated, so visual indentation is not added on top of it.
• Tag-name coloring only: brackets, attributes, and values are left untouched.
• Opening and closing tags with the same name use the same color.
• Equal tag names always resolve to the same readable color.
• Optional translucent nesting level numbers.
• Optional colored indentation bands by nesting level.
• XML block folding for multi-line tags.
• XML formatting from the XMLify menu or VS Code's Format Document command.
• Adjacent tags are split onto separate lines while simple text-only elements stay inline.

Example preserved as one line:

<Mnemonic>DID_$4B12</Mnemonic>

Example split during formatting:

<Item Value="1" Text="activated"/>
</List>

Installation

From Visual Studio Marketplace

1. Open Visual Studio Code.
2. Go to Extensions.
3. Search for XMLify.
4. Install the extension published by lekasnet.

From a VSIX file

1. Download the .vsix package.
2. In VS Code, run Extensions: Install from VSIX....
3. Select the downloaded file.

Usage

Open an XML-like file: .xml, .xsl, .xslt, or .svg.

The XMLify button appears in the editor title area. Use it to:

• enable or disable XMLify;
• format XML indentation;
• toggle tag colors;
• toggle indent level numbers;
• toggle indent level colors;
• refresh decorations.

You can also run Format Document from VS Code. XMLify registers a formatter for supported XML-like files.

Settings

• xmlify.enabled: enable or disable XMLify features.
• xmlify.visualIndentSize: visual spaces per XML nesting level.
• xmlify.tagColorsEnabled: enable or disable tag-name colors.
• xmlify.indentLevelNumbersEnabled: show translucent nesting level numbers.
• xmlify.indentLevelColorsEnabled: paint indentation markers by nesting level.
• xmlify.colorPalette: colors used for tag names.

Development

Clone the repository:

git clone https://github.com/LekasNet/XMLify.git
cd XMLify

Install dependencies:

npm install

Run syntax checks:

npm run lint

Start the extension in an Extension Development Host:

1. Open the project in VS Code.
2. Press F5.
3. Open an XML-like file in the new VS Code window.

Create a package dry run:

npm pack --dry-run

For Marketplace publishing, package with vsce:

npx @vscode/vsce package

Source Layout

• src/extension.js: extension activation and VS Code provider registration.
• src/commands.js: XMLify menu and command handlers.
• src/decorations.js: visual indentation, level markers, and tag color decorations.
• src/formatting.js: XML formatting and adjacent-tag splitting.
• src/folding.js: XML folding ranges.
• src/tagColors.js: stable readable tag color assignment.
• src/xmlUtils.js: shared XML depth, indentation, and document helpers.
• src/constants.js: shared selectors, regexes, and palettes.

License

MIT