All Posts

Turning Vim Into Your Primary Text Editor

vim

Configuring Vim to be your primary text editor is one of those arduous tasks that a programmer goes through. I don’t know if I can attest to the benefits of using vim over emacs or another editor since modern editors have numerous plugins available and work out of the box. I’ll go through my process of using and setting VIM for everyday web development. This will be a light configuration. The goal is get your feet wet enough so you’ll feel comfortable using Vim as your primary text editor.

Here is a list of what I’ll go through:

  1. Using Vim
  2. Plugin Management
  3. Directory Management
  4. Syntax Highlighting
  5. Fuzzy Finding
  6. Auto Completion
  7. Status bar
  8. Surround
  9. EditorConfig
  10. Tmux

Installing Vim

Installing Vim on a ubuntu/debian-based system: sudo apt install vim

Installing Vim on Osx using brew: brew install vim

Using Vim

First you’ll need to a quick introductory. Both terminal-based systems come preinstalled with Vi. Vim is a superset of Vi, the main difference being:

  • Vim has been ported to a much wider range of OS’s than vi.
  • Vim includes support (syntax highlighting, code folding, etc) for
  • Several popular programming languages (C/C++, Python, Perl, shell, etc).
  • Vim integrates with cscope.
  • Vim can be used to edit files using network protocols like SSH and HTTP.
  • Vim includes multilevel undo/redo.
  • Vim allows the screen to be split for editing multiple files.
  • Vim can edit files inside a compressed archive (gzip, zip, tar, etc).
  • Vim includes a built in diff for comparing files (vimdiff).
  • Vim includes support for plugins, and finer control over config and startup files.
  • Vim can be scripted with vimscript, or with an external scripting language (e.g. python, perl, shelll

To use Vim type in your terminal: vim

You should see a text interface that shows you two commands: :help :quit

You can edit text by entering insert mode by pressing i

Exiting can be done by pressing :q Writing (saving the file) can be done by pressing :w

Chaining commands is available with :wq

Common Commands

Here is a link to a Vim shortcut cheatsheet

A shortened list of my most commonly used commands:

  • w - start of first word
  • W - tabbing through first letter of words
  • e - jump to end of word
  • E - jump to end of next word
  • b - go backwards 1 word
  • B - tab through words going backwards
  • 0 - go to start of line
  • $ - go to end of line
  • gg - go to top of page
  • G - go to bottom of page
  • i - start insert mode at cursor
  • I - insert at the beginning of the line
  • a - append after the cursor
  • A - append at the end of the line
  • cc - replace entire line
  • dd - delete entire line
  • yy - copy entire line
  • u - undo
  • C + r - redo
  • . - repeat last command

Practice on blank text, you’ll start to get the hang of it quickly

The infamous .vimrc file

Amongst programmers, the .vimrc topic comes up quite a bit. Some have notoriously long .vimrc files. Some people you should modularize it. I’m in the latter half’s camp, but for what we’re trying to accomplish, we’ll keep the file small.

On unix-based systems in mac the .vimrc is file is located here, open it with:

sudo vim ~/.vimrc

All the commands in this file are executed everytime you open vim, making it approriate for storing configuration.

Plugin Managers

There are few great plugin managers out there, here are two that I’ve used in the past:

Both are easy to install with straight-foward instructions detailed on the repo’s readme.

Installing Plugins

With vim-plug:

When you install vim-plug, a folder named ‘plugged’ is created in your ~/.vim/ directory

You can add a plugin by adding to your .vimrc file:

call plug#begin('~/.vim/plugged')
call plug#end()

Add the name of repo in between plug#begin and plug#end:

call plug#begin('~/.vim/plugged')
Plug 'tpope/vim-sensible'
Plug 'junegunn/seoul256.vim'
call plug#end()

Hit escape to enter normal mode and use the command :PlugInstall

Now the next time you enter vim, your plugins will be automatically loaded in your session.

With vim-pathogen:

in your .vimrc file add the following:

execute pathogen#infect()
syntax on
filetype plugin indent on

now go to ~/.vim/bundle directory that was created when pathogen was installed and run this command in your terminal:

git clone https://github.com/tpope/vim-sensible.git

And the next time you enter vim your plugin will be installed.

Directory Management

Now that we have an understanding of how vim plugins are installed we can start to add a few more packages to make the transition from your text editor easier.

Go ahead and add NerdTree to your list of plugins:

NerdTree is a file system explorer that visually displays your heiarchy which common for most text editors

NerdTree

Add this your .vimrc so when you split your selected file theres enough room for nested directories:

let g:NerdTreeWinSize=50

Syntax Highlighting

Thankfully, there is an all-one-package for syntax highlighting.

Install:

Judging by the list, you can see that it will cover almost all of your syntax needs.

Fuzzy Finding with CtrlP

Install:

In most IDE editors, you can search your files with by typing ctrl + p

This plugin adds that functionality.

ctrlp

add this snippet to your .vimrc to let CtrlP search only with in the directory where you called the command:

in .vimrc: let g:ctrlp_working_path_mode = ""

Autocomplete

Here we’ll install two plugins:

Supertab adds a tabbing functionality for completion.

YouComplete adds an autocomplete function for almost all languages natively.

Status bar

Lightline adds a status bar at the bottom of vim buffer:

lightlinebar

Install:

Surround

Surround completes the brackets and curly braces when you write code:

Install:

Edit Config

EditorConfig lets you configure your editor to your liking.

Install:

If want to do in your .vimrc, this script lets you add margin, numbered lines and configure tab vs spaces:

" add numbered lines
set number
" adds slight margin to the left of buffer
set foldcolumn=1 
" sets tab
see tabstop=2
" set shiftwidth with >
set shiftwidth=2
" tabs with two spaces
set expandtab
" adds column of 80
set textwidth=80
set wrapmargin=80

Tmux

Tmux is a terminal multiplexer. It let you use and split multiple terminal windows within the same session.

Install on Ubuntu/Debian: sudo apt install tmux

Install on Osx via brew: brew install tmux

common commands:

start tmux session

  • $ tmux

split window vertically or horizontally

  • ctrl + b; shift + % or "

adjuse size of terminal window

  • ctrl + b; ctrl + arrow keys

There we go we have all the plugins and tools necessary to replace your text editor with vim. We’ve added basic functionality that you get with an out box Sublime, VSCode or Atom.

Here is what my terminal looks like while writing this post:

nicoterminal

On the left you can see the nerd tree window showing the directory. To the right there is a split buffer opened from nerd tree using i or s The bottom left is a horizontally split Tmux terminal used for running the localserver. In the bottom right is an auxillary Terminally split vertically from my server window.

Hopefully this guide gets you up and running and helps you to be productive in your workflow by leveraging Vim and its associated plugins.