WebStorm 2017.1 Help

Tutorial: Using WebStorm as the Vim Editor

On this page:

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

On the toolbar of the WebStorm main window, press Ctrl+Alt+S to open the Settings/Preferences dialog, and then click Plugins.

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:

/help/img/idea/2017.1/install_vim.png

After installing the plugin, it actually becomes available after WebStorm restart.

What happens to WebStorm's UI after restart?

First, on the Tools menu, a check command Vim Emulator appears:

After WebStorm restart, this check command is selected. You can disable Vim by clearing this check command.

Second, in Settings/Preferences dialog, an additional node Other Settings appears, with the page Vim Emulation. This page appears after restart!

Configuring shortcuts

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.

Open Settings/Preferences dialog, and under the node Other Settings, click Vim Emulation:

/help/img/idea/2017.1/vim_emulation_page.png

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):

/help/img/idea/2017.1/vim_emulation_shortcut.png

If you choose IDE, it means that the WebStorm's shortcut for this particular action is enabled. When you press, say, Ctrl+Z, WebStorm silently performs its action.

If you leave the handler undefined, then, on pressing the shortcut, say, Ctrl+B, WebStorm shows the following banner:

You can choose to redefine this shortcut as an IDE shortcut and thus accept the WebStorm's keymap. To do so, click the link IDE shortcut.

If you click the link Vim Emulation, then WebStorm will show the Vim Emulation page of the Settings/Preferences dialog.

For the purposes of this tutorial, click the link Vim Emulation. Then, when you press Ctrl+B, WebStorm will perform the Vim action for this keyboard shortcut.

Editing modes

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, press 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 example, press r for the Replace mode.

By the way, as soon as you enter Vim emulation, it is also reported in the Status bar.

/help/img/idea/2017.1/ps_vim_status_bar.png

To return to the Normal mode, press Escape.

See Also

Last modified: 17 July 2017