Time is not your enemy, forever is.

- Fall-from-GracePlanescape: Torment

面向前端开发者和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

27 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

  23. kun10 wrote:

    学习vim中，不错～～

    Link | July 31st, 2010 at 2:04 pm

  24. pinkguy wrote:

    这个相当华丽啊～～

    Link | September 4th, 2010 at 8:19 pm

  25. lee wrote:

    请教怎么调用浏览器查看效果。。
    一直很想使用vim，定制性强
    但是不懂如何做到像coda那样可以分屏所见即得。
    有插件可以实现么？

    Link | June 13th, 2011 at 9:53 pm

  26. Priervids wrote:

    This is prada aggregate with despatch order.Prada Men’s latest the craze dope,such as Prada shekels may be bring about in miscellaneous online shops,We also administer tote bag Prada and Prada,Prada relief offers unfettered shipping from the excellent quality.Enjoy your shopping with confidence.
    prada
    プラダ　財布
    プラダ　メンズ
    プラダ　メンズ : http://www.pradabagoutletjp.com/

    Link | May 16th, 2012 at 1:29 pm

  27. longchamp sydney wrote:

    A powerful share, I just given this onto a colleague who was doing a bit of analysis on this. And he in truth bought me breakfast as a result of I found it for him.. smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading more on this topic. If possible, as you grow to be expertise, would you mind updating your weblog with extra particulars? It’s highly useful for me. Big thumb up for this weblog submit!

    Link | May 16th, 2012 at 1:34 pm

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