How to move from VS Code to WebStorm

Switch to the VS Code keymap

If you aren’t ready to say goodbye to VS Code shortcuts just yet, you can switch to the VS Code keymap. To do so, go to Preferences / Settings | Keymap, set VSCode or VSCode (macOS) as your default keymap, and save the changes.

Note that the keymap might not be bundled in some versions of WebStorm. To install it, go to Preferences / Settings | Plugins and look for vscode there. Once you've installed the keymap, you can go to Preferences / Settings | Keymap and set it as the default one.

Learn WebStorm shortcuts

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 – double Shift 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 and print it out as a card.

WebStorm suggests a predefined keymap based on your environment. You can find this keymap in Preferences / 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.

note

There are two predefined keymaps for macOS. You can learn about the differences between them here and choose the one that suits you best.

Install extensions

In JetBrains IDEs, we refer to extensions as plugins. They work pretty much the same way extensions do in VS Code, allowing you to extend the built-in functionality and customize your IDE. To explore the available plugins, go to the Marketplace tab under Preferences / Settings | Plugins.

Here’s what WebStorm looks like with the popular Rainbow Brackets plugin installed. You can read this blog post to learn about some other popular plugins.

Change the UI theme

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

You can then go back to the editor and check what the themes you’ve installed look like. Select View | Quick Switch Scheme from the main menu or press Ctrl+` and select Theme. From there, you’ll be able to preview the available themes all in one go, as shown here.

Switch to Zen mode

Like in VS Code, you can switch to Zen mode whenever you want to focus on coding. From the main menu, select Navigate | Search Everywhere and type enter zen mode. Do the same but select Exit Zen Mode when you’re done.

Command Palette

Search Everywhere is your replacement for VS Code’s Command Palette. You can use it to find any file, action, class, or symbol, and see all of the matches in one place. Open it from Navigate | Search Everywhere in the main menu or by clicking the magnifying glass in the top right-hand corner of the editor.

Search and replace

Although WebStorm’s search and replace workflow is slightly different from the one in VS Code, the principles are the same. WebStorm lets you find and replace text strings within both specific files and entire projects. To get started, in the main menu go to Edit | Find and select Find (for specific files) or Find in Files (for entire projects). To replace a text string, select Replace or Replace in Files under the same submenu instead.

Change the defaults for the Project view

WebStorm has its own Explorer, the Project view, and it works a bit differently. For instance, you need to double-click a file to open it in the editor. Here’s how you can change the default setup to match what you were used to in VS Code:

Gif

You can go to the Project view settings and select any or all of these options:

• Open Files with Single Click – Open files in the editor with one click.

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

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

Set up actions on save

You can configure WebStorm to perform a specific action or run a tool like Prettier or ESLint every time you save your modified file. To do this, go to Preferences / Settings | Tools | Actions on Save and tick the necessary boxes there. To learn more about performing actions on save, see this section.

note

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