Configuring Vim and TMux to Boost Your Productivity.

Why Vim and TMux?

Vim is a modal, highly customizable and lightweight text/code editor that comes preinstalled on most *nix machines. As the word modal suggests, it supports various modes of execution allowing one to achieve text manipulation objectives using powerful and finely-tuned built-in commands and user-defined macros.

Vim’s modality being its most powerful feature also make it incredibly difficult to master. That said, the rewards of mastering it quickly outweigh the initial cost of learning it.

Here are a few reasons that make Vim outstanding among other editors:

1. Performance — Vim’s core is implemented in C which makes it blazingly fast and lightweight. Unlike most of the existing code editors which are Electron-based like VSCode (which is essentially a browser instance) or running on JVM like IntelliJ, it is optimized through the use of low-level machine specific code.

2. Highly Customizable — the ability to configure your editor down to a keystroke is an immensely valuable feature. Through the use of a high-level scripting language (VimScript), one can compose built-in commands to create macros that tweak the different modes on Vim to one’s suiting.

3. Distraction-free — as a developer, I value having a distraction-free zone to concentrate on a task I am working on. Noise, however, does not relate to the environment only. In most editors, you continually have to reach out to your trackpad to open a new file or click on a button to trigger some action. With this, you can easily drift away from the task at hand. Vim, on the other hand, supports the use of the keyboard only to achieve everything imaginable on an editor.

TMux is a terminal multiplexer(therefore the name TMux) that allows you to run multiple terminal sessions simultaneously on the same window. It is also highly configurable to support keybindings that can spawn new windows and to quickly navigate between them.

Together, both Vim and TMux marry harmoniously to form a Swiss army knife for all your code editing needs.

Learning Curve Awareness

Before we get to how to installing and configuring both Vim and TMux it is important to be aware that mastering these two would require both time and effort. Although comical, the Vi (now known as Vim) learning curve indicated below is a good depiction of what to expect.

[caption id="attachment_66309" align="aligncenter" width="600"]

source unknown[/caption]

I would, therefore, advise you do not rush through this write-up and instead regard it as a reference for close to one week.

Installing and Configuring Vim

If you are running a *nix machine(Unix, GNU/Linux, and its derivatives or MacOS) you would most likely have Vim preinstalled. It is possible, however, to have Vim’s predecessor Vi installed and so you would still need to install it.

To be sure that we have Vim installed, kindly run the following command on a MacOS terminal (for GNU/Linux based machines kindly check how to install Vim using your specific package manager):

$ brew install vim

Having installed it, we can now fire it up by running the following command:

$ vim

This should land you on the following window:

[caption id="attachment_66310" align="aligncenter" width="800"]

The first view on an unconfigured Vim[/caption]

Although the cursor can be seen, Vim doesn’t allow you to immediately type anything on the document as by default it will land you in a command mode. For now, you can quit the app by typing :q<Enter> .

As Vim requires that you learn a few basic commands before proceeding to actually customize it, I would suggest you run Vim’s interactive tutor which can be accessed through:

$ vimtutor

This will have a text-based simplified Vim mode that will contain a step-by-step guide through some basic commands:

[caption id="attachment_66311" align="aligncenter" width="800"]

Running Vim tutor[/caption]

Going through the tutor, in my opinion, is the one stage that demands a lot of discipline and determination and one in which most people are likely to give up.

Although the tutor suggests you use 25–30 minutes to go through it, I would advise you have the 30 minutes sessions for 3 days to make sure you master most of the commands. Over time you will realize that these actions become intuitive and instead of having to think about what to type next, you find yourself navigating through the tutor rather easily.

The default Vim without extra configuration is really powerful for text editing. However, a few pain points may be realized such as not having a project’s files tree, code completion, integration with Version Control, fuzzy file search and syntax highlighting for certain languages. This is where plugins come to the rescue to unravel the full power of Vim.

To get you started, you would have to install a plugins manager. For this, I would recommend using VimPlug, which can be installed as directed here.

Having installed VimPlug, you can now install some basic plugins by creating a ~/.vimrc file running the following command:

$ touch ~/.vimrc

Within the file, ensure you have the following content (I would advise you use a code editor you are familiar with like VSCode):

[pastacode lang="c" manual="syntax%20on%0Aset%20number%0Aset%20nocompatible%0Aset%20encoding%3Dutf-8%0Afiletype%20plugin%20indent%20on%0Acall%20plug%23begin('~%2F.vim%2Fplugged')%0A%22%20---%3E%20this%20is%20where%20you%20add%20your%20plugins%20%3C---%0Acall%20plug%23end()" message="" highlight="" provider="manual"/]

Save it and on your terminal run Vim again through:

$ vim

Now to add plugins, simply edit the ~/.vimrc file (using a code editor of your choice) and paste their configuration in the section indicated with ("---> this is where you add you plugins <---)above and restart Vim.

You would then type: PlugInstall while on Vim’s command mode to install the plugins. The following are the most essential plugins I believe you will need:

1. Project’s files explorer — NerdTree is currently what I use as my files explorer. To install it, add the following to ~/.vimrc :

[pastacode lang="c" manual="%22%7B%7B%20Configuring%20NerdTree%0APlug%20'scrooloose%2Fnerdtree'%0A%20%20%20%0A%20%20%22%20---%3E%20to%20hide%20unwanted%20files%20%3C---%0A%20%20let%20NERDTreeIgnore%20%3D%20%5B%20'__pycache__'%2C%20'%5C.pyc%24'%2C%20'%5C.o%24'%2C%20'%5C.swp'%2C%20%20'*%5C.swp'%2C%20%20'node_modules%2F'%20%5D%0A%22%20---%3E%20show%20hidden%20files%20%3C---%0A%20%20let%20NERDTreeShowHidden%3D1%0A%22%20---%3E%20autostart%20nerd-tree%20when%20you%20start%20vim%20%3C---%0A%20%20autocmd%20vimenter%20*%20NERDTree%0A%20%20autocmd%20StdinReadPre%20*%20let%20s%3Astd_in%3D1%0A%20%20autocmd%20VimEnter%20*%20if%20argc()%20%3D%3D%200%20%26%26%20!exists(%22s%3Astdn_in%22)%20%7C%20NERDTree%20%7C%20endif%0A%22%20---%3E%20toggling%20nerd-tree%20using%20Ctrl-N%20%3C---%0A%20%20map%20%3CC-n%3E%20%3ANERDTreeToggle%3CCR%3E%0A%22%7D%7D" message="" highlight="" provider="manual"/]2.Code completion — to enable code completion for Vim, install YouCompleteMe plugin.[pastacode lang="c" manual="%22%7B%7B%20Configuring%20YouCompleteMe%0APlug%20'valloric%2Fyoucompleteme'%2C%20%7B%20'do'%3A%20'.%2Finstall.py'%20%7D%0A%20%20%0A%20%20%22%20---%3E%20youcompleteme%20configuration%20%3C---%0A%20%20let%20g%3Aycm_global_ycm_extra_conf%20%3D%20'~%2F.vim%2F.ycm_extra_conf.py'%0A%20%20%0A%20%20%22%20---%3E%20compatibility%20with%20another%20plugin%20(ultisnips)%20%3C---%0A%20%20let%20g%3Aycm_key_list_select_completion%20%3D%20%5B%20'%3CC-n%3E'%2C%20'%3CDown%3E'%20%5D%20%0A%20%20let%20g%3Aycm_key_list_previous_completion%20%3D%20%5B%20'%3CC-p%3E'%2C%20'%3CUp%3E'%20%5D%0A%20%20let%20g%3ASuperTabDefaultCompletionType%20%3D%20'%3CC-n%3E'%0A%22%20---%3E%20disable%20preview%20window%20%3C---%0A%20%20set%20completeopt-%3Dpreview%0A%22%20---%3E%20navigating%20to%20the%20definition%20of%20a%20a%20symbol%20%3C---%0Amap%20%3Cleader%3Eg%20%20%3AYcmCompleter%20GoToDefinitionElseDeclaration%3CCR%3E%0A%22%7D%7D" message="" highlight="" provider="manual"/]

3. Fuzzy Finder — to support fuzzy file searching, you would have to add CtrlP plugin as follows:

[pastacode lang="c" manual="%22%7B%7B%20Configuring%20CtrlP%0APlug%20'ctrlpvim%2Fctrlp.vim'%0A%22%7D%7D" message="" highlight="" provider="manual"/]4.Snippets — code snippets allow you to quickly write some boilerplate code that is often repetitive. To add code snippets support, you will have to add UltiSnips.[pastacode lang="c" manual="%22%7B%7B%20Configuring%20UltiSnips%0APlug%20'SirVer%2Fultisnips'%0APlug%20'honza%2Fvim-snippets'%0A%20%20let%20g%3AUltiSnipsExpandTrigger%20%3D%20%22%3Ctab%3E%22%0A%20%20let%20g%3AUltiSnipsJumpForwardTrigger%20%3D%20%22%3Ctab%3E%22%0A%20%20let%20g%3AUltiSnipsJumpBackwardTrigger%20%3D%20%22%3Cs-tab%3E%22%0A%22%7D%7D" message="" highlight="" provider="manual"/]

5. Version Control — to add an integration to git add the following plugins:

[pastacode lang="c" manual="%22%7B%7B%20Git%20integration%0A%22%20---%3E%20git%20commands%20within%20vim%20%3C---%0APlug%20'tpope%2Fvim-fugitive'%0A%22%20---%3E%20git%20changes%20on%20the%20gutter%20%3C---%0APlug%20'airblade%2Fvim-gitgutter'%0A%22%20---%3E%20nerdtree%20git%20changes%20%3C---%0APlug%20'Xuyuanp%2Fnerdtree-git-plugin'%0A%22%7D%7D" message="" highlight="" provider="manual"/]6.Color scheme configuration — Vim comes with quite a number of preinstalled color-schemes. There is the one I personally use though and I highly recommend it. To add it use:[pastacode lang="c" manual="%22%7B%7B%20Color-scheme%0APlug%20'morhetz%2Fgruvbox'%0A%20%20set%20background%3Ddark%0A%20%20colorscheme%20gruvbox%0A%20%20let%20g%3Agruvbox_contrast_dark%3D'default'%0A%22%7D%7D%0A" message="" highlight="" provider="manual"/]7.Autoclosing tags brackets and braces — typing out pairs of tags and braces can be rather painful. To fix this, use:[pastacode lang="c" manual="%22%7B%7B%20Autopairs%0A%22%20---%3E%20closing%20XML%20tags%20%3C---%0APlug%20'alvan%2Fvim-closetag'%0A%22%20---%3E%20files%20on%20which%20to%20activate%20tags%20auto-closing%20%3C---%0A%20%20let%20g%3Aclosetag_filenames%20%3D%20'*.html%2C*.xhtml%2C*.xml%2C*.vue%2C*.phtml%2C*.js%2C*.jsx%2C*.coffee%2C*.erb'%0A%22%20---%3E%20closing%20braces%20and%20brackets%20%3C---%0APlug%20'jiangmiao%2Fauto-pairs'%0A%22%7D%7D" message="" highlight="" provider="manual"/]

8. TMux integration — as we are going to be integrating Vim with TMux this plugin will be required on Vim’s side:

[pastacode lang="c" manual="%22%7B%7B%20TMux%20-%20Vim%20integration%0APlug%20'christoomey%2Fvim-tmux-navigator'%0A%22%7D%7D" message="" highlight="" provider="manual"/]

This completes the main configurations required on Vim to be up and running. In case of any pain points, a quick search will usually land you a solution in the form of a plugin or a script you would have to add to your configuration.

Installing and Configuring TMux

TMux also comes preinstalled on most of the *nix machines. To ensure that it is installed(or to install it), run:

[pastacode lang="c" manual="%24%20brew%20install%20tmux" message="" highlight="" provider="manual"/]

Now to integrate this with Vim, first, install the TMux plugins manager as directed here and then create a file ~/.tmux.conf file by running:

[pastacode lang="c" manual="%24%20touch%20~%2F.tmux.conf%0A" message="" highlight="" provider="manual"/]

Now, using a code editor of your choice add the following to the ~/.tmux.conf file:

[pastacode lang="c" manual="%23%20better%20prefix%20key%0Aset%20-g%20prefix%20C-a%0Abind%20C-a%20send-prefix%0A%23%20better%20splitting%0Abind%20%7C%20split-window%20-h%20-c%20%22%23%7Bpane_current_path%7D%22%0Abind%20-%20split-window%20-v%20-c%20%22%23%7Bpane_current_path%7D%22%0A%23%20less%20colourful%20status%0Aset%20-g%20status-bg%20colour240%0Aset%20-g%20status-fg%20white%0A%23%20256%20colors%20support%0Aset%20-g%20default-terminal%20%22screen-256color%22%0A%23%20sane%20scrolling%0Aset%20-g%20mouse%20on%0A%23%20list%20of%20plugins%0Aset%20-g%20%40plugin%20'tmux-plugins%2Ftpm'%0Aset%20-g%20%40plugin%20'tmux-plugins%2Ftmux-sensible'%0Aset%20-g%20%40plugin%20'christoomey%2Fvim-tmux-navigator'%0A%23%20TMUX%20plugin%20manager%20(keep%20at%20the%20bottom%20of%20tmux.conf)%0Arun%20-b%20'~%2F.tmux%2Fplugins%2Ftpm%2Ftpm'" message="" highlight="" provider="manual"/]

Restart your terminal and this time, run:

[pastacode lang="c" manual="%24%20tmux" message="" highlight="" provider="manual"/]

Now, to split your window simply press Ctrl-A (referred to as the prefix key) followed by either | for a vertical split or - for a horizontal split. This way you can have as many terminal sessions as you want.

The Vim-TMux integration allows you to quickly navigate between the two by pressing Ctrl together with the HJKL keybindings used by default in Vim. This also works between any TMux sessions.

Conclusion

In conclusion, it might take quite a lot to get your Vim-TMux configuration working but the reward of having a code editor you have configured yourself next to your favorite terminal shell is totally worth it.

Lastly, I hope this has been helpful and in case you would prefer to use my configurations instead, you can easily access them here.