我可能搞了一个假IDE——使用vim+tmux打造IDE for JavaScript 全栈开发

写在前面

1. 为什么要用vim

如果一定要讲一个清新脱俗的理由,那是因为用vim对颈椎和腰椎好(严肃脸)。使用vim时候,是不需要一只手控制鼠标或者触控板的。当两只手都放在键盘上,就能将脖子和双肩放松,身体放正,挺直腰背,目光平视屏幕了,咳咳。

2. 为什么重复造轮子

Github上关于vim的配置已经有很多了,但没有真正一统vim界的最佳实践(如zsh的oh-my-zsh,emacs的space-emacs,不过由于space-emacs催生出一个space-vim),所以要打造简约专属的IDE,还得自己造轮子。稍微谷歌或百度一下,就会有各种vim配置的教程,思路也基本一致,所幸不是特别麻烦。

3. 对IDE的需求

IDE的最终效果图
  • 显示区块: 项目结构,文件编辑,文件结构,Shell操作,Log显示
  • 主要语言:Javascript,HTML,CSS等
  • 次要语言:Python,Shell等
  • 使用习惯:拥有sublime text的众多特性

在sublime中编辑+terminal中查看log、执行git操作,两者来回切换相当麻烦;而webstorm虽然强大,但消耗太大。用tmux的多屏复用+vim的强大插件足以打造一个能满足以上要求IDE了。

4. 适合本文的读者

打算用vim打造IDE的新手。没有耐心的同学可以拉到最后看总结,直接去各个reference看原始文档。希望本文能对你在配置vim过程中有一丢丢帮助。

开始搭建

1. 准备工作

环境:MacOS 或 Linux

  • 安装iTerm2和zsh(推荐)
    前往iTerm2官网下载,以及使用oh-my-zsh一键安装配置。具体可参考:Sourabh Bajaj 的 Mac OS X Setup Guide
  • 安装tmux(必须)
$ brew install tmux
  • 安装vim(必须)
$ brew install vim --with-lua --with-override-system-vi

2. Vim配置

vim编辑器所有的配置都在 ~/.vimrc 下,我们配置下第一个插件Vundle.vim——管理插件的插件。

2.1. 插件管理

Vundle可以让你在配置文件中管理插件,并且非常方便的查找、安装、更新或者删除插件。 还可以帮你自动配置插件的执行路径和生成帮助文件,相对于Pathongen有巨大优势。你也可以用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

接着执行安装命令即可安装完毕

# 在vim中
:PluginInstall

# 在终端
vim +PluginInstall +qall

为了方便vim配置的管理,创建新文件~/.vimrc_vundle将以上关于插件部分的配置写入其中,然后再从~/.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插件与配置

我们在~/.vimrc中添加插件配置,在~/.vimrc_vundle中添加插件 。vim的插件可以在VimAwesome这个非常awesome的网站上寻找,它有用Vundle安装的脚本,直接复制粘贴就行了。

vimawesome的安装指导

a. 配色主题
所谓颜即是正义,赏心悦目的配色主题很重要。我用的配色是 molokai 主题

"~/.vimrc_vundle文件"

" Vundle List Here"
Plugin 'tomasr/molokai'
" ~/.vimrc文件"

" vim theme"
colorscheme molokai

b. 项目结构
左窗口用 NerdTree插件 Plugin 'scrooloose/nerdtree',是一个用于浏览目录结构的插件,配置如下:

" 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. 文件结构
右窗口用 tagbar插件 Plugin 'majutsushi/tagbar,为我们提供了一个简单的方式去浏览当前文件的结构,并且支持在各个标签之间快捷的跳转。配置如下:

" 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

由此,左右两侧的导航插件安装完成。按F5和F6唤出左右窗口,窗口之间的切换使用ctrl+w。

d. 对js文件结构分析的优化
tagbar本身对javascript的分析不够,所以还需要额外的插件去支持对javascr以及ES6做标签化处理,推荐解决方案 是使用jsctags,当然也可以采用其他tagbar在wiki中的其他方案。关于jsctags的解决方式如下:

  • 用 vundle 安装 tern_for_vim 插件
  • ~/.vim/bundle/tern_for_vim 下执行 npm install
  • 安装 jsctags
npm install -g git+https://github.com/ramitos/jsctags.git
  • ~/.vimrc 添加对js处理的配置
let g:tagbar_type_javascript = {
  \ 'ctagsbin' : 'jsctags'
\ }

e. 其他实用的插件

  • ctrlp 全局搜索
  • vim-airline 状态栏
  • YouCompleteMe 自动补全
  • vim-gitgutter 基于git diff显示代码变动
  • vim-javascript 更多js语法高亮

vim的插件相当多,按需装载即可,就不一一列举了。这里记录一个坑,vim-airline状态栏的箭头要正确显示,需要安装powerline-font,然后在iterm2中启用non-ASCII的字体

iterm2中启用non-ASCII

3. tmux配置

正如文章一开始的截图所以展示的,左下方窗口是shell 操作区,右下窗口是log 输出区域。其本质是用tmux 创建了3个panel ,上面1个用vim打开,下面左右各2个,左侧可以执行git 命令,右侧启动server 查看log

3.1. 打开tmux

执行命令tmux,创建一个窗口

$ tmux
3.1. 分屏

待开启了一个窗口之后,只需再按住 ctrl-b% ,一个竖直窗格就出现了。另外,若要把屏幕沿水平方向分割,则只需要按下 ctrl-b"。切换tmux之间的窗口只要按下 ctrl-b + 方向键。

3.3. tmux 的快捷键前缀

刚刚所按住的 ctrl-b 是tmux的快捷键前缀,是用来区分tmux命令和其他shell命令的,为了方便按键,我们将修改这个前缀为ctrl-a

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

如果将ctrl键和caps lock键功能对调那就更方便了。按键习惯因人而异,开心就好。

3.4. 在tmux中vim的高亮不对

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

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

此时上面的窗格和下面2个窗格是等分的,将vim主窗口调整的更大一点,才更合理点。我们使用以下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. 更多关于tmux

以上操作完成后,基本形成一个像截图所示的IDE了。关于tmux的window,panel,session的概念、其他的快捷操作等等,网上有许多教程可以参考,不在此赘述。
tmux非常强大,你甚至可以做结对编程:将tmux的session地址分享给他人,别人可以通过ssh接入这个session,进行协同操作。

总结

  • 用tmux分屏,主屏打开vim,其他屏可以启动server查看log、执行git命令做版本管理等
  • vim的配置文件是 ~/.vimrc,用 vim-scripts 配置
  • 插件汇总在 VimAwesome 网站上,可以用 Vundle.vim 管理
  • 配置可以通过参考Github上众多的 vim的配置COPY-PASTE-MODIFY所以我的vim配置也就没必要完整附上了
  • vim的操作训练可以用 vim大冒险 这个游戏来完成

推荐阅读更多精彩内容