https://github.com/polyseam/invisaline
visual template string indentation in vscode
https://github.com/polyseam/invisaline
javascript typescript vscode vscode-extension
Last synced: 3 months ago
JSON representation
visual template string indentation in vscode
- Host: GitHub
- URL: https://github.com/polyseam/invisaline
- Owner: polyseam
- License: apache-2.0
- Created: 2025-04-30T07:11:57.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-03T03:23:09.000Z (about 1 year ago)
- Last Synced: 2025-12-26T18:53:06.498Z (6 months ago)
- Topics: javascript, typescript, vscode, vscode-extension
- Language: TypeScript
- Homepage:
- Size: 88.9 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# invisaline
[invisaline](https://marketplace.visualstudio.com/items?itemName=Polyseam.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"
## Installation
### From the Marketplace
1. Open the Extensions view in VS Code (`Ctrl+Shift+X` / `Cmd+Shift+X`).
2. Search for **invisaline** and click **Install**.
## The Problem
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.
```ts
function greet(name: string) {
const message = `Hello, ${name}!
Welcome to invisaline.
`;
}
```
## The Solution
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.
```ts
function greet(name: string) {
const message = `Hello, ${name}!
Welcome to invisaline.`; // this code is visually indented, but contains no extra spaces
}
```
## Usage
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.
### Enable the extension
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.
### Disable the extension
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.
## Open-VSX
The extension is also
[available on Open-VSX](https://open-vsx.org/extension/polyseam/invisaline), a
marketplace used by some non-Microsoft editors like
[windsurf](https://windsurf.com/editor) that support the VSIX format.
## Contributing
Contributions and feedback are welcome! Please open issues or pull requests on
GitHub to suggest new features or report bugs.
## License
[Apache 2.0](https://github.com/polyseam/invisaline/blob/main/LICENSE)