运气好,赶上了2012年12月21日“世界末日”的促销活动,便宜买到了这款号称The smartest JavaScript IDE的软件。
我一向对工具很挑剔,由于是从.NET转型成Web前端,在尝试了Sublime Text 2以后,还是觉得VS把Web Essential, VsVim之类的插件装全了,更好用也更好看一些。
同时,作为一个Vim的受益者,IDE对Vim支持得如何很大程度上影响了我的选择。在vim的支持方面,VS的VsVim和Sublime的Vintage都有一些缺陷。种种原因,令我对WebStorm充满了期待。
安装Vim插件
在主界面用快捷键ctrl+alt+s打开settings界面,左侧导航栏里选中plugin项,如下图:
选中plugins后,会在右侧列出所有已安装的插件,我们要新安装一个插件,因此要点击Browse repositories。
弹出的新窗口默认会列出所有的插件,我们在右上角的搜索框输入ideavim进行筛选,然后在ideaVim上右键选择Download and install,如下图:
下载进度会显示在WebStorm主窗口底部的状态栏,下载完毕后会有提示,需要重启Web Storm才能使插件生效,如下图:
重启后,就已经是Vim的输入方式了。这时候打开Tools菜单,会看见多了两项。
VIM Emulator:切换是否使用Vim的输入方式。
Reconfigure VIM Keymap: 设置快捷键。下文中我们将会用它来设置快捷键。
设置快捷键
长期在Windows下工作,使用Vim不可避免要搭配一些Windows的快捷键,比如ctrl+c, ctrl+v,在gVim, VsVim, Vintage里都做出了妥协,采用了Windows的行为。但WebStorm默认并没有保持这些快捷键在Vim中原有的作用。没关系,下面就来详述一下如何解决这个问题。
具体做法是:新建一套键盘映射,然后让vim使用这套映射。
首先,在主界面用快捷键ctrl+alt+s打开settings界面,左侧导航栏里选中Keymap项,如下图:
在右侧的keymaps下拉列表中选择Default,我们将以此为基础进行修改,因此点击copy按钮,复制一份新的出来,接下来就可以放心在上面修改了。
给它起一个新的名字myVim。
现在要看看copy命令的快捷键,于是在右上的搜索框输入copy,会把与copy相关的都筛选出来,见下图:
我们看到,ctrl+V和ctrl+Insert都能达到copy的目的。同样,在Default模式下ctrl+V也可以实现paste操作了,这些快捷键都从Default那里继承了过来。
常使用Vim的人肯定知道Esc键有多常用。但现代键盘几乎都让Esc键偏居一隅,够起来不方便。其实在标准的Vim里,ctrl+[同样能达到Esc的效果。但是在WebStorm的Default模式下,ctrl+[已经被赋予了另外的作用,由于myVim从Default继承而来,因此ctrl+[也起不到Esc的作用。好在WebStorm的自定义快捷键可以覆盖系统的默认设置。
在上图中快捷键的位置上点击右键,会弹出用于删除和添加快捷键的菜单。修改的时候,如果和别的快捷键有冲突会看到红字提醒。例如下图所示,ctrl+[的原有功能是Move caret to code block start. 我们的本意就是给它赋予新的功能,果断点OK,接下来会再弹一个确认对话框,点remove删除原有的热键功能。
完成后点击下面的OK按钮退出Keymaps设置。如下图,打开主界面菜单栏中的Tools > Reconfigure VIM Keymap,下拉列表中选择刚才新建的myVim。重启WebStorm,大功告成。
这时候再试一试ctrl+[,是不是已经可以从Insert Mode返回到Normal Mode了?
避免按Esc键的其他方法
有人觉得ctrl+[按起来麻烦,习惯用CapsLock或者JJ来模拟Esc,可以看一下http://vim.wikia.com/wiki/VimTip285
针对Windows用户的配置,请参考 http://vim.wikia.com/wiki/VimTip75