- WEBSTORM KEYBOARD SHORTCUTS HOW TO
- WEBSTORM KEYBOARD SHORTCUTS FULL
- WEBSTORM KEYBOARD SHORTCUTS CODE
- WEBSTORM KEYBOARD SHORTCUTS WINDOWS
WEBSTORM KEYBOARD SHORTCUTS HOW TO
This brief training will show you how to best use WebStorm to be as productive as possible. Learn WebStorm or any other JetBrains IDE in one afternoon!
WEBSTORM KEYBOARD SHORTCUTS FULL
It is a full featured IDE that provides all the tools and features for developers in JavaScript, Typescript, NodeJS and of course HTML and CSS. We hope these shortcuts save you some time.JetBrains WebStorm is the perfect editor for web developers. Want to learn what else WebStorm has up its sleeve? You can learn some more of the shortcuts using the keymap reference available under Help | Keymap Reference in the IDE’s main menu, or on our website.Īlternatively, you can go to Preferences / Settings | Keymap or you can simply start typing an action name in the Search Everywhere popup. Scratch files are saved inside the IDE and can be accessed from any project.
WEBSTORM KEYBOARD SHORTCUTS CODE
With scratch files, you can quickly create code samples or make notes while working in the IDE – without affecting your project files. Scratch File: ⇧⌘N / Ctrl+Alt+Shift+Insert To learn more about working with multiple carets, check out our documentation. To add or remove multiple carets, press and hold ⌥ / Alt and click where you want the next location of the caret to be so you can edit these locations simultaneously. The extremely popular multiple carets feature is available in WebStorm too. To learn more about working with live templates, check out this blog post. You can even add your own custom templates. WebStorm comes with a large collection of live templates, including postfix templates. You can jump from one placeholder for a variable to another in the template by pressing ⇥ / Tab once again. Type a short abbreviation and then press ⇥ / Tab to expand it into code! WebStorm also supports Emmet abbreviations for HTML and CSS, which can be expanded with ⇥ / Tab as well. Tip: Select the run configuration from the list, then hold ⇧ / Shift and press ↵ / Enter to start debugging instead of running it. The fastest way to run one of your project’s run configurations is to press ⌃⌥R on macOS or Alt +Shift+F10 on Windows/Linux and select one of the configurations from the popup. With the Extend Selection action, you can quickly expand the selected area without using the mouse. However, if you need to replace one suggestion with another, press ⇥ / Tab, and the current element will be replaced with the selected lookup item. The natural thing to do is press ↵ / Enter to select one of the suggestions offered. Code completion with replace: ⇥ / TabĪs you start typing in WebStorm, a code completion popup will automatically appear. If WebStorm finds more than one possible declaration of a function, you’ll be prompted to select one from the drop-down list. This shortcut can also help you jump to the referenced file or imported module. With WebStorm, you can instantly jump to the definition of a symbol: just press ⌘ or Ctrl and click on that symbol, or place the caret on it and press ⌘B / Ctrl+B. Go to Declaration: ⌘B or ⌘+Click / Ctrl+B or Ctrl+Click To quickly access the list of available refactorings for the selected code, press ⌃T / Ctrl+Alt+Shift+T. Just like other IDEs by JetBrains, WebStorm is known for its powerful refactoring capabilities. Visit this page to learn more about inspections and what you can do with them. This will disable it for the whole project. Whenever you see a squiggly line in your code or whenever WebStorm displays a light bulb in the editor, you can click on that light bulb or place the caret on your code and press ⌥↵ / Alt+Enter – the IDE will provide you with a list of actions that are available in the current context.Īnd what if you don’t want to use a particular action or see a warning anymore? Place the caret on your code, press ⌥↵ / Alt+Enter, then click the arrow next to the inspection you no longer want to see, and disable it.
![webstorm keyboard shortcuts webstorm keyboard shortcuts](https://resources.jetbrains.com/help/img/idea/2020.1/ws_tool_windows.png)
WebStorm has loads of intention actions to help you quickly apply fixes, generate code, and change the project settings. You can also enable or disable some of the actions right from the popup, as shown in the gif. As the name suggests, it allows you to search everywhere in your project for any files, actions, classes, or symbols, and it will show you all the matches in one place.Ĭlick on the tab you need or press ⇥ / Tab to narrow down the search. If there is just one shortcut you take away from this blog post, it should be Search Everywhere. You can customize your keymap configuration in Preferences / Settings | Keymap.
WEBSTORM KEYBOARD SHORTCUTS WINDOWS
Memorizing all of them would be practically impossible, but the good news is that you don’t have to! You can simply start by learning the essential shortcuts below, and you’ll see an immediate boost in your productivity.Īll the key combinations used here are from the default keymaps for macOS and Windows / Linux. WebStorm can save you a lot of time on performing routine actions. Note: This post was updated in April 2021.