The Angular File Toggle extension for Visual Studio Code allows you to quickly switch between different file types (TypeScript, HTML, CSS) in Angular projects.
- Toggle between TypeScript, HTML, and CSS files for Angular components.
- Supports multiple CSS preprocessor extensions (SCSS, SASS, LESS, CSS, Stylus).
- Switches to the corresponding file based on the currently opened and selected file.
The extension provides the following commands:
angular-file-toggle.toggleTs
: Toggle to the corresponding TypeScript file.angular-file-toggle.toggleHtml
: Toggle to the corresponding HTML file.angular-file-toggle.toggleCss
: Toggle to the corresponding CSS file (supports SCSS, SASS, LESS, CSS, Stylus).
The extension comes with the following default keybindings:
Ctrl+Alt+T
(Windows/Linux) orCmd+Alt+T
(macOS): Toggle to the corresponding TypeScript file.Ctrl+Alt+H
(Windows/Linux) orCmd+Alt+H
(macOS): Toggle to the corresponding HTML file.Ctrl+Alt+C
(Windows/Linux) orCmd+Alt+C
(macOS): Toggle to the corresponding CSS file.
- Open Visual Studio Code.
- Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or by pressing
Ctrl+Shift+X
. - Search for "Angular File Toggle".
- Click Install.
- Open an Angular component file in the editor.
- Use the Command Palette (
Ctrl+Shift+P
orCmd+Shift+P
on macOS) and type one of the following commands:Toggle to TypeScript File
: Switch to the corresponding TypeScript file.Toggle to HTML File
: Switch to the corresponding HTML file.Toggle to CSS File
: Switch to the corresponding CSS file.
Alternatively, you can use the default keybindings mentioned above.
The extension assumes that the file names follow the Angular component naming conventions.
If you have any suggestions or find any issues, please feel free to open an issue or submit a pull request on the GitHub repository.
See LICENSE.txt for license information.