Getting started with WebStorm

WebStorm suggests a predefined keymap based on your environment. You can find this keymap in Settings | Keymap. If you change the shortcut for an action, WebStorm will store those changes in a copy of the predefined keymap and use that copy by default moving forward.

If you're coming from another editor or IDE, you can switch to the corresponding keymap. Some of the available options include VS Code and Sublime Text.

You can also add Vim-like capabilities to your IDE with the IdeaVim plugin.

Learning WebStorm shortcuts will come in handy even if you decide to switch to another JetBrains IDE later on – the shortcuts are the same in almost all of them. Here’s what can help you learn them faster:

• Memorize WebStorm’s most universal shortcut – ShiftShift, or Search Everywhere. You can use it to find any file, action, class, or symbol, and see all the matches in one place.

• Install Key Promoter X – This extension helps you learn essential shortcuts while working. When you use the mouse on a button inside the IDE, Key Promoter X shows you the shortcut you could have used instead.

• Use the WebStorm shortcut cheat sheet – You can download the default WebStorm keymap reference for macOS or Windows and Linux.

Watch the video below for more essential shortcuts and productivity tips.

In WebStorm, extensions are called plugins. They allow you to extend the built-in functionality and customize the IDE to fit your needs. To explore available plugins, go to the Marketplace tab in Settings | Plugins.

WebStorm comes with only a few predefined themes, but there’s a variety of custom options to choose from. To explore them, go to Settings | Plugins and search for “theme” in the Marketplace tab.

You can then go back to the editor and check how the themes you’ve installed look. Choose View | Quick Switch Scheme from the main menu or press Ctrl0` and select Theme. From there, you’ll be able to preview the available themes all in one go.

WebStorm has its own Explorer, the Project tool window, with default behavior that slightly differs from other code editors. For instance, you need to double-click a file to open it in the editor. Here’s how you can change the default setup:

Gif

You can go to the Project tool window settings and select any or all of these options under Behavior:

• Enable Preview Tab – Preview files you have selected in the Project tool window in the editor.

• Open Files / Directories with Single Click – Open files or directories in the editor with one click.

• Always Select Opened File – Auto-select the file that’s currently open in the Project tool window.

Compact Mode reduces the size of toolbars, tool windows, and buttons to create more screen space for your code. It's ideal if you prefer a cleaner, minimalist interface or are working on a smaller screen. To enable it, select Navigate | Search Everywhere from the main menu or press Shift +Shift, type in “compact mode,” and turn it on.

When presenting your code or demoing features in WebStorm, these settings can help improve visibility and make it easier for others to follow along:

You can access all of these settings via Search Everywhere:

• Presentation Assistant – Display keyboard shortcuts in real time as you use them. Go to Settings | Appearance & Behavior | Presentation Assistant to customize what’s shown in the popup. For example, you can choose to display shortcuts for other operating systems.

• Zoom – Type "zoom" in Search Everywhere to quickly zoom in or out throughout the entire IDE interface.

• Presentation Mode – Select Enter Presentation Mode from the Search Everywhere popup to enable it. You can exit the mode the same way — just type "exit presentation mode."

WebStorm detects your version control system automatically. Here's how to handle some common tasks:

• Update your project – Click the branch name in the top left-hand corner and select Update Project. You can either merge the incoming changes to the current branch or rebase the current branch on top of those changes.

• Commit changes – Use the Commit tool window to quickly commit your changes. To make a partial commit, select only specific files or changes within those files.

• View the diff – In the Commit tool window, double-click the file you want to see the diff for.

• View logs – For Git, you can see the commit history. Open the Git tool window for a detailed log of changes.

WebStorm helps you run and debug your Node.js applications or scripts, as well as frontend applications and tests. You can debug applications started from WebStorm or attach the debugger to an external Node.js program.

If you’re looking for an AI coding assistant that’s natively integrated with WebStorm, you can try JetBrains AI Assistant. It includes lots of features like context-aware smart chat or the ability to generate code and write documentation. A free 7-day trial is available.

You can also use GitHub Copilot, Supermaven, Tabnine, and other AI tools in WebStorm – search for the corresponding plugins via the Marketplace tab in Settings | Plugins. Note that those plugins aren’t maintained by JetBrains.

You can configure WebStorm to perform a specific action or run a tool like Prettier or ESLint every time you save a file after modifying it. To do this, go to Settings | Tools | Actions on Save and check the necessary boxes there.

note

By default, WebStorm automatically saves any changes that you make in your files. You can learn more about it here.

WebStorm offers tools to help you collaborate and work on your projects remotely.