Angular Component Switcher

July 13, 2025 · View on GitHub

An extension that allows you to quickly switch between Angular component files (.ts, .html, .scss, .css, .spec.ts) with a simple keyboard shortcut.

Features

Quick File Switching: Press Alt + S (Windows/Linux) or ⌥ + S (Mac) to cycle through related Angular component files
Configurable Extensions: Customize which file extensions to include in the switching cycle
Status Bar Feedback: Shows confirmation when switching files
Error Handling: Clear error messages when files are not found or accessible

Installation

From VS Code Marketplace

Open VS Code
Go to Extensions
Search for "Angular Component Switcher"
Click Install

From VSIX Package

Download the .vsix file from the releases
In VS Code, press Ctrl+Shift+P to open the command palette
Type "Extensions: Install from VSIX"
Select the downloaded .vsix file

Usage

Open any Angular component file (.ts, .html, .scss, .css, or .spec.ts)
Press Alt + S (Windows/Linux) or ⌥ + S (Mac) (or Cmd+Shift+P and search for "Switch Angular Files")
The extension will cycle through all available related files

Example

If you have these files in your project:

src/app/components/user-profile/
├── user-profile.component.ts
├── user-profile.component.html
├── user-profile.component.scss
└── user-profile.component.spec.ts

Starting from user-profile.component.ts and pressing Alt + S (Windows/Linux) or ⌥ + S (Mac) will cycle through:

user-profile.component.html
user-profile.component.scss
user-profile.component.spec.ts
Back to user-profile.component.ts

Configuration

You can customize the extension behavior through VS Code settings:

File Extensions

Control which file extensions are included in the switching cycle:

{
  "angularFileSwitcher.fileExtensions": [".ts", ".html", ".scss", ".css", ".spec.ts"]
}

Exclude Spec Files

Exclude .spec.ts files from the switching cycle:

{
  "angularFileSwitcher.excludeSpecFiles": true
}

Open in New Tab

Choose whether to open the switched file in a new tab or replace the current tab:

{
  "angularFileSwitcher.openInNewTab": true
}

When set to true, the extension will open the switched file in a new tab, keeping the current file open. When set to false (default), it will replace the current tab with the new file.

Keyboard Shortcuts

Shortcut	Command	Description
`Alt+S`	`angular-file-switcher.switch`	Switch to the next related Angular file

You can customize the keyboard shortcut by going to File > Preferences > Keyboard Shortcuts and searching for "Switch Angular Files".

Requirements

Visual Studio Code 1.76.0 or higher
Angular project with component files