如何用Vim搭建IDE?


推薦:http://harttle.com/2015/07/18/vim-cpp.html

轉自:http://harttle.com/2015/11/04/vim-ide.html

一年前我從Vim切換到了WebStorm,是因為WebStorm強大的重構功能,以及Super Search功能。涉及多文件編輯和重構時WebStorm的優勢便非常明顯。

最近到手了HHKB,從鍵盤到觸摸板的切換還是挺麻煩的,於是Vim編輯的需求又來了。。加之WebStorm經常假死,我決定重新啟用Vim。同時重新打造了我的Vim,使它能夠滿足我在IDE中的所有需求。這篇文章便來記述整個過程,或許有些幫助。先上圖:

vim ide

上圖中,下面的Console是通過Tmux搞的。Tmux的配置和使用參見:優雅地使用命令行:Tmux終端復用

准備工作

安裝Git、Homebrew(如果你是Mac),並安裝新版本的Vim(>=7.3)。一般linux發行版都會預裝Vim,你需要檢查一下vim的版本:

$ vim --version VIM - Vi IMproved 7.4 (2013 Aug 10, compiled Jul 4 2015 01:13:13) MacOS X (unix) version Included patches: 1-712 Compiled by Homebrew 

如果上述命令失敗,那么你需要安裝一個Vim~ 這里提供了Vim的基本快捷鍵備忘錄。

OSX

$ brew update $ brew install vim 

Linux

apt-get install vim   # ubuntu pacman -S vim # archlinux yum install vim # centos 

Vundle

Vundle是基於Git的vim插件管理工具,是目前最推薦的工具。之前我的.vim下手動維護着各種插件,目錄結構看起來是這樣的:

|- doc/
|  |- emmet.txt
|  |- NERDCommenter.txt
|  |- ...
|- plugin/
|  |- emmet.vim
|  |- NERDCommenter.vim
|  |- ...
|- autoload/
|  |- emmet.vim
|  |- NERDCommenter.vim
|  |- ...
|- ftplugin/

使用Vundle后變成了這樣:

|- bundle/
|  |- emmet/
|  |  |- doc/
|  |  |- autoload/
|  |- NERDCommenter/
|  |  |- doc/
|  |  |- autoload/
|- ftplugin/

其中ftplugin里面是我的配置,比如編譯運行的快捷鍵等。另外,如果你在用Git同步Vim配置的話,可以把bundle/加入.gitignore

那么怎么安裝Vundle呢?

git clone https://github.com/gmarik/Vundle.vim.git ~/.vim/bundle/Vundle.vim

然后在你的.vimrc中加入Vundle的配置:

set nocompatible " required filetype off " required set rtp+=~/.vim/bundle/Vundle.vim call vundle#begin() Plugin 'gmarik/Vundle.vim' call vundle#end() " required filetype plugin indent on " required 

然后在vim中運行:PluginInstall即可(或者在Bash中運行vim +PluginInstall)。以后只需要在添加一行Plugin 'xxx'並運行:PluginInstall即可自動安裝插件。

窗格管理

要把Vim打造成一個IDE,你需要熟悉Vim如何創建窗格,以及如何在窗格間切換。 :sp可以水平分割當前窗格,:vs可以垂直分割當前窗格。可以重復多次,創建復雜的窗格布局:

vim-split

C-w, C-w可以切換到下一窗格,C-w, j切換到下面的窗格,C-w, k切換到上面的窗格,C-w, h切換到左邊的窗格,C-w, l切換到右邊的窗格。 我為這些操作設置了更加方便的快捷鍵,比如Ctrl+J切換到下面的窗格:

nnoremap <C-J> <C-W><C-J> 

多文件管理可以使用多窗格,也可以使用Buffer的方式。比如vim a.js b.js就會在Buffer中同時打開兩個文件。使用:ls列出當前Buffer中的文件,然后使用數字鍵切換。也可以使用:b 2切換到Buffer中的第二個文件。

折疊

有些人特喜歡代碼折疊,我就在這里列一下如何優雅地折疊代碼。首先在.vimrc中添加配置:

set foldmethod=indent au BufWinLeave * silent mkview " 保存文件的折疊狀態 au BufRead * silent loadview " 恢復文件的折疊狀態 nnoremap <space> za " 用空格來切換折疊狀態 

開啟以indent來折疊代碼后,打開一個文件會發現有縮進的內容全被折疊起來了。所以我們引入一個SimpleFold來更智能地折疊:

Plugin 'tmhedberg/SimpylFold' 

不要忘了運行:PluginInstall

自動補全

自動補全當然是用YCM

Plugin 'Valloric/YouCompleteMe' 

然后進行配置就好了,YCM是通過Vim的omnifunc機制來自動補全的,所以你需要為你想要支持的語言安裝一個提供omnifunc接口的Vim插件。

我在另一篇博客中有詳細介紹了自動補全、語法檢查等配置。

項目樹

這想必是IDE能提供的最大的好處之一,在Vim中可以使用NERDTree來顯示文件樹,它的快捷鍵非常多,所以和Vim一樣的越用越爽。

Plugin 'scrooloose/nerdtree' " 這個插件可以顯示文件的Git增刪狀態 Plugin 'Xuyuanp/nerdtree-git-plugin' 

這里給出我的一些NERDTree配置:

" Ctrl+N 打開/關閉 map <C-n> :NERDTreeToggle<CR> " 當不帶參數打開Vim時自動加載項目樹 autocmd StdinReadPre * let s:std_in=1 autocmd VimEnter * if argc() == 0 && !exists("s:std_in") | NERDTree | endif " 當所有文件關閉時關閉項目樹窗格 autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTreeType") && b:NERDTreeType == "primary") | q | endif " 不顯示這些文件 let NERDTreeIgnore=['\.pyc$', '\~$', 'node_modules'] "ignore files in NERDTree " 不顯示項目樹上額外的信息,例如幫助、提示什么的 let NERDTreeMinimalUI=1 

全局搜索

WebStrom的全局搜索是我當初使用它的主要原因;而現在全局搜索總是突然崩潰,也是我放棄WebStorm而轉到Vim的主要原因。

成也蕭何敗蕭何

安裝ctrlp

Plugin 'kien/ctrlp.vim' 

然后按下C-P,便可以全局搜索啦。使用C-jC-k上下翻頁,<Enter>打開選中文件。同樣,給出一些有用的配置:

let g:ctrlp_working_path_mode = 'ra' set wildignore+=*/tmp/*,*/node_modules/*,*.so,*.swp,*.zip let g:ctrlp_custom_ignore = {'dir': '\v[\/]\.(git|hg|svn)$', 'file': '\v\.(exe|so|dll)$'} 

剪切板

剪切板想必是所有Vim用戶的痛。但是!在Mac下只需要設置:

set clipboard=unnamed 

你在Vim中copy的所有內容都會上系統剪切板。在Vim中拷貝內容時,可以切換到拷貝模式防止自動縮進和補全。 我的快捷鍵是<F9>

set pastetoggle=<F9> 

狀態欄

有沒有注意到我酷炫的狀態欄?安裝一個powerline

status-bar

Plugin 'Lokaltog/powerline', {'rtp': 'powerline/bindings/vim/'} 

此外,為了正確顯示Powerline的圖標,還需要一些設置:

set guifont=Inconsolata\ for\ Powerline:h15 let g:Powerline_symbols = 'fancy' set encoding=utf-8 set t_Co=256 set fillchars+=stl:\ ,stlnc:\ set term=xterm-256color set termencoding=utf-8 

然后在系統字體庫中導入powerline font,如果是Mac的話可以使用Font Book來導入。 然后需要設置terminal(iTerm)的non-ASCII字體為PowerlineSymboles:

iterm powerline font

注釋、反注釋

NERDCommenter是個不錯的工具,支持非常多的語言:

Plugin 'scrooloose/nerdcommenter' " commenter: \cc \cu 

然后按下\cc來注釋當前航,\cu來反注釋,\c<space>來切換注釋。其中的\\是可以設置的:

let mapleader=';' 

Loremipsum

哈哈如果你沒見過標題中的這個詞就可以跳過了。前端開發中通常需要添加一些占位符來讓頁面看起來有內容又像人話,loremipsum(拉丁語)通常就是這些占位符的起始字符。比如下面一段:

Sodales eget, leo. Sed ligula augue, cursus et, posuere non, mollis sit
amet, est. Mauris massa. Proin hendrerit massa. Phasellus eu purus. Donec est
neque, dignissim a, eleifend vitae, lobortis ut.

安裝一個loremipsum即可:

Plugin 'vim-scripts/loremipsum' 

我還加了點設置來方便控制長度:

inoremap Lorem <Esc><Esc>:Loremipsum 20<CR> inoremap Ipsum <Esc><Esc>:Loremipsum 70<CR> 

這樣,當輸入Lorem時產生長度為20單詞的占位符,輸入Ipsum時產生長度為70的占位符。

參考鏈接:

  • https://realpython.com/blog/python/vim-and-python-a-match-made-in-heaven/
  • https://coderwall.com/p/yiot4q/setup-vim-powerline-and-iterm2-on-mac-os-x
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM