Quickly access HTML/CSS files associated with an Angular component
I'm fairly new to WebStorm but have learned Angular 6 and am working on a large project. I'm looking for ways to use the IDE shortcuts to become more productive, and there's one thing that I've not been able to figure out.
Each Angular component will typically consist of three files; the HTML, the typescript code, and the CSS. If I have one open, what's the easier way to access the others? Right now I'm doing Shift-Shift to search everywhere, but this can quickly become a mess and takes me out of flow. Is there a way to access "other files", say in the same directory?
Please sign in to leave a comment.
Hi there,
You may use Nav Bar (the bar on top with file path) -- focus it and in 2 key presses you can browse other files in the same folder.
Alternatively -- focus currently opened file in Project View panel (there are shortcuts for that) and select another file from the same folder.
there are no special shortcuts for accessing Angular component files.
Please vote for https://youtrack.jetbrains.com/issue/WEB-24833 to be notified on any progress with this feature.
For now, you can follow @Andriy advise to use Nav Bar for navigation - use Navigate | Jump to Navigation Bar to focus it, then navigate to files with arrow keys