When using most software, people feel productive when they can get the most common tasks done really quickly. Keyboard shortcuts go a long way in doing that and saving your time. WebStorm has a shortcut for almost every action. Today we’d like to share with you 10 essential shortcuts that everyone should try.
All the key combinations used here are from the Default keymap for Windows and Linux and from the default Mac OS X 10.5+ keymap for Mac. You can easily customize your keymap configuration in Preferences | Keymap.
Search everywhere: Shift+Shift
As the name suggests, the Search everywhere popup allows you to search for anything in your project, as well as in the IDE itself.
You can search for files, symbols, functions, variables in your code and quickly navigate to them:
You can search for actions and run them:
You can also search through the IDE settings, and even enable or disable some of the options right from the popup:
Navigate to declaration: Ctrl+B (⌘B) or Ctrl+Click (⌘-Click)
You can instantly jump to the function or method definition or a variable, class, component, or CSS style declaration: just Ctrl-click on it, or place the caret on it and press Ctrl+B. This shortcut can also help you jump to the referenced file or imported module:
If WebStorm finds more than one possible declaration of a function, you’ll be prompted to select one from the drop-down list.
Code completion with replace: Tab
As you start typing something in WebStorm, a code completion popup automatically appears to provide coding assistance. The natural thing to do is press Enter to select one of the offered suggestions. However, if you need to replace one function with another or change a CSS class, press Tab, and the current element will be replaced with the selected lookup item:
Show intention actions: Alt+Enter or ⌥-Enter
WebStorm has a great number of intentions to help you quickly apply fixes, generate code, or change some project settings. Place the caret on highlighted or underlined code, and press Alt+Enter to see the list of available intention actions. For example:
Don’t want to see a particular warning anymore? Select Suppress to disable the inspection for a certain line of code or file, or even Disable it for the whole project:
Extend selection: Ctrl+W or ⌥-Up Arrow
With the Extend selection action, you can quickly select any block of code without using the mouse:
Run… : Alt+Shift+F10 or ⌃⌥R
The fastest way to run one of your project’s Run configurations it to press Alt+Shift+F10 on Windows or Ctrl-Alt-R on Mac and select one of the configurations from the popup:
Tip: Hold Shift and press Enter to Debug the configuration instead of running it.
Expand Live template: Tab
Live templates are real timesavers. Type a short abbreviation and then press Tab to expand it into code! Jump from one placeholder for a variable to another in the template by pressing Tab once again.
WebStorm comes with a large collection of Live templates, including Postfix templates. You can also add your custom templates.
WebStorm also supports Emmet abbreviations for HTML and CSS. You can also expand them with Tab.
Multiple cursors: Alt+Click
Everyone’s favorite multiple cursors feature is available in WebStorm too. Place the cursors with Alt+Click and then edit these locations simultaneously:
New Scratch file: Ctrl+Alt+Shift+Insert or ⇧⌘N
With Scratch files, you can quickly create code samples or make some notes while working in the IDE—without affecting your project files, but still enjoying the coding assistance. Scratch files are saved inside the IDE and can be accessed from any project:
Refactor this: Alt+Control+Shift+T or ⌃T
WebStorm is known for its refactorings. To quickly access the list of available refactorings for a the selected code, press Alt+Control+Shift+T or Ctrl-T:
Learning more shortcuts
To browse through the list of the default shortcuts, access the Keymap reference: in the IDE via Help | Default keymap reference, or on the website.
Another way is to browse through the keymap configuration in Preferences | Keymap. While there, you can search by action name or by shortcut:
Alternatively, start typing an action name in the Search everywhere popup, and you’ll see some matching shortcuts.
Also you can also try Visual Shortcut Mapper with the WebStorm default keymap available.
We do hope these shortcuts save you some valuable time. What’s your favorite one? Share in the comments below!
Develop with pleasure!
– JetBrains WebStorm Team
