Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>ng-open-all-component-filesNew to Visual Studio Code? Get it now.
ng-open-all-component-files

ng-open-all-component-files

Jonathan Fernandez

|
70 installs
| (0) | Free
This extension will open related sibling Angular files based on Focus. Data/Style Focus
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Ng Open All Component Files

This extension allows you to quickly open 2 files at the same time based on your focus:

  • Data Mode: html/.ts
  • Style Mode: html/.scss

I'm lazy and biased to myself, so this only supports .ts,.scss,.html. If you don't like it you can Fork Me!

It is recommended to key-bind the commands to the left-hand reachable keys to navigate around Angular really quickly. (Right hand tends to switch between mouse which takes longer). It is up to you to choose keybindings as I could not decide at this time..

Commands:

  • Open Related Angular Files: Focused File will open sibling files with same name (columns 1-3 will be used)
  • Close Related Angular Files: Focused File will close sibling files with same name
  • Open Angular File Explorer...: Opens a dropdown of all .ts files, since .html and .scss are redundant. Selecting a component file will open all related files in columns 1-3.
  • Switch to Opened Angular File...: Make a keybinding to this like Ctrl/Cmd Tab for switching apps. This will switch columns 1-3 to already opened angular component files, or just open a already opened .ts file.
  • Switch to Opened Angular File...: Switch Modes between Data or Style files opening with html template. (keybinding is also recommened to navigate quick)
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft