面向web前端及node开发人员的vim配置

鉴于 window 下基本用不到 vim，所以下面内容不再提及 window，具体可以在相应 github 中查看手册 操作基础：已装有上有 nodejs(npm)。没装的可以移步官网：https://nodejs.org/en/ 另有 sublime 配置方式，请移步：sublime配置及使用技巧

插件管理工具 pathogen

github地址: github

mkdir -p ~/.vim/autoload ~/.vim/bundle && \ curl -LSso ~/.vim/autoload/pathogen.vim https://tpo.pe/pathogen.vim

插件

安装插件都在 ~/.vim/bundle/ 中安装，以下部分操作可能需要 root 权限

vim-sensible vim新人专属 github cd ~/.vim/bundle/ git clone git://github.com/tpope/vim-sensible.git Airline 界面优化 github cd ~/.vim/bundle/ git clone https://github.com/vim-airline/vim-airline-themes.git Airline 主题 github cd ~/.vim/bundle/ git clone https://github.com/vim-airline/vim-airline-themes ~/.vim/bundle/vim-airline-themes Emmet 快速建立html树 github cd ~/.vim/bundle/ git clone https://github.com/mattn/emmet-vim.git editorconfig 编辑器配置 github cd ~/.vim/bundle/ git clone https://github.com/editorconfig/editorconfig-vim.git

新建文件 vim ~/.vim/.editconfig (可自定义，通常放在项目根目录),键入以下设置：

root = true indent_style = space indent_size = 2 tab_width = 2 end_of_line = lf charset = utf-8 insert_final_newline = true trim_trailing_whitespace = true vim-multiple-cursors 支持多行编辑 github cd ~/.vim/bundle/ git clone https://github.com/terryma/vim-multiple-cursors.git unite-vim 快速管理项目中的文件 github cd ~/.vim/bundle/ git clone https://github.com/Shougo/unite.vim.git vim-javascript 缩进和语法支持 github cd ~/.vim/bundle/ git clone https://github.com/pangloss/vim-javascript.git jsDoc 对 vim-javascript 的补充，支持 es6和 TypeScirpt github cd ~/.vim/bundle/ git clone https://github.com/heavenshell/vim-jsdoc.git Fugitive git版本控制 github git clone git://github.com/tpope/vim-fugitive.git vim -u NONE -c "helptags vim-fugitive/doc" -c q syntastic 语法检查 github cd ~/.vim/bundle/ git clone --depth=1 https://github.com/vim-syntastic/syntastic.git

syntastic 需要一些其他的

npm install -g jslint npm install -g csslint cd ~/.vim/bundle/ git clone https://github.com/hail2u/vim-css3-syntax.git brew install tidy-html5 vim-css-color 自动预览颜色 github cd ~/.vim/bundle/ git clone https://github.com/skammer/vim-css-color.git vim-snipmate 自动完成代码块 github cd ~/.vim/bundle/ git clone https://github.com/tomtom/tlib_vim.git git clone https://github.com/MarcWeber/vim-addon-mw-utils.git git clone https://github.com/garbas/vim-snipmate.git # Optional: git clone https://github.com/honza/vim-snippets.git vim-surround 辅助格式控制(用于括号、引号等) github cd ~/.vim/bundle/ git clone git://github.com/tpope/vim-surround.git jsbeauty-vim 自动美化代码，可配合 vim-autoformat 使用 github cd ~/.vim/bundle/ git clone https://github.com/maksimr/vim-jsbeautify.git cd vim-jsbeautify && git submodule update --init --recursive vim-markdown 把高亮功能推广到 markdown github cd ~/.vim/bundle/ git clone https://github.com/plasticboy/vim-markdown.git vim-instant-markdown 预览 markdown githjub npm -g install instant-markdown-d vim-markdown-toc 为 markdown 生成标题 github cd ~/.vim/bundle/ git clone https://github.com/mzlogin/vim-markdown-toc.git youcompleteme 代码提示和补全 github 这个放在最后因为它比较复杂。属于可选的插件，根据自己需求安装。 首先，在 vim normal 模式输入 :version 查看其版本，要求版本大于7.4.143, 否则更新它。 其次，在 vim normal 模式输入 :echo has('python') || has('python3'), 如果输出为0，请更新 vim 以支持 python。 之后，在终端输入： cd ~/.vim/bundle/ git clone https://github.com/Valloric/YouCompleteMe.git cd ~/.vim/bundle/YouCompleteMe/ git submodule update --init --recursive cd ~/.vim/bundle/YouCompleteMe/third_party/ycmd/third_party/tern_runtime npm install --production

如果你需要支持 typescript，安装：

npm install -g typescript vim-less les支持 github cd ~/.vim/bundle/ git clone https://github.com/groenewege/vim-less

到这里还没有完，作为前端人，这个还不能正常工作，它需要一些依赖，下面我们来安装这些依赖：

安装 tern github 查看 回到 bundle 目录 安装 cd ~/.vim/bundle git clone https://github.com/ternjs/tern_for_vim.git cd ~/.vim/bundle/tern_for_vim npm install

之后需要在您的项目根目录建立一个 .tern-project 文件，没有内容，空白即可。该文件内部结构如下:

{ "libs": [ "browser", "jquery" ], "loadEagerly": [ "importantfile.js" ], "plugins": { "requirejs": { "baseURL": "./", "paths": {} } } }

此部分详细配置在此 http://ternjs.net/doc/manual.html

apt-vim 自动管理插件 github 这里再安装一个插件自动管理插件，也比较麻烦，根据自己需求安装： 自动安装 curl -sL https://raw.githubusercontent.com/egalpin/apt-vim/master/install.sh | sh

2.手动安装 需要Python2.7.x或Python3.0+

cd ~/.vim/bundle/ git clone https://github.com/egalpin/apt-vim.git cd apt-vim sudo ./apt-vim init

编辑 ~/.bashrc 或 ~/.bash_profile , 添加下面一句话

export PATH=$PATH:~/.vimpkg/bin

编辑 ~/.vimrc 添加：

execute pathogen#infect() call pathogen#helptags()

继续在终端执行：

source ~/.bashrc apt-vim install

如果这里提示了：Completed successfully. 那就大功告成了。

到此为止，作为一个前端人的 vim 就基本搭建好了，如果还有什么好用的插件欢迎分享交流，如果你觉得这些插件还足够，可以去知乎、stackoverflow、或 github 上再挖掘一些。一些更高级插件会随着博主的积累，不断更新这篇内容的，欢迎关注。

下面附了我 .vimrc 和 .editorconfig 文件的内容：

"vimrc "vim original config set ignorecase " ignore upper- or lowercase in search model set smartcase " if there is uppercase in search string ignore 'ignorecase' setting. it only works with 'ignorecase' setting set autowrite " auto write changes into file after :next、:rewind、:last、:first、:previous、:stop、:suspend、:tag、:!、:make、<C-]> or <C-^> runs, as well as jumps to another file with :buffer、<C-O>、<C-I>、'{A-Z0-9}' or `{A-Z0-9}` set nocompatible "Donot compate with vi, to avoid some bugs filetype on "check the file type set autoindent " use auto-indentation set smartindent " use smart indentation set tabstop=2 " set the width of tab key set softtabstop=2 " set the width of soft key set shiftwidth=2 " auto-indent with 2 spaces set backspace=2 " enable to use backspace set showmatch " show the matched braces set linebreak " wrap without breakword set whichwrap=b,s,<,>,[,] "jump to previous/next line when cursor at the head/end of line when input 'b'/'w' in normal model set relativenumber " show relative line number set previewwindow " show preview window set history=1000 " set command history to 1000 set laststatus=2 " show the last activited window's status line always set ruler " show line number and column number in status line "command line setting set showcmd " show inputted command in command line set showmode " show current model in command line set showmatch "show match brace set guioptions=T "remove the toolbar in GUI filetype on "check the file type "finding setting set incsearch " show matched words when input string set hlsearch "pathongen execute pathogen#infect() syntax on filetype plugin indent on "airline let g:airline_theme='molokai' "use a theme called 'molokai' let g:airline#extensions#tabline#enabled=1 "show the tab line on the top let g:airline_powerline_fonts=1 "use powerline fonts "emmet let g:user_emmet_mode='n' "only enable normal mode functions. let g:user_emmet_mode='inv' "enable all functions, which is equal to let g:user_emmet_mode='a' "enable all function in all mode. let g:user_emmet_install_global=0 autocmd FileType html,css EmmetInstall "enable for just html/css let g:user_emmet_leader_key='<C-Z>' "change the default key(<C-Y>) to <C-Z>, the trailing ',' still needs to be entered as well "editConfig let g:EditorConfig_exclude_patterns = ['fugitive://.*'] "ensure that this plugin works well with Tim Pope's fugitive let g:EditorConfig_exclude_patterns = ['scp://.*'] "avoid loading EditorConfig for any remote files over ssh let g:EditorConfig_exec_path = '~/.vim/.editorconfig' let g:editorconfig_Beautifier = '~/.vim/.editorconfig' "vim-javascript let g:javascript_plugin_jsdoc=1 "Enables syntax highlighting for JSDocs. let g:javascript_plugin_ngdoc=1 "Enables some additional syntax highlighting for NGDocs. Requires JSDoc plugin to be enabled as well. "jsDoc let g:jsdoc_enable_es6=1 "Enable to use ECMAScript6's Shorthand function, Arrow function. let g:javascript_plugin_flow=1 "Enables syntax highlighting for Flow. "syntastic set statusline+=%#warningmsg# set statusline+=%{SyntasticStatuslineFlag()} set statusline+=%* let g:syntastic_always_populate_loc_list = 1 let g:syntastic_auto_loc_list = 1 let g:syntastic_check_on_open = 1 let g:syntastic_check_on_wq = 0 let g:syntastic_enable_highlighting=1 "apt-vim execute pathogen#infect() call pathogen#helptags() "jsbeautify autocmd FileType javascript noremap <buffer> <c-f> :call JsBeautify()<cr> autocmd FileType json noremap <buffer> <c-f> :call JsonBeautify()<cr> autocmd FileType jsx noremap <buffer> <c-f> :call JsxBeautify()<cr> autocmd FileType html noremap <buffer> <c-f> :call HtmlBeautify()<cr> autocmd FileType css noremap <buffer> <c-f> :call CSSBeautify()<cr> "vimCSS3syntsx augroup VimCSS3Syntax autocmd! autocmd FileType css setlocal iskeyword+=- augroup END "vimCSScolor let g:cssColorVimDoNotMessMyUpdatetime = 1 "YCM let g:ycm_semantic_triggers = { 'scss,css': [ 're!^\s{2,4}', 're!:\s+' ], 'html': ['<', '"', '</', ' '] } "less2css let g:less_autocompile = 1 " 这是开关 设置1保存less自动生成css 设置0关闭 function! s:auto_less_compile() " {{{ if g:less_autocompile != 0 try let css_name = expand("%:r") . ".css" let less_name = expand("%") if filereadable(css_name) || 0 < getfsize(less_name) let cmd = ':!lessc '.less_name.' 'css_name.' ' silent execute cmd endif endtry endif endfunction " }}} autocmd BufWritePost *.less call s:auto_less_compile() ;.editorconfig root = true indent_style = space indent_size = 2 tab_width = 2 end_of_line = lf charset = utf-8 insert_final_newline = true trim_trailing_whitespace = true [**.js] path=~/.vim/bundle/js-beautify/js/lib/beautify.js bin=node [**.jsx] e4x = true