鉴于 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 权限
cd ~/.vim/bundle/
git clone git://github.com/tpope/vim-sensible.git
cd ~/.vim/bundle/
git clone https://github.com/vim-airline/vim-airline-themes.git
cd ~/.vim/bundle/
git clone https://github.com/vim-airline/vim-airline-themes ~/.vim/bundle/vim-airline-themes
cd ~/.vim/bundle/
git clone https://github.com/mattn/emmet-vim.git
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
cd ~/.vim/bundle/
git clone https://github.com/terryma/vim-multiple-cursors.git
cd ~/.vim/bundle/
git clone https://github.com/Shougo/unite.vim.git
cd ~/.vim/bundle/
git clone https://github.com/pangloss/vim-javascript.git
cd ~/.vim/bundle/
git clone https://github.com/heavenshell/vim-jsdoc.git
git clone git://github.com/tpope/vim-fugitive.git
vim -u NONE -c "helptags vim-fugitive/doc" -c q
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
cd ~/.vim/bundle/
git clone https://github.com/skammer/vim-css-color.git
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
cd ~/.vim/bundle/
git clone git://github.com/tpope/vim-surround.git
cd ~/.vim/bundle/
git clone https://github.com/maksimr/vim-jsbeautify.git
cd vim-jsbeautify && git submodule update --init --recursive
cd ~/.vim/bundle/
git clone https://github.com/plasticboy/vim-markdown.git
npm -g install instant-markdown-d
cd ~/.vim/bundle/
git clone https://github.com/mzlogin/vim-markdown-toc.git
:version
查看其版本,要求版本大于7.4.143, 否则更新它。 :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
cd ~/.vim/bundle/
git clone https://github.com/groenewege/vim-less
到这里还没有完,作为前端人,这个还不能正常工作,它需要一些依赖,下面我们来安装这些依赖:
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
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': ['<', '"', '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