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

摘要：之后，在终端输入如果你需要支持，安装支持到这里还没有完，作为前端人，这个还不能正常工作，它需要一些依赖，下面我们来安装这些依赖安装查看回到目录安装之后需要在您的项目根目录建立一个文件，没有内容，空白即可。

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

另有 sublime 配置方式，请移步：sublime配置及使用技巧

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、 or  runs, as well as jumps to another file with :buffer、、、"{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=""    "change the default key() to ,  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    :call JsBeautify()
autocmd FileType json noremap   :call JsonBeautify()
autocmd FileType jsx noremap   :call JsxBeautify()
autocmd FileType html noremap   :call HtmlBeautify()
autocmd FileType css noremap   :call CSSBeautify()

"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": ["<", """, "
;.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