Using zsh, tmux and vim for web development
Some exposition that you can feel free to skip in favor of the setup section (just past the 3 dots)!
Ever since I started doing web development, I’ve never been much of an IDE person. I always thought that I could just get by with my terminal and Sublime Text. For a long time, I was happy with Terminal on macOS and Sublime Text 2, which I’d actually finally bought! It’s not like I didn’t know about Atom or iTerm2 but my choices were working for me and you know what they say about changing what ain’t broke.
The first real change came about as I was leading a hackathon team where everyone was standardized on Atom except for me so I decided to give Atom a go. After all, it was written by Github, certainly worth a shot, right? This kinda opened the floodgates that have brought me here, to zsh, tmux and vim for web development. Along the way, I picked up vim bindings, tmux bindings and some skill at configuring my terminal too!
Right before my current state, I was using Atom and iTerm2 with tmux to run two different panes (one for server and one for tests and linter) plus using vim for small things here and there. Then it dawned on me…
I can put these things together!!!
The setup
Let’s get started installing the tools first. We need oh-my-zsh, vim and tmux with some supporting tools like git and homebrew (for macOS).
Instructions for installing oh-my-zsh can be found here and instructions for installing iTerm2 can be found here. Those are the two that I always start with. With a couple additional commands, we can get the rest.
brew install vim --with-override-system-vi # will install latest vim
brew install tmux
And that’s it. We have all the tools, let’s work on making them ours! Just a quick foreword, there are opinions here for sure, feel free to change them as you like 😃
tmux
Let’s start with tmux and get it looking like we want to. Most tmux commands work with a prefix, which by default is Ctrl-b. In the rest of the setup, I’m going to use <prefix> because that’s how the docs do it. The way to configure tmux is to create a file called .tmux.conf in your home directory and then running the command below to let tmux know to load it.
:source-file ~/.tmux.confThere are a couple of things to do to make it 👌and we’ll go through them one by one. First up, setting sane split pane defaults. By default, tmux does a vertical split with <prefix> % and a horizontal split with <prefix> ". Um…no.
# sane window split defaults
bind | split-window -h
bind - split-window -vAlso, let’s make it so that we don’t have to write out that source command every time!
# shortcut to source the .tmux.conf file
bind R source-file ~/.tmux.conf \; display "~/.tmux.conf reloaded"So now we can just hit <prefix> Shift-r to reload our configuration! 💯
Now that we can create panes, let’s use vim shortcuts to move around panes too. By default you can move panes by <prefix> q <pane_number> which is fine and good but there is a better solution!
bind k select-pane -U
bind j select-pane -D
bind h select-pane -L
bind l select-pane -RIf you’re more comfortable with the arrow keys (this won’t be the case for too long once you start using vim 😂) you can change those bindings like so.
bind Up select-pane -U
bind Down select-pane -D
bind Left select-pane -L
bind Right select-pane -RIf you’re undecided, keep both because you can multiple shortcuts for the same command!
Couple of other neat ones are listed below with comments on what they do. Besides these, I have a theme which you can feel free to get creative with. My entire .tmux.conf is linked in the resources section along with the color chart that tmux uses. Note for US readers — tmux colors use the UK english colour rather than the US english color.
# automatically set window titles so you know what's going on
set-window-option -g automatic-rename on
set-option -g set-titles on# synchronize panes - send the same commands to all the open panes
# use <prefix> Shift-e to enable/disable
bind E setw synchronize-panes# enable mouse interaction possible
setw -g mouse on# use vim movement for copy mode
setw -g mode-keys vi
Alright, so we’ve got a good tmux configuration going now! The next section is pretty simple mostly because oh-my-zsh comes with plugins that you can just install and get going!
oh-my-zsh
After running the install command for oh-my-zsh above, you should have a ~/.zshrc that was written by oh-my-zsh. Feel free to add aliases at the end of this file like you want but I wanted to mention two lines in the file here, one to use oh-my-zsh plugins and one to use one of the packaged themes.
ZSH_THEME="ys"This is how you set the theme and you can pick one of the ones from here. I like the one called ys because it fits me, shows error codes, the git branch and the source control status.
plugins=(docker git gulp grunt npm npx nvm)This line lists all the plugins that you want oh-my-zsh to use. Some of these are really useful and there are many many many plugins in the repository. I use some of the ones good for JS devs but there are ones for Ruby, Python, Java, Docker and even tmux! You can find the whole list here.
After making changes to your ~/.zshrc, you won’t see the changes until you reload your configuration and you can do that by running source ~/.zshrc on the terminal! A silly thing that I’ve done (because I’m bad at typing and there are too many symbols in that command) is aliased the source command.
alias sourcream="source ~/.zshrc"Why sourcream, because why not. 😂
vim
My vim setup is fairly simple as far as vim setups go, I don’t have a fancy autocomplete setup or have spacevim style menu system but it works for me and it serves as a good starting point to learn about configuring your own vim. So let’s get started! This is the last piece in this exercise so we’re almost to the end.
The first thing to do is to install a plugin manager for vim. This is where everything starts because once you have a plugin manager, you’ll be able to get access to ALL OF THE PLUGINS! There are a few different plugin managers but we’ll go with Plug. So install Plug by following the instructions here. Once you have Plug installed, there are a few plugins that I recommend that you install and I’ve made a list below.
- NERDTree
- vim-surround
- vim-gitgutter
- emmet-vim
- vim-polyglot
- vim-javascript
- typescript-vim
A lot of these plugins come with a bunch of configuration options so take a look at those and make sure that they suit your needs or configure them to suit your needs.
Next, we’re going to enable a couple of vim options to make our experience a little better. The options are below along with a comment on what they do or why they’re useful. Comments in vim configuration files start with a ".
syntax on " enable highlighting
set number " enable line numbers
set backspace=indent,eol,start " let backspace delete over linesset autoindent " enable auto indentation of lines
set smartindent " allow vim to best-effort guess the indentation
set pastetoggle=<F2> " enable paste mode (more on this below)" set indent for 2 spaces
set tabstop=2
set shiftwidth=2
set expandtab" enable mouse support
set mouse=a
Once you have these settings in place, do a quick restart and your new options should take effect but your new plugins won’t be installed. No problem, just go into command mode by pressing : and then type in PlugInstall and all your plugins should start installing. Once done, give vim another restart and you should be good to go! While this is a fairly basic introduction to vim and its ecosystem of plugins, the configurability of vim is nearly endless and you can make it look and work however you want! I encourage you to explore the ecosystem and mold vim to your liking.
And just like that, we’re done! Below you will find links to resources that you can use to dive deeper into zsh, tmux, and vim as you want!
