寒哥管理的技术专题Lives Like Vimide

我可能搞了一个假IDE——使用vim+tmux打造IDE for

2017-01-25  本文已影响2320人  写bug的猫

写在前面

1. 为什么要用vim

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

2. 为什么重复造轮子

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

3. 对IDE的需求

IDE的最终效果图

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

4. 适合本文的读者

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

开始搭建

1. 准备工作

环境：MacOS 或 Linux

$ brew install tmux

$ 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的解决方式如下：

npm install -g git+https://github.com/ramitos/jsctags.git

let g:tagbar_type_javascript = {
  \ 'ctagsbin' : 'jsctags'
\ }

e. 其他实用的插件

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，进行协同操作。

总结

上一篇下一篇

猜你喜欢

热点阅读