invisaline is a VS Code extension that visually aligns multi-line JavaScript and TypeScript template literals to match their surrounding code indentation — without changing your source file.
Important
legally distinct from and unrelated to the mouth technology "invisalign"
- Open the Extensions view in VS Code (
Ctrl+Shift+X/Cmd+Shift+X). - Search for invisaline and click Install.
When writing multi-line template literals, the content is pushed all the way to the left margin of the editor, which can make it hard to read and it just appears messy.
function greet(name: string) {
const message = `Hello, ${name}!
Welcome to invisaline.
`;
}Invisaline automatically aligns the content of multi-line template literals with the surrounding code indentation, making it easier to read and more visually consistent. This is purely a visual change and does not modify the source file.
function greet(name: string) {
const message = `Hello, ${name}!
Welcome to invisaline.`; // this code is visually indented, but contains no extra spaces
}The extension will automatically activate when you open a JavaScript or
TypeScript file so long as invisaline.enabled is set to true globally or in
the current workspace.
Open the command palette (Ctrl+Shift+P / Cmd+Shift+P) and run the command
Invisaline: Enable Visual Template String Indentation then select whether you
want it enabled for all workspaces or just the current one.
Open the command palette (Ctrl+Shift+P / Cmd+Shift+P) and run the command
Invisaline: Disable Visual Template String Indentation then select whether you
want it disabled for all workspaces or just the current one.
The extension is also available on Open-VSX, a marketplace used by some non-Microsoft editors like windsurf that support the VSIX format.
Contributions and feedback are welcome! Please open issues or pull requests on GitHub to suggest new features or report bugs.