O God, I could be bounded in a nut shell and count myself a king of infinite space （即使身在果壳之中，我仍自封为无限空间之王）

- Prince HamletHamlet, Scene 2, Act

面向前端开发者和TextMate粉丝的vim配置

May 30, 2009

vim-editor-icon1.pngtextmate.pngvim是编辑器中的神器，但是因为学习曲线比较陡，界面也仿佛从石器时代穿越，广大fashion的前端工作者们难免对其有距离感。其实vim最大的萌点有两个，其一是百科全书般的文本编辑功能，其二是可以随意定制，满足任何与编辑器相关的需求和偏好，比如下面这张便是我在macbook pro上运行vim的截图，不仅语法高亮可以冒充TextMate，功能也几乎一致。

picture-4.png

首先是做一个初始化配置脚本，在我的OSX10.5里是是~/.vimrc文件，这里只列出一些需要补充进去的设置：

  1. "设置语法高亮的配色，在GUI界面里使用我自定义的yytextmate.vim
  2. if has("gui_running")
  3. colorscheme yytextmate
  4. else
  5. colorscheme slate
  6. endif
  7. "查找编码的规则（vim7默认都用utf-8，打开包含gbk字符的文件会出现乱码）
  8. set fileencodings=utf-8,ucs-bom,gb18030,gbk,gb2312,cp936
  9. "GUI界面里的字体，默认有抗锯齿
  10. set guifont=Monaco:h12:cANSI
  11. "行间距，如果默认值太小，代码会非常纠结
  12. set linespace=4                                                                       
  13. "用<>调整缩进时的长度
  14. set shiftwidth=4
  15. "制表符的长度，统一为4个空格的宽度
  16. set tabstop=4
  17. "初始窗口的宽度
  18. set columns=195
  19. "初始窗口的高度
  20. set lines=45
  21. "初始窗口的位置
  22. winpos 52 42
  23.  
  24. "显示行号
  25. set number
  26. "行号栏的宽度
  27. set numberwidth=4
  28.  "禁止自动换行
  29. set nowrap
  30. "在输入命令时列出匹配项目，也就是截图底部的效果
  31. set wildmenu
  32. "显示光标位置
  33. set ruler
  34. "分割窗口时保持相等的宽/高
  35. set equalalways
  36.  
  37.  "匹配括号的规则，增加针对html的<>
  38. set matchpairs=(:),{:},[:],<:>
  39. "让退格，空格，上下箭头遇到行首行尾时自动移到下一行（包括insert模式）
  40. set whichwrap=b,s,<,>,[,]
  41. "取消自动备份
  42. set nobackup
  43. "保存关闭文件之前保留一个备份
  44. set writebackup
  45.  
  46. "js语法高亮脚本的设置
  47. let g:javascript_enable_domhtmlcss=1
  48.  
  49. "设置自定义的<leader>快捷键
  50. let mapleader=","
  51. let g:mapleader=","
  52.  
  53. """"""""""""""""""""""""""""""
  54. " bufExplorer插件的设置
  55. """"""""""""""""""""""""""""""
  56. let g:bufExplorerSortBy='mru'
  57. let g:bufExplorerSplitRight=0     
  58. let g:bufExplorerSplitVertical=1    .
  59. let g:bufExplorerSplitVertSize = 30 
  60. let g:bufExplorerUseCurrentWindow=1 
  61. autocmd BufWinEnter \[Buf\ List\] setl nonumber
  62.  
  63. """"""""""""""""""""""""""""""
  64. " winManager插件的设置
  65. """"""""""""""""""""""""""""""
  66. let g:winManagerWindowLayout = "BufExplorer,FileExplorer|TagList"
  67. let g:winManagerWidth = 30
  68. let g:defaultExplorer = 0
  69. nmap <silent> <leader>wm :WMToggle<cr>
  70.  
  71. """"""""""""""""""""""""""""""
  72. " netrw插件的快捷键
  73. """"""""""""""""""""""""""""""
  74. let g:netrw_winsize = 30
  75. nmap <silent> <leader>fe :Sexplore!<cr>
  76.  
  77. """"""""""""""""""""""""""""""
  78. " NERDTree插件的快捷键
  79. """"""""""""""""""""""""""""""
  80. nmap <silent> <leader>nt :NERDTree<cr>
  81.  
  82.  
  83. "把常用的ctrl快捷键映射到苹果键上（只保留cmd+c/cmd+v/cmd+z原有的功能）
  84. map <D-y> <C-y>
  85. map <D-e> <C-e>
  86. map <D-f> <C-f>
  87. map <D-b> <C-b>
  88. map <D-u> <C-u>
  89. map <D-d> <C-d>
  90. map <D-w> <C-w>
  91. map <D-r> <C-r>
  92. map <D-o> <C-o>
  93. map <D-i> <C-i>
  94. map <D-g> <C-g>
  95. map <D-p> <C-p>
  96. map <D-n> <C-n>
  97. map <D-a> <C-a>
  98. cmap <D-d> <C-d>

2009.6.7更新：最新的vimrc和其他脚本已经上传到google code的项目仓库里了


=================步骤二的分割线===================


然后在个人配置目录里添加语法高亮脚本（~/.vim/syntax/），其中html和css可以直接把vim7自带的脚本复制出来（$VIMRUNTIME/syntax/），js的脚本则推荐用这个：

JavaScript syntax : Better JavaScrirpt syntax support

包含更多的关键字以及自动折叠代码的功能，也能在html文件内支持js语法高亮，需要注意的是如果要支持dom方法的关键字，需要在.vimrc里设置一个全局变量javascript_enable_domhtmlcss

我还用了这里的html.vim。


=================步骤三的分割线===================


接下来就可以对照着syntax脚本，给每个语法组设置颜色，配色脚本需要放到~/.vim/colors/里，然后在.vimrc里用colorscheme命令选定。colors脚本只需要一个，因为syntax脚本末尾都会把自定义的语法组链接到标准语法组，比如：

  1. HiLink javaScriptDocComment  Comment

所以只需要定义一套针对标准语法组的配色方案，再通过修改syntax脚本里来调整相应语言的配色。我尝试过针对不同文件类型使用不同的配色方案，发现相当麻烦，需要在切换/打开/关闭缓冲区和窗口的时候都用colorscheme重置配色：

  1. autocmd BufNewFile,BufRead,BufEnter,WinEnter,FileType *.html,*.htm colorscheme delek

而且colorscheme会影响整个窗口（一个vim进程实例），如果在窗口内同时分割显示了几个文件，即使文件类型不同，也会同时改变颜色……

我平时最喜欢TextMate的Blackboard主题（大概是因为里面有橙色罢XD），在Aptana上也仿制过（配置文件：yytextmate.col），这次是直接在vim的slate主题基础上修改出来的，比vim.org上面那个blackboard.vim要更完善～

我的colors脚本：yytextmate.vim
我调整过的syntax脚本：javascript.vim, html.vim


=================步骤四的分割线===================


按照由外向内的顺序，现在该折腾功能了，首先是缩进插件，vim也自带有智能缩进功能，需要开启autoindent和smartindent参数，但是在编辑js代码的时候效果很不好，对于python这种靠缩进活命的语言就更不能忍了，因此至少需要装以下三个插件：

IndentAnything : Write indentations or enhance existing indentations without writing code
Javascript Indentation : Indentation for Javascript
indent/python.vim : An alternative indentation script for python

第一个放到~/.vim/plugin/里，后两个放在~/.vim/indent/里


=================步骤五的分割线===================


textmate.png接下来终于要来实现TextMate最重要的功能了，TextMate之所以被称作地上最贵麦上最强的编辑器，就是因为支持大量可以通过tab或其他快捷键发动的强力Bundles，这些Bundles可以分为两种类型，一种是针对编辑器的内容执行指令（称作command），比如直接执行shell脚本，压缩js代码，对html转义，格式化JSON，编译swf等等，而指令界面是vim的核心，不但可以直接执行shell命令，也可以通过设置键位映射和宏，把复杂的操作绑定成简单的快捷键，因此这类功能原本就是vim的强项。

另一种类型的Bundles主要用来帮助程序员快速开发，通过简短的缩写＋tab键直接生成所需的代码模板（称作snippet），然后依然用tab在模板中需要改动的位置之间跳转，整个过程不需要鼠标定位，非常高效，是一种比大型IDE里常见的”code hinting”更实用的智能补全功能。

snipMate : TextMate-style snippets for Vim

上面这个非常“新”的插件让vim也具备了同样的功能，而且几乎是跟TextMate完全兼容的移植，比如这是从TextMate里取出的snippet源码：

  1. ${1:class_name}.prototype.${2:method_name} = function(${3:first_argument}) {
  2.     ${0:// body...}
  3. };

${}标签是代码插入后可以通过tab跳转的“可编辑”位置，其中的序号表示跳转顺序，冒号后的字符是默认内容。这段代码只要在前面加上snippet proto就可以直接放进~/.vim/snippets/javascript.snippets里，通过proto触发

把常见的程序结构抽象成snippet可以节省很多重复输入，比如这是我定义的一个module模式：

  1. snippet module
  2.     /**
  3.      * ${5:Describe what this module does}
  4.      * @param {object} ${6:paramName}
  5.      */
  6.     var ${1:classname} = (function(){
  7.         var $1Object = {
  8.             ${2:privateMethod1}: function(){
  9.                
  10.             },
  11.             ${3:privateMethod2}: function(){
  12.                
  13.             }
  14.         };
  15.         return function(opt){
  16.             var publicObj = {
  17.                 options: {},
  18.                 $2: $1Object.$2,
  19.                 $3: $1Object.$3${4:,} 
  20.             };
  21.             $.extend(publicObj.options, opt);
  22.             return publicObj;
  23.         };
  24.     })();

修改过程中会看到$1,$2,$3自动更新成你键入的名字。

我修改过的完整javascript.snippets：http://code.google.com/p/yy-vimscript/source/browse/trunk/snippets/javascript.snippets

实际上还有一个比较老牌的插件也致力于实现同样的snippet功能：

snippetsEmu : An attempt to emulate TextMate’s snippet expansion

但是它支持的模板语法比TextMate差很多，跟上面相同的prototype模板要通过这种形式定义：

  1. let st = g:snip_start_tag
  2. let et = g:snip_end_tag
  3. let cd = g:snip_elem_delim
  4.  
  5. exec "Snippet proto ".st."className".et.".prototype.".st."methodName".et." = function(".st.et.")<CR>{<CR>".st.et."<CR>};<CR>".st.et

缩进容易出错，不支持用序号设定跳转顺序，安装过程也比snipMate繁复，所以被我毫不留恋的淘汰了……

为了实现更广泛的智能补全，还需要一个必装插件：

SuperTab continued. : Do all your insert-mode completion with Tab.

SuperTab让任意字符都可以通过tab补全，比较取巧的是，它会在缓冲区的上下文中寻找匹配的词来补全，因此不需要附带很庞大的API数据。


=================步骤六的分割线===================


下一步需要增强的是文件/项目管理，vim虽然自带一个FileExplorer（直接编辑一个目录时会调用它，比如:e .），还有上面提到过的wildmenu的强力辅助，但是与常见的GUI编辑器和IDE相比，仍然不太直观，因此以下插件值得一装：

The NERD tree : A tree explorer plugin for navigating the filesystem
我最喜欢的文件导航工具，设置了快捷键,nt直接在侧面打开

bufexplorer : Buffer Explorer / Browser
缓冲区导航

winmanager : A windows style IDE for Vim 6.0
把bufexploer和FileExplorer集成在左侧，类似IDE的效果，这个功能不足以让我放弃NERDTree……而且这个插件似乎很久没更新了，连支持Vim7的版本都没有，但是很多人喜欢，所以也推荐一下……

TaskList.vim : Eclipse like task list
实现Eclipse的任务列表

project.tar.gz : Organize/Navigate projects of files
项目导航工具，不过没有Eclipse好用，需要写配置脚本，跟TextMate那种拖来拖去的drawer就更不能比了……


=================步骤七的分割线===================


最后推荐的插件都是开发工具：

vcscommand.vim : CVS/SVN/SVK/git integration plugin
SVN/git管理工具，这个是必备罢。没有GUI菜单，不过快捷键也很方便，而且VimDiff是很棒的比较工具

javaScriptLint.vim : Displays JavaScript Lint warnings in the quickfix error window
看仔细啦～这个不是道格拉斯老爷子的JSLint，那个东西虽然强大（以前没觉得，最近在《代码之美》里看到道格拉斯老爷子描述了“递归下降分析”＋“运算符优先级技术”的动态语言解释器，才知道原来JSLint和JSON parser只是老爷子晒技术的承载体……），但是由于把规范约束在一个JS的安全子集上，适用面不广，设置起来也麻烦，在实际开发工作中未必实用。而这个Lint就很中规中矩，当然也没自己折腾解释器啦，直接用了Mozilla的js引擎，安装也很方便，提供一个conf文件可以设置警告条件。这个vim插件装上后，保存js文件时都会自动校验代码并显示一个提示信息窗口。

matchit : extended % matching for HTML, LaTeX, and many other languages
vim里的%命令可以在嵌套字符之间跳转（比如括号和引号，我在上面的.vimrc文件里增加了html的<>），这个插件将它的功能扩展到嵌套标签和语句

To be continue…

posted in JavaScript, OpenSource, 代码, 工具 by Dexter.Yy

Follow comments via the RSS Feed | Leave a comment | Trackback URL

22 Comments to "面向前端开发者和TextMate粉丝的vim配置"

  1. KarasAya wrote:

    不错，推荐你使用一下一下exVim, 或许能够帮你解决更多类似的问题 http://code.google.com/p/exvim/
    :)

    Link | May 31st, 2009 at 7:27 am

  2. longines wrote:

    最喜欢VIM,试试看

    Link | May 31st, 2009 at 8:58 pm

  3. Jason Lee wrote:

    哪你是用Textmate还是VIM呢？两个东西一起用，操作会混乱

    Link | June 2nd, 2009 at 1:26 pm

  4. cloudchen wrote:

    自己的经验, vim中tab不能多开, 最多2个. 否则和buffer一起使用, 会彻底混乱的.
    vim写js/html一直快不起来. 尤其是html, 调试还是个问题.
    web开发还是coda之类ide来得好

    Link | June 2nd, 2009 at 2:31 pm

  5. qwer wrote:

    强帖留名

    Link | June 2nd, 2009 at 7:22 pm

  6. 爱在戏院前 wrote:

    能否写个windows下的教程…..

    Link | June 4th, 2009 at 12:37 am

  7. 爱在戏院前 wrote:

    ….配色文件能不能共享一下?

    Link | June 4th, 2009 at 12:54 am

  8. 爱在戏院前 wrote:

    好吧,我承认没有仔细看清楚

    Link | June 4th, 2009 at 1:55 am

  9. dexter_yy wrote:

    我觉得tab可以当作类似mac桌面Spaces的东西，而buffer就只是任务管理器～概念很清晰～
    写html要找到合适的插件，有的插件帮倒忙，比如我用过一个把tab都改成了自动匹配位置和移动……
    Coda我用过一段时间，修改缩进的时候很麻烦，只是管理项目和文件的时候方便，对代码编辑的效率似乎没任何帮助……

    Link | June 7th, 2009 at 2:45 pm

  10. dexter_yy wrote:

    写东西都用vim，我的目的就是让vim使用起来跟textmate一样舒服XD

    Link | June 7th, 2009 at 2:47 pm

  11. dexter_yy wrote:

    thx!

    Link | June 7th, 2009 at 2:49 pm

  12. qwer wrote:

    windows下基本上差别不大

    Link | June 14th, 2009 at 11:23 pm

  13. frePerl wrote:

    ”
    # “初始窗口的宽度
    # set columns=195
    # “初始窗口的高度
    # set lines=45
    ”
    这个部分我觉得同样添加：
    “if has(“gui_running”) || has (“gui_macvim”)”条件比较好，象我经常在bash下面用vi编辑配置文件，一用vi或者vim命令终端也跟着放大了。

    Link | June 27th, 2009 at 6:06 pm

  14. skargor wrote:

    如果直接编辑在 .gvimrc 就不会影响 bash 下的 vim 了

    Link | June 28th, 2009 at 1:59 pm

  15. PHP Blog | Mac OS X 上的PHP开发环境 wrote:

    [...] Dexter.Yy： 面向前端开发者和TextMate粉丝的vim配置 [...]

    Link | June 28th, 2009 at 6:25 pm

  16. SWX wrote:

    赞一个，真是不错。

    一直感觉MacVIM不大好配置。而且Mac下的中文输入法也不那么舒服，所以在Mac下一直没怎么认真配过这个。

    Link | August 7th, 2009 at 10:07 am

  17. Sun wrote:

    gvim用那个 _vimrc 配置文件,vim菜单都成了乱码,不知道怎么正确配置,请指导下..偶是VIM菜鸟..

    Link | November 16th, 2009 at 11:32 pm

  18. dexter_yy wrote:

    你说的gvim是指linux里的么，我把mac里的.vimrc和.vim直接复制到ubuntu里用，没发现什么问题，你看看你用的vimrc是不是google code的最新版：http://code.google.com/p/yy-vimscript/source/browse/trunk/vimrc

    有针对linux做一些修改，比如字体：

    if MySys() == “mac”
    set guifont=TextMate_Regular:h13
    set guifontwide=Hei_Regular:h13
    elseif MySys() == “linux”
    set guifont=Monospace
    endif

    还有一些GUI的配置只适用于MacVim，比如：

    if has(“gui_macvim”)
    set guioptions-=T “egmrt

    Link | November 18th, 2009 at 3:08 pm

  19. Sun wrote:

    我用的是 Windows 下面的 gvim, 用的配置文件是 google code 中的最新版, 完全替换_vimrc后, 就杯具了, 菜单, 工具栏全部都是乱码..

    Link | November 22nd, 2009 at 11:09 pm

  20. Sun wrote:

    找到原因, gvim 是中文版的, 配置文件中有一句 set encoding=utf-8, 直接导致乱码…注释之…再次感谢YY的回复

    Link | November 23rd, 2009 at 12:08 am

  21. sleep2death wrote:

    我擦，搜索vim的textmate配色方案竟然搜索到你这里了…特地拜一下。

    Link | February 14th, 2010 at 2:34 pm

  22. 冷焰 wrote:

    macvim的左边的那个列目录你是怎么实现的呀

    Link | March 10th, 2010 at 1:03 am

Leave Your Comment

YY in Limbo (混沌海狂想) © Dexter.Yy

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution - NonCommercial - ShareAlike 3.0(署名-非商业性使用-相同方式共享).
Creative Commons License