做前端开发通常需要打开好几个终端,运行vim编辑器、gulp watch或webpack,有时还要自己跑后台服务。 如果经常需要在修改代码之后切换到另一个窗口查看服务器端日志或者watch的编译情况, 就免不了多次使用tmux的绑定键(默认是Ctrl-B),麻烦且不说,时间长了小指也会很痛。

我找到了两个办法来解决这个问题。首先,利用tmuxinator按照给定的布局打开多个pane, 这样所需的信息能在同一个屏幕内看见,就不需要频繁切换窗口了。

安装tmuxinator之后执行tmuxinator new <project>就可以新建一个配置文件。 我的配置文件如下:

name: helloworld

# 设置项目根目录
root: ~/projects/helloworld

# 打开新窗口或pane之后首先激活virtualenv
pre_window: source .env/bin/activate


windows:
  - editor:
      # 设置pane的布局
      layout: 52dd,272x65,0,0[272x58,0,0,0,272x6,0,59{90x6,0,59,3,90x6,91,59,4,90x6,182,59,5}]
      panes:
        - vi
        - backend:
          - ./manage.py runserver 0.0.0.0:8000
        - frontend:
          - gulp watch
        - test:
          - npm test
  - extra:

上面我在同一个窗口内打开了4个pane,最大的第一个pane运行vi,其他三个小的pane分别运行前端和后端的命令。 另外还开了一个名为extra的窗口备用。

至于layout的值,可以先开启tmux打开所需数量的pane,然后用鼠标调整pane的大小至合适位置(需要在.tmux.conf里设置set-option -g mouse-select-pane on set-option -g mouse-resize-pane on), 最后执行list-window命令即可得到layout的参数。

另外要注意,如果.tmux.conf里设置了set -g base-index 1,那么同时也要设置set-window-option -g pane-base-index 1,否则tmuxinator会出错。

第二个方法是把窗口切换绑定到Alt/Option键,并且不设置前缀,这样只需按Option-1, Option-2就能切换多个窗口了。

bind -n M-1 select-window -t :1
bind -n M-2 select-window -t :2
bind -n M-3 select-window -t :3
bind -n M-4 select-window -t :4
bind -n M-5 select-window -t :5
bind -n M-6 select-window -t :6
bind -n M-7 select-window -t :7
bind -n M-8 select-window -t :8
bind -n M-9 select-window -t :9

如在iTerm2下使用,需要进入Preferences > Profile > Default > Keys中,将”Left option key acts as:”设置为”+Esc”,上述绑定才能正常工作。