V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3288 天前的主题，其中的信息可能已经有所发展或是发生改变。

一年前我从 Vim 切换到了 WebStorm ，是因为 WebStorm 强大的重构功能，以及 Super Search 功能。在开发天码营前端的过程中，涉及多文件编辑和重构时 WebStorm 的优势便非常明显。

最近到手了 HHKB ，从键盘到触摸板的切换还是挺麻烦的，于是 Vim 编辑的需求又来了。。加之 WebStorm 经常假死，我决定重新启用 Vim 。同时重新打造了我的 Vim ，使它能够满足我在 IDE 中的所有需求。这篇文章便来记述整个过程，或许有些帮助。先上图：

vim ide

上图中，下面的 Console 是通过 Tmux 搞的。 Tmux 的配置和使用参见：优雅地使用命令行： Tmux 终端复用。

准备工作

安装 Git 、 Homebrew （如果你是 Mac ），并安装新版本的 Vim(>=7.3)。一般 linux 发行版都会预装 Vim ，你需要检查一下 vim 的版本：

$ vim --version
VIM - Vi IMproved 7.4 (2013 Aug 10, compiled Jul  4 2015 01:13:13)
MacOS X (unix) version
Included patches: 1-712
Compiled by Homebrew

如果上述命令失败，那么你需要安装一个 Vim~ 这里提供了 Vim 的基本快捷键备忘录。

OSX

$ brew update
$ brew install vim

Linux

apt-get install vim   # ubuntu
pacman -S vim         # archlinux
yum install vim       # centos

Vundle

Vundle是基于 Git 的 vim 插件管理工具，是目前最推荐的工具。之前我的.vim下手动维护着各种插件，目录结构看起来是这样的：

|- doc/
|  |- emmet.txt
|  |- NERDCommenter.txt
|  |- ...
|- plugin/
|  |- emmet.vim
|  |- NERDCommenter.vim
|  |- ...
|- autoload/
|  |- emmet.vim
|  |- NERDCommenter.vim
|  |- ...
|- ftplugin/

使用 Vundle 后变成了这样：

|- bundle/
|  |- emmet/
|  |  |- doc/
|  |  |- autoload/
|  |- NERDCommenter/
|  |  |- doc/
|  |  |- autoload/
|- ftplugin/

其中ftplugin里面是我的配置，比如编译运行的快捷键等。另外，如果你在用 Git 同步 Vim 配置的话，可以把bundle/加入.gitignore。

那么怎么安装 Vundle 呢？

git clone https://github.com/gmarik/Vundle.vim.git ~/.vim/bundle/Vundle.vim

然后在你的.vimrc中加入 Vundle 的配置：

set nocompatible              " required
filetype off                  " required

set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()
Plugin 'gmarik/Vundle.vim'
call vundle#end()            " required
filetype plugin indent on    " required

然后在 vim 中运行:PluginInstall即可（或者在 Bash 中运行vim +PluginInstall）。以后只需要在添加一行Plugin 'xxx'并运行:PluginInstall即可自动安装插件。

窗格管理

要把 Vim 打造成一个 IDE ，你需要熟悉 Vim 如何创建窗格，以及如何在窗格间切换。 :sp可以水平分割当前窗格，:vs可以垂直分割当前窗格。可以重复多次，创建复杂的窗格布局：

vim-split

C-w, C-w可以切换到下一窗格，C-w, j切换到下面的窗格，C-w, k切换到上面的窗格，C-w, h切换到左边的窗格，C-w, l切换到右边的窗格。我为这些操作设置了更加方便的快捷键，比如 Ctrl+J 切换到下面的窗格：

nnoremap <C-J> <C-W><C-J>

多文件管理可以使用多窗格，也可以使用 Buffer 的方式。比如vim a.js b.js就会在 Buffer 中同时打开两个文件。使用:ls列出当前 Buffer 中的文件，然后使用数字键切换。也可以使用:b 2切换到 Buffer 中的第二个文件。

折叠

有些人特喜欢代码折叠，我就在这里列一下如何优雅地折叠代码。首先在.vimrc中添加配置：

set foldmethod=indent
au BufWinLeave * silent mkview  " 保存文件的折叠状态
au BufRead * silent loadview    " 恢复文件的折叠状态
nnoremap <space> za             " 用空格来切换折叠状态

开启以 indent 来折叠代码后，打开一个文件会发现有缩进的内容全被折叠起来了。所以我们引入一个SimpleFold来更智能地折叠：

Plugin 'tmhedberg/SimpylFold'

不要忘了运行:PluginInstall。

自动补全

自动补全当然是用YCM：

Plugin 'Valloric/YouCompleteMe'

然后进行配置就好了， YCM 是通过 Vim 的omnifunc机制来自动补全的，所以你需要为你想要支持的语言安装一个提供omnifunc接口的 Vim 插件。

我在另一篇博客中有详细介绍了自动补全、语法检查等配置。

项目树

这想必是 IDE 能提供的最大的好处之一，在 Vim 中可以使用NERDTree来显示文件树，它的快捷键非常多，所以和 Vim 一样的越用越爽。

Plugin 'scrooloose/nerdtree'
" 这个插件可以显示文件的 Git 增删状态
Plugin 'Xuyuanp/nerdtree-git-plugin'

这里给出我的一些 NERDTree 配置：

" Ctrl+N 打开 /关闭
map <C-n> :NERDTreeToggle<CR>
" 当不带参数打开 Vim 时自动加载项目树
autocmd StdinReadPre * let s:std_in=1
autocmd VimEnter * if argc() == 0 && !exists("s:std_in") | NERDTree | endif
" 当所有文件关闭时关闭项目树窗格
autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTreeType") && b:NERDTreeType == "primary") | q | endif
" 不显示这些文件
let NERDTreeIgnore=['\.pyc$', '\~$', 'node_modules'] "ignore files in NERDTree
" 不显示项目树上额外的信息，例如帮助、提示什么的
let NERDTreeMinimalUI=1

全局搜索

WebStrom 的全局搜索是我当初使用它的主要原因；而现在全局搜索总是突然崩溃，也是我放弃 WebStorm 而转到 Vim 的主要原因。

成也萧何败萧何

安装ctrlp：

Plugin 'kien/ctrlp.vim'

然后按下C-P，便可以全局搜索啦。使用C-j, C-k上下翻页，<Enter>打开选中文件。同样，给出一些有用的配置：

let g:ctrlp_working_path_mode = 'ra'
set wildignore+=*/tmp/*,*/node_modules/*,*.so,*.swp,*.zip     
let g:ctrlp_custom_ignore = {'dir':  '\v[\/]\.(git|hg|svn)$', 'file': '\v\.(exe|so|dll)$'}

剪切板

剪切板想必是所有 Vim 用户的痛。但是！在 Mac 下只需要设置：

set clipboard=unnamed

你在 Vim 中 copy 的所有内容都会上系统剪切板。在 Vim 中拷贝内容时，可以切换到拷贝模式防止自动缩进和补全。我的快捷键是<F9>：

set pastetoggle=<F9>

状态栏

有没有注意到我酷炫的状态栏？安装一个powerline：

status-bar

Plugin 'Lokaltog/powerline', {'rtp': 'powerline/bindings/vim/'}

此外，为了正确显示 Powerline 的图标，还需要一些设置：

set guifont=Inconsolata\ for\ Powerline:h15
let g:Powerline_symbols = 'fancy'
set encoding=utf-8
set t_Co=256
set fillchars+=stl:\ ,stlnc:\
set term=xterm-256color
set termencoding=utf-8

然后在系统字体库中导入powerline font，如果是 Mac 的话可以使用 Font Book 来导入。然后需要设置 terminal （ iTerm ）的 non-ASCII 字体为 PowerlineSymboles ：

iterm powerline font

注释、反注释

NERDCommenter是个不错的工具，支持非常多的语言：

Plugin 'scrooloose/nerdcommenter'   " commenter: \cc \cu

然后按下\cc来注释当前航，\cu来反注释，\c<space>来切换注释。其中的\\是可以设置的：

let mapleader=';'

Loremipsum

哈哈如果你没见过标题中的这个词就可以跳过了。前端开发中通常需要添加一些占位符来让页面看起来有内容又像人话， loremipsum （拉丁语）通常就是这些占位符的起始字符。比如下面一段：

Sodales eget, leo. Sed ligula augue, cursus et, posuere non, mollis sit
amet, est. Mauris massa. Proin hendrerit massa. Phasellus eu purus. Donec est
neque, dignissim a, eleifend vitae, lobortis ut.

安装一个loremipsum即可：

Plugin 'vim-scripts/loremipsum'

我还加了点设置来方便控制长度：

inoremap Lorem <Esc><Esc>:Loremipsum 20<CR>
inoremap Ipsum <Esc><Esc>:Loremipsum 70<CR>

这样，当输入Lorem时产生长度为 20 单词的占位符，输入Ipsum时产生长度为 70 的占位符。
参考链接：

原文出自我自己的博客，喜欢前端开发、 Linux 和 Vim 的 V 友欢迎访问我天码营的主页。

vim

plugin

窗格

set

94 条回复 • 2016-01-28 22:18:08 +08:00

183553404

2015-11-10 14:58:52 +08:00

个人认为 vim 和 Emacs 是计算机系统中最强大的两个编辑器,看了下楼主的主页,原来是 Linux 极客,难怪会用 HHKB .

az402

2015-11-10 16:29:15 +08:00

http://tianmaying.com/course/web-development

kingddc314

2015-11-10 16:30:06 +08:00

试试跳转插件： easymotion/vim-easymotion

az402

2015-11-10 16:30:18 +08:00

@tiange http://tianmaying.com/course/web-development
『为什么选择加入天马营？』
是个错别字吧

vitovan

2015-11-10 16:32:27 +08:00

Emacs 党撇着嘴走过～

kassadin

2015-11-10 16:38:52 +08:00

累不累

fising

2015-11-10 16:40:04 +08:00

累不累

fising

2015-11-10 16:40:12 +08:00

累不累

fhefh

2015-11-10 16:40:29 +08:00

mark 下~~~

root787

2015-11-10 16:40:47 +08:00

@kassadin 累不累＋ 1

chemzqm

2015-11-10 16:44:11 +08:00

缺少一个 IDE 最牛逼的东西智能感知 http://segmentfault.com/a/1190000003887409

doomgiant

2015-11-10 16:45:01 +08:00

觉得 VIM 配置麻烦，所以一直只是用来快速查看

不过 lz 想得详细，赞一个

iamleung

2015-11-10 16:52:34 +08:00

收藏了

chemzqm

2015-11-10 16:54:41 +08:00

其实 VIM 的插件都是些锦上添花的东西，最重要还是熟练掌握 VIM 中快速移动的技巧，所以我不得不推荐 https://github.com/wikitopian/hardmode

bigcoon

2015-11-10 16:59:01 +08:00

累不累

matrix67

2015-11-10 17:03:02 +08:00 via Android

用法错误， vim 大神讲究不用插件写代码，高亮都不开，逃

arfaWong

2015-11-10 17:07:55 +08:00

@kassadin 累不累 +10086
@fising 看到你的头像有点累

jswh

2015-11-10 17:27:31 +08:00

Vim 没有好的 php 补全引擎，所以尝试了一段时间还是用回了 PHPstorm

congeec

2015-11-10 17:58:34 +08:00

为什么不用 https://github.com/benmills/vimux ？

kmahyyg

2015-11-10 18:00:32 +08:00

好帖

liuxiaoxiaochen

2015-11-10 18:10:08 +08:00

vim 确实是非常非常好的编辑器这是不可争论的事实只有用过才知道为什么好哪里好，推荐想脱离鼠标束缚的程序员大哥试试，你在它身上花费的时间它会十倍百倍的还给你，绝对的。

xubingok

2015-11-10 18:21:08 +08:00

恕我直言.成熟的 IDE 比这个简单多了,功能也更强大..

allan888

2015-11-10 18:26:25 +08:00

真的看着觉得累， vim 对我纯粹就是 ssh 到别的机器的时候用的。
现在自从用 Transmit 这种工具以后能 ssh 上去的机器我也用本地的 sublime text 修改了。
我还是把你们投入到 vim 的热情和时间投入到 IDE 把。
有人说学 vim 省时间因为可以用一辈子而 IDE 老变动。其实基本多数不同的 IDE 都提供统一的键盘映射，而且不想学 IDE 肯定也懒得学新的工具和语言吧，不想学新的工具和语言，那 IDE 为什么总变动，总觉得哪里怪怪的？

robertding

2015-11-10 18:31:14 +08:00

vim 怎么都解决不了的问题: 丑

ewex

2015-11-10 18:35:05 +08:00

楼主累不累，写教程就好好地写，为毛挂你的链接（博客倒是不反感），感谢为我的 HOSTS 舔砖加瓦

tiange

2015-11-10 19:08:44 +08:00

@ewex 不送哪~~

tiange

2015-11-10 19:37:20 +08:00

@liuxiaoxiaochen 知音：）

Lucups

2015-11-10 20:09:41 +08:00

再好编辑器毕竟是编辑器，个人还是更喜欢 IDE 。
不过楼主把 Vim 配置得这么好看还是要赞一个，什么时候有时间也准备搞一搞

-------------------------------------
PHPStorm + Filco 忍者 87 路过...

anthonyeef

2015-11-10 20:10:40 +08:00

逛了一下楼主的博客，

从五月份到九月份，几乎每天都写一篇质量不低的博文。

也难怪能收割那么多 offer 了。

Rorysky

2015-11-10 20:23:33 +08:00

楼主博客头像（红衣吹笛）上的水印有一词 “ Instituke ” 不知是否是 “ Institute ” 之误？

MangixPanda

2015-11-10 20:27:29 +08:00

用 vim 快捷键的 Emacs 党赞一个

zwy

2015-11-10 20:35:43 +08:00

不建议过度配置 vi
看过不少人花了几周配置了一大堆插件，快捷键绑定之后，临时切换到服务器上用 vi 想改个东西都不会用了

tiange

2015-11-10 20:42:02 +08:00

@Lucups 鱼和熊掌不能兼得：）

tiange

2015-11-10 20:43:45 +08:00

@MangixPanda 谢谢：）有个性！

anthonyeef

2015-11-10 21:04:22 +08:00 via Android

@Rorysky 是德语

EarlGrey

2015-11-10 21:18:28 +08:00

握爪，我翻译了你参考资料里 realpython 那篇教程，可惜我自己还没设置完。。

Rorysky

2015-11-10 21:26:01 +08:00

@anthonyeef 为啥我各种搜都搜不到呢？

tiange

2015-11-10 22:26:45 +08:00

@EarlGrey 你的网站很不错啊！

tiange

2015-11-10 22:28:26 +08:00

@anthonyeef 比较喜欢分享，所以现在也做技术知识分享的产品：）

MCVector

2015-11-10 22:35:37 +08:00

@robertding 不丑不丑，可以自己换 color scheme 的，什么 solarized 都有的

fly2never

2015-11-10 22:49:23 +08:00

webStrom 内置 ideavim+acejump 爽翻

onceyoung

2015-11-10 22:56:33 +08:00

何必这样折腾自己，有这时间多写多少代码了。

tiange

2015-11-10 23:31:41 +08:00

@onceyoung 搞了一天，磨刀当真不误砍材功啊：）

thuai

2015-11-10 23:41:40 +08:00

你能开发 iOS 么？

tiange

2015-11-10 23:42:45 +08:00

@thuai 做过 ios 项目

Deeer

2015-11-11 00:24:46 +08:00

如果能开发 IOS 项目为我也想试试

uleh

2015-11-11 00:29:54 +08:00

为啥不直接用 IDE 呢。。

xiandao7997

2015-11-11 00:38:10 +08:00 via Android

感觉现在就是把 Vim/Emacs 变的越来越像 IDE, IDE 的操作变的越来越 Vim/Emacs.

kenshinhu

2015-11-11 01:03:48 +08:00

这个 mark 一下

zjmdp

2015-11-11 05:30:07 +08:00

为啥不是 webstorm 装一个插件呢，我最早也是用 vim 搭自己的"IDE"，后面真心觉得没有 IDE + vim 插件来得顺手

zjmdp

2015-11-11 05:32:22 +08:00

不知道楼主是否知道 janus 这个 repo ， https://github.com/carlhuda/janus

20015jjw

2015-11-11 05:40:54 +08:00

vim for life!

表示恨不得所有输入框都能用 vim ><

FrankFang128

2015-11-11 07:30:22 +08:00 via Android

连个像样的代码格式化都没有，跳转到定义也没有。

ldehai

2015-11-11 07:40:09 +08:00

用 atom 的飘过

vietor

2015-11-11 07:49:19 +08:00 via Android

vi 简单能改配置文件就行，不需要上到 vim 的插件系统。真正值得深入学习的是 Emacs 这种灵活自定义开发(注意是开发，不是配置)辅助功能的工具。

anthonyeef

2015-11-11 08:10:59 +08:00 via Android

@Rorysky 抱歉，昨天下意識就覺得是德語(很多德語&丹麥文最後都是 ke 結尾)，可能是我記錯了:(

aksoft

2015-11-11 08:41:02 +08:00

编辑器就是编辑器,叫什么 IDE
~~我以为有补全了

Wenwei

2015-11-11 09:41:39 +08:00

不错不错，我最近也重新用回了 vi ，效率杠杠的

t2doo

2015-11-11 09:46:54 +08:00

vim 大法好， sublime text 保平安。我还是用 ST 吧，舒心

yuwan

2015-11-11 09:56:00 +08:00

文章不错，不过用 vundle 来管理插件，难道不是 BundleInstall ？

linguofeng

2015-11-11 09:56:41 +08:00

教程不错，可惜已转 Atom ，不过终端还是 vim 方便

tiange

2015-11-11 10:06:49 +08:00 via iPhone

@20015jjw 同感！

fxxkgw

2015-11-11 10:21:03 +08:00

我真的好佩服那些用纯 vim+插件写 /调试代码的但是看了那些配置插件真的好累算了还是 IDE 吧

amon

2015-11-11 10:33:06 +08:00

vim 再牛逼也只是个编辑器，距离 IDE 还差十条街。
丑也是它的硬伤之一。
珍爱生命，远离折腾。

Fedor

2015-11-11 10:34:44 +08:00

这个全局搜索只能匹配文件名?

有没有全局搜索文件内容的?

robertding

2015-11-11 10:37:50 +08:00

@MCVector 我用的是自己定制的 molokai 可无论怎么定制, 字符界面的丑都改不了的.

tt7

2015-11-11 10:44:58 +08:00

vim 在经常需要远程到另一台主机下调代码的情景下很有用，比 xserver 或 scp / ftp etc. 快太多。

spark

2015-11-11 10:48:53 +08:00

maximum awesome <https://github.com/square/maximum-awesome>
加点自定义配置和插件，搞定！

POPOEVER

2015-11-11 10:59:21 +08:00

老老实实滚回去继续 Aptana

tiange

2015-11-11 11:32:30 +08:00

@xiandao7997 充分说明不想脱离 vim ，哈哈

ixiaozhi

2015-11-11 11:35:05 +08:00

累不累+1 我宁愿直接 Intellij IDE + 一个 Vim 插件搞定

MCVector

2015-11-11 12:25:36 +08:00

@robertding 不想在 Console 下用其实也有各种图形终端，可定制性还是蛮强的。作为一个最经常用的编辑器确实离不了啦。

robertding

2015-11-11 12:57:15 +08:00

@MCVector 对啊, 除了丑之外确实离不开了

tiange

2015-11-11 13:36:16 +08:00

@robertding 情人眼里出西施

O21

2015-11-11 13:45:40 +08:00

我就问一句累不累？

iloveayu

2015-11-11 13:50:06 +08:00

很适合在 Chromebook 这类终端上搞开发使用。

Geoion

2015-11-11 14:24:54 +08:00

一颗赛艇啊。

focux

2015-11-11 14:31:33 +08:00

不错， mark

nonoroazoro

2015-11-11 14:37:24 +08:00

这样是可以， LINUX 类系统比较好用吧。但如果像我这样 WINDOWS 下的，我更喜欢 VS+SUBLIMETEXT 。
商用 IDE 的强大，不是盖的。总的来看， VIM/EMACS 实在是配置起来太花时间，而且我敢说，就算配置了也 100%不可能完全满足我要的效果。
当然了，我现在用的也一样不能 100%满足，所以多个 EDITOR 补充吧，其实挺累的。

tiange

2015-11-11 15:01:46 +08:00

@nonoroazoro 自己顺手就好：）