使用VIM开发Web前端

12 September 2013

使用VIM作为前端开发工具

VIM配置：

VIM基本配置：

 " 启用鼠标，文本输入时隐藏光标
 set mouse=a
 set mousehide

 " 启用文件类型检测
 filetype plugin on

 " 显示行号
 set number

 " 显示当前VIM指令
 set showcmd

VIM编码配置：

 set encoding=utf-8
 set fileencoding=chinese
 set fileencodings=ucs-bom,utf-8,chinese
 set fileformats=unix,dos
 set ambiwidth=double

VIM查找：

 " 高亮搜索结果
 set hlsearch

 " 回车以取消高亮效果
 nnoremap <CR> :nohlsearch<CR><CR>

 " 查找不论大小写
 set ignorecase

 " Visual模式下、选中一段文本并替换，映射为快捷键ctrl-r
 vnoremap <C-r> "hy:%s/<C-r>h//gc<left><left><left>

VIM文本格式：

 " Tab宽度、展开Tab等
 set shiftwidth=4
 set tabstop=4
 set expandtab
 set softtabstop=4
 set autoindent
 set backspace=indent,eol,start

VIM状态栏：

 if has('statusline')
     set laststatus=2

     set laststatus=2
     set statusline=%<%f\ " 文件名
     set statusline+=%w%h%m%r " 文件状态
     set statusline+=\ [%{&ff}/%Y] " 文件类型. 如unix/MKD，unix格式markdown文本
     set statusline+=\ [%{getcwd()}] " 文件路径
     set statusline+=\ [%{fugitive#statusline()}] " Git分支
     set statusline+=%=%-14.(%l,%c%V%)\ %p%% " 行列、文件进度信息
 endif

VIM文本复制、粘贴、缩进快捷键配置

 " 从VIM中拷贝至剪贴板，需先安装vim-gui-common
 vmap <Leader>y "+y

 " 复制从光标处到行末的文本段
 nnoremap Y y$

 " 文本缩进、取消缩进
 vnoremap < <gv
 vnoremap > >gv

VIM插件：

安装Bundle：

 git clone http://github.com/gmarik/vundle ~/.vim/

编辑vimrc，添加插件：

 " Vundle settings
 filetype off
 set rtp+=~/.vim/bundle/vundle/
 call vundle#rc()
 Bundle "gmarik/vundle"
 Bundle "scrooloose/nerdtree"
 Bundle "scrooloose/nerdcommenter"
 Bundle "majutsushi/tagbar"
 Bundle "vim-scripts/cscope_macros.vim"
 Bundle "jistr/vim-nerdtree-tabs"
 Bundle "Shougo/neocomplcache"
 Bundle "othree/html5.vim"
 Bundle "scrooloose/syntastic"
 Bundle "pangloss/vim-javascript"
 Bundle "maksimr/vim-jsbeautify"
 Bundle "plasticboy/vim-markdown"
 Bundle "vim-scripts/matrix.vim--Yang"
 Bundle "skammer/vim-css-color"
 Bundle "tpope/vim-fugitive"
 filetype plugin indent on

进入VIM，执行BundleInstall
每个插件配置可以详见Github项目主页

效果预览：

Vim-color插件：

Vim-Git插件：

web 6