Angular Component Switcher
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
Contributing
If you find any issues or have suggestions for improvements, please create an issue on the GitHub repository.
License
This extension is licensed under the MIT License.
Changelog
See CHANGELOG.md for version history.
Enjoy switching between your Angular files with ease! 🚀