Jump between an Angular component’s TypeScript, HTML, and style files in one keystroke. Works in VS Code, Cursor, and other VS Code–based editors.
Why use it
Stays in the flow: no tree hunting or slow file search for the “other half” of the component.
Understands common layouts: *.component.* and simple siblings like name.ts / name.html / name.scss.
If the template or style file is missing but you use an inlinetemplate or styles in @Component, it moves the cursor to that code instead.
No telemetry, no network calls, and it only looks at the current file’s folder—not a whole-repo scan.
Shortcuts
With focus in the editor on a supported file (.ts, .html, .scss, .css, .sass, .less):
Go to
Windows / Linux
macOS
TypeScript
Alt+T
⌘⌥T
HTML
Alt+V
⌘⌥V
Style (first match in your preferred order)
Alt+C
⌘⌥C
You can also run the same actions from the Command Palette (names start with “Angular component shortcuts”) while the cursor is in the editor on a supported file.
Settings
Open Settings and search for Angular component shortcuts:
Style file order — which extension wins when several exist (default: SCSS, then CSS, SASS, LESS).
Create missing file — optionally create the target file when you switch and it does not exist yet.
Open beside — open the next file in a split column.
Reveal in Explorer — show the opened file in the file tree.
Compatibility commands — keep legacy command IDs if you already had custom keybindings from an older setup.
