Tutorial: Using WebStorm as the Vim Editor
On this page:
- Before you start
- Downloading and installing IdeaVim plugin
- What happens to WebStorm's UI after restart?
- Configuring shortcuts
- Editing modes
Before you start
Make sure that:
- You are working with WebStorm version or higher. If you still do not have WebStorm, download
it from this page.
To install WebStorm, follow the instructions, depending on your platform.
This tutorial is created with WebStorm version 2016.1.
Downloading and installing IdeaVim plugin
You see the list of plugins currently installed on you computer. However, the IdeaVim plugin is not among them. Click the button Browse JetBrains plugins. WebStorm shows the contents of the huge JetBrains repository... you can type the word "vim" in the search field to narrow down the list:
After installing the plugin, it actually becomes available after WebStorm restart.
What happens to WebStorm's UI after restart?
After WebStorm restart, this check command is selected. You can disable Vim by clearing this check command.
Both Vim and WebStorm are keyboard-centric. With IdeaVim plugin, it is quite possible that WebStorm's keymap runs into a conflict with the Vim keymap. That's why WebStorm allows you choosing which keyboard shortcut you prefer for a certain action. This is how it's done.
In the Shortcut column, select the shortcut you want to configure. Next, in the Handler column, click the corresponding cell, and see the drop-down list of three possible options (Undefined, Vim, IDE):
If you leave the handler undefined, then, on pressing the shortcut, say, Ctrl+B, WebStorm shows the following banner:
OK, now that you have Vim enabled, you see that the cursor has changed its shape - now it is a block, which means that you are in the Normal mode :
If you want to enter the Insert mode,
i, and the cursor will turn into a line:
In this mode you can type new or change the existing code. Same way, you can enter the various Vim modes: for
r for the
By the way, as soon as you enter Vim emulation, it is also reported in the Status bar.
To return to the Normal mode, press Escape.