我可能搞了一個(gè)假IDE——使用vim+tmux打造IDE for JavaScript 全棧開發(fā)

寫在前面

1. 為什么要用vim

如果一定要講一個(gè)清新脫俗的理由，那是因?yàn)?strong>用vim對(duì)頸椎和腰椎好（嚴(yán)肅臉）。使用vim時(shí)候，是不需要一只手控制鼠標(biāo)或者觸控板的。當(dāng)兩只手都放在鍵盤上，就能將脖子和雙肩放松，身體放正，挺直腰背，目光平視屏幕了，咳咳。

2. 為什么重復(fù)造輪子

Github上關(guān)于vim的配置已經(jīng)有很多了，但沒有真正一統(tǒng)vim界的最佳實(shí)踐（如zsh的oh-my-zsh，emacs的space-emacs，不過由于space-emacs催生出一個(gè)space-vim），所以要打造簡(jiǎn)約專屬的IDE，還得自己造輪子。稍微谷歌或百度一下，就會(huì)有各種vim配置的教程，思路也基本一致，所幸不是特別麻煩。

3. 對(duì)IDE的需求

IDE的最終效果圖
  • 顯示區(qū)塊： 項(xiàng)目結(jié)構(gòu)，文件編輯，文件結(jié)構(gòu)，Shell操作，Log顯示
  • 主要語言：Javascript，HTML，CSS等
  • 次要語言：Python，Shell等
  • 使用習(xí)慣：擁有sublime text的眾多特性

在sublime中編輯+terminal中查看log、執(zhí)行g(shù)it操作，兩者來回切換相當(dāng)麻煩；而webstorm雖然強(qiáng)大，但消耗太大。用tmux的多屏復(fù)用+vim的強(qiáng)大插件足以打造一個(gè)能滿足以上要求IDE了。

4. 適合本文的讀者

打算用vim打造IDE的新手。沒有耐心的同學(xué)可以拉到最后看總結(jié)，直接去各個(gè)reference看原始文檔。希望本文能對(duì)你在配置vim過程中有一丟丟幫助。

開始搭建

1. 準(zhǔn)備工作

環(huán)境：MacOS 或 Linux

$ brew install tmux
  • 安裝vim（必須）
$ brew install vim --with-lua --with-override-system-vi

2. Vim配置

vim編輯器所有的配置都在 ~/.vimrc 下，我們配置下第一個(gè)插件Vundle.vim——管理插件的插件。

2.1. 插件管理

Vundle可以讓你在配置文件中管理插件，并且非常方便的查找、安裝、更新或者刪除插件。 還可以幫你自動(dòng)配置插件的執(zhí)行路徑和生成幫助文件，相對(duì)于Pathongen有巨大優(yōu)勢(shì)。你也可以用NeoBundle或者VimPlug，此處不作展開。

# vundle 安裝
$ git clone https://github.com/gmarik/Vundle.vim.git ~/.vim/bundle/Vundle.vim

將下面配置加入到.vimrc文件中

" unleash all Vim power"
set nocompatible 
filetype off     

"  set the runtime path to include Vundle and initialize"
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()

" let Vundle manage Vundle, required"
Plugin 'gmarik/Vundle.vim'

" Vundle List Here"


call vundle#end() 
filetype plugin indent on

接著執(zhí)行安裝命令即可安裝完畢

# 在vim中
:PluginInstall

# 在終端
vim +PluginInstall +qall

為了方便vim配置的管理，創(chuàng)建新文件~/.vimrc_vundle將以上關(guān)于插件部分的配置寫入其中，然后再從~/.vimrc中引入。

" ~/.vimrc文件"
set nocompatible 
filetype off

let $CONFIG_DIR = "~/"

" vundle config"
let $VUNDLE_CONFIG = $CONFIG_DIR.".vimrc_vundle"
if filereadable(expand($VUNDLE_CONFIG))
  source $VUNDLE_CONFIG
endif

"~/.vimrc_vundle文件"

"  set the runtime path to include Vundle and initialize"
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()

" let Vundle manage Vundle, required"
Plugin 'gmarik/Vundle.vim'

" Vundle List Here"


call vundle#end() 
filetype plugin indent on
2.2. 添加vim插件與配置

我們?cè)?code>~/.vimrc中添加插件配置，在~/.vimrc_vundle中添加插件 。vim的插件可以在VimAwesome這個(gè)非常awesome的網(wǎng)站上尋找，它有用Vundle安裝的腳本，直接復(fù)制粘貼就行了。

vimawesome的安裝指導(dǎo)

a. 配色主題
所謂顏即是正義，賞心悅目的配色主題很重要。我用的配色是 molokai 主題

"~/.vimrc_vundle文件"

" Vundle List Here"
Plugin 'tomasr/molokai'

" ~/.vimrc文件"

" vim theme"
colorscheme molokai

b. 項(xiàng)目結(jié)構(gòu)
左窗口用 NerdTree插件 Plugin 'scrooloose/nerdtree'，是一個(gè)用于瀏覽目錄結(jié)構(gòu)的插件，配置如下：

" NERDTree"
let NERDChristmasTree=0
let NERDTreeWinSize=35
let NERDTreeChDirMode=2
let NERDTreeIgnore=['\~$', '\.pyc$', '\.swp$']
let NERDTreeShowBookmarks=1
let NERDTreeWinPos="left"
let g:nerdtree_tabs_open_on_gui_startup=1
let g:nerdtree_tabs_open_on_console_startup=1

autocmd vimenter * if !argc() | NERDTree | endif
autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTreeType") && b:NERDTreeType == "primary") | q | endif
nmap <F5> :NERDTreeToggle<cr>

c. 文件結(jié)構(gòu)
右窗口用 tagbar插件 Plugin 'majutsushi/tagbar，為我們提供了一個(gè)簡(jiǎn)單的方式去瀏覽當(dāng)前文件的結(jié)構(gòu)，并且支持在各個(gè)標(biāo)簽之間快捷的跳轉(zhuǎn)。配置如下：

" Tagbar"
let g:tagbar_width=35
let g:tagbar_autofocus=1
nmap <F6> :TagbarToggle<CR>

" parse markdown"
let g:tagbar_type_markdown = {
  \ 'ctagstype' : 'markdown',
  \ 'kinds' : [
    \ 'h:Heading_L1',
    \ 'i:Heading_L2',
    \ 'k:Heading_L3'
  \ ]
\ }

使用tagbar還需要安裝 Exuberant ctags

$ brew install ctags

由此，左右兩側(cè)的導(dǎo)航插件安裝完成。按F5和F6喚出左右窗口，窗口之間的切換使用ctrl+w。

d. 對(duì)js文件結(jié)構(gòu)分析的優(yōu)化
tagbar本身對(duì)javascript的分析不夠，所以還需要額外的插件去支持對(duì)javascr以及ES6做標(biāo)簽化處理，推薦解決方案 是使用jsctags，當(dāng)然也可以采用其他tagbar在wiki中的其他方案。關(guān)于jsctags的解決方式如下：

  • 用 vundle 安裝 tern_for_vim 插件
  • 在 ~/.vim/bundle/tern_for_vim 下執(zhí)行 npm install
  • 安裝 jsctags
npm install -g git+https://github.com/ramitos/jsctags.git
  • ~/.vimrc 添加對(duì)js處理的配置
let g:tagbar_type_javascript = {
  \ 'ctagsbin' : 'jsctags'
\ }

e. 其他實(shí)用的插件

  • ctrlp 全局搜索
  • vim-airline 狀態(tài)欄
  • YouCompleteMe 自動(dòng)補(bǔ)全
  • vim-gitgutter 基于git diff顯示代碼變動(dòng)
  • vim-javascript 更多js語法高亮

vim的插件相當(dāng)多，按需裝載即可，就不一一列舉了。這里記錄一個(gè)坑，vim-airline狀態(tài)欄的箭頭要正確顯示，需要安裝powerline-font，然后在iterm2中啟用non-ASCII的字體

iterm2中啟用non-ASCII

3. tmux配置

正如文章一開始的截圖所以展示的，左下方窗口是shell 操作區(qū)，右下窗口是log 輸出區(qū)域。其本質(zhì)是用tmux 創(chuàng)建了3個(gè)panel ，上面1個(gè)用vim打開，下面左右各2個(gè)，左側(cè)可以執(zhí)行g(shù)it 命令，右側(cè)啟動(dòng)server 查看log

3.1. 打開tmux

執(zhí)行命令tmux，創(chuàng)建一個(gè)窗口

$ tmux
3.1. 分屏

待開啟了一個(gè)窗口之后，只需再按住 ctrl-b 和 % ，一個(gè)豎直窗格就出現(xiàn)了。另外，若要把屏幕沿水平方向分割，則只需要按下 ctrl-b 和 "。切換tmux之間的窗口只要按下 ctrl-b + 方向鍵。

3.3. tmux 的快捷鍵前綴

剛剛所按住的 ctrl-b 是tmux的快捷鍵前綴，是用來區(qū)分tmux命令和其他shell命令的，為了方便按鍵，我們將修改這個(gè)前綴為ctrl-a

" ~/.tmux.conf 文件
unbind C-b
set -g prefix C-a

如果將ctrl鍵和caps lock鍵功能對(duì)調(diào)那就更方便了。按鍵習(xí)慣因人而異，開心就好。

3.4. 在tmux中vim的高亮不對(duì)

在 ~/.vimrc 中加以下配置即可

if exists('$TMUX')
  set term=screen-256color
endif
3.5. 調(diào)整窗格布局

此時(shí)上面的窗格和下面2個(gè)窗格是等分的，將vim主窗口調(diào)整的更大一點(diǎn)，才更合理點(diǎn)。我們使用以下tmux命令，注意要按前綴ctrl-a，然后像vim一樣按:

resize-pane [-DLRUZ] [-x width] [-y height] [-t target-pane] [adjustment]

比如窗格0高度偏移25

:resize-pane -t 0 -y 25
3.6. 更多關(guān)于tmux

以上操作完成后，基本形成一個(gè)像截圖所示的IDE了。關(guān)于tmux的window，panel，session的概念、其他的快捷操作等等，網(wǎng)上有許多教程可以參考，不在此贅述。
tmux非常強(qiáng)大，你甚至可以做結(jié)對(duì)編程：將tmux的session地址分享給他人，別人可以通過ssh接入這個(gè)session，進(jìn)行協(xié)同操作。

總結(jié)

  • 用tmux分屏，主屏打開vim，其他屏可以啟動(dòng)server查看log、執(zhí)行g(shù)it命令做版本管理等
  • vim的配置文件是 ~/.vimrc，用 vim-scripts 配置
  • 插件匯總在 VimAwesome 網(wǎng)站上，可以用 Vundle.vim 管理
  • 配置可以通過參考Github上眾多的 vim的配置 來 COPY-PASTE-MODIFY，所以我的vim配置也就沒必要完整附上了
  • vim的操作訓(xùn)練可以用 vim大冒險(xiǎn) 這個(gè)游戲來完成
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容