WebStorm
 
2023.2
Shortcuts: Windows
Get WebStorm
You are viewing the documentation for an earlier version of WebStorm.
  1. Write and edit source code
  2. Vim in WebStorm

Vim in WebStorm

Last modified: 08 September 2023

IdeaVim is a Vim engine for the WebStorm editor. It supports the normal, insert, and visual modes, Command-line and Ex modes, Vim regexp and configuration, and other features.

Install the IdeaVim plugin

  1. In the Settings dialog (CtrlAlt0S), select Plugins.

  2. Find the IdeaVim plugin in the Marketplace and click Install.

  3. Restart WebStorm.

After you restart the WebStorm, Vim is enabled and the editor starts operating in the Vim mode. To disable it, deselect Tools | Vim in the main menu.

Configure shortcuts

Both Vim and WebStorm are keyboard-centric. Your keymap in WebStorm may conflict with Vim's key combinations. To resolve this, select the shortcuts you prefer for different actions.

  1. Press CtrlAlt0S to open the IDE settings and then select Editor | Vim.

  2. Find the shortcut and corresponding IDE action, and select how you want to handle it when you are using Vim:

    Vim settings

    • Undefined: show a popup notification that suggests to either redefine the IDE shortcut or configure the handler in the settings.

      Shortcut notification

    • IDE: perform the IDE action associated with this shortcut.

    • Vim: handle it as a Vim shortcut.

Editing modes

With Vim, the caret is a block when you are in the Normal mode:

Vim Normal mode

To change to the Insert mode, press i, and the cursor will become a line:

Vim Insert mode

In this mode you can type new code or change existing code. You can also enter other Vim modes: for example, press R for the Replace mode.

To return to the Normal mode, press Esc.

Vim configuration

Vim is configured using a vimrc file. Similarly, the IdeaVim plugin uses an ideavimrc file with the same syntax.

Create a .ideavimrc file

  • In the status bar at the bottom of the IDE window, click the IdeaVim widget and select Create ~/.ideavimrc.

    Creating .ideavimrc file in widget

    WebStorm creates the file and opens it in the editor. You can use this widget later on to quickly access your ideavimrc file.

tip

You can find examples of the ideavimrc file in this GitHub discussion.

The configuration file will be created in one of the following locations depending on the operating system:

%HOMEPATH%\_ideavimrc

note

The location where WebStorm looks for ideavimrc depends on the user.home JVM option, which is set to the user's home directory by default. For more information, refer to JVM options.

If the configuration already exists

If you already have a vimrc file with your configuration, you can do one of the following:

  • Include the configuration from vimrc with the source command in your ideavimrc file:

    source ~/.vimrc

    This way you can also include other commands in your ideavimrc file, which will be applied only to your Vim in WebStorm and will not affect actual Vim configuration.

  • If you don't want to use your Vim configuration, you can rename .vimrc to .ideavimrc.

  • Create ideavimrc as a symlink to vimrc if you don't want to modify your Vim in WebStorm compared to actual Vim configuration:

    mklink _ideavimrc _vimrc

IDE actions

IdeaVim allows you to map IDE features using action IDs.

Learn an action ID

  1. Press CtrlShift0A and type IdeaVim: Track Action Ids.

  2. Toggle the feature on using the switcher on the right.

    Enabling the Track Action Ids feature

    Now the IDE will be showing you IDs of actions that you click with the mouse in a popup notification at the bottom of the screen and in the Notifications tool window. Note that some actions do not have an ID.

    Action IDs are displayed

  3. Click Copy Action Id to copy an ID or Stop Tracking to disable the tracking mode.

Map an action in ideavimrc

  1. In the ideavimrc file, map an action using the map command and the <Action> keyword, for example: map \r <Action>(ReformatCode)

  2. Press CtrlShift0O to reload the changes.

tip

You can also execute actions as Ex commands. For more information, refer to IdeaVim documentation.

See also

External Links