Before I started using WebStorm for my TypeScript project, I mainly used Microsoft Visual Studio or Eclipse. Sometimes you really take for granted being able to quickly perform certain actions using shortcuts for a specific IDE. While I could have continued to use Visual Studio for TypeScript, I figured it would be best to work with WebStorm given that my professor was using it. If I ran into a Visual Studio specific problem, he wouldn’t be able to help me, so to save any potential headache I decided against using it.
Of course, it’s not like WebStorm doesn’t have its own shortcuts. In fact, I found myself instinctively using shortcuts from Visual Studio that also ended up working in WebStorm, such as the comment shortcut (Ctrl+/). Knowing these shortcuts will likely save me time in the future, so I set out to find a list of useful WebStorm shortcuts.
10 WebStorm Shortcuts You Need to Know
In the JetBrains blog 10 WebStorm Shortcuts You Need to Know, Ekaterina Prigara shares a list of the essential shortcuts that everyone should try:
- Search everywhere: Shift+Shift
- Navigate to declaration: Ctrl+B or Ctrl+Click
- Code completion with replace: Tab
- Show intention actions: Alt+Enter
- Extend selection: Ctrl+W
- Run: Alt+Shift+F10
- Expand Live template: Tab
- Multiple cursors: Alt+Click
- New Scratch file: Ctrl+Alt+Shift+Insert
- Refactor: Alt+Control+Shift+T
Under each command she provided an explanation of the shortcut as well as a very useful visual of the command in action. She also provides a useful resource containing a list of all the WebStorm shortcuts for OS X, Windows, and Linux located here.
I hadn’t known about the majority of these commands. The “Code completion with replace” command is particularly useful because I recall auto-completing code while trying to replace a variable and ending up with both the new and original variables. “Multiple cursors” is one of the more interesting commands in my opinion. Being able to type the same code in multiple places at once, while pretty situational, would have been able to save me a lot of time, particularly on the HTML of some of my components. Also, Scratch files are a great idea that I had no idea even existed. Being able to create code samples or make notes directly in the IDE without affecting the rest of the project is a godsend. Not only that, but the Scratch files are saved in WebStorm if I need them later.
These commands, as well as the commands found on WebStorm’s key map reference card, are probably going to save me a lot of valuable time in the future, so it’s important to learn them as early as possible when using a new IDE.
Source: https://blog.jetbrains.com/webstorm/2015/06/10-webstorm-shortcuts-you-need-to-know/
From the blog CS@Worcester – Andy Pham by apham1 and used with permission of the author. All other rights reserved by the author.
