Switching from Visual Studio Code to Vim: the basics.

The internet is a wash with tutorials and blog posts on Vim but you can quickly find yourself drowning in all the resources available. Consider this blog post an attempt at a life-raft. In this post I’ll outline the basic information required to establish a workflow using Vim and the windows manager, tmux. I have set up my workflow on the Windows Subsystem for Linux (WSL) but it is applicable to Linux or Mac OS.

Why bother?

It’s a good question. VS Code is just one of a plethora of perfectly good text editors that can be used straight out of the box. So why spend time struggling with the Vim learning curve?

Personally, my initial motivation was for ergonomic reasons. My previous job has left me with some over-use injuries in my right arm and reaching the mouse everytime I want to edit text was exacerbating those issues. Yes, I am aware you can use Vim key bindings in VS Code but there are so many other advantages of Vim, plus let’s face it — being able to use Vim just seems cool.

Getting started with Vim

When you first start out with Vim there are two things to focus on: getting to grips with the key bindings (Vim commands) and customising Vim. With both of these aspects I’d recommend starting small.

Vim modes and key bindings

There are so, so many Vim commands. It’s what makes Vim incredibly powerful but it also makes it a challenge to get started. First, understand Vim has different modes. Get used to understanding which mode is required for the task you want to perform. Want to save your file? Delete several lines? Move to specific line number? You need the normal mode. Want to write text? Enter the insert mode. Want to highlight several lines of text? Perform an action on a text block? Welcome to the visual mode. At first you will feel like a 5 year old hammering at keys trying to figure out which mode you need to be in but you will get there.

Next, tackle a small number of Vim commands. Start with the essentials and build up your muscle memory with those commands before expanding your repertoire. The Linux Vim tutorial is an excellent no-frills way to get started. Simply enter vimtutor in your terminal command line. I would recommend doing the first few lessons several times to build on that muscle memory, rather than completing the whole thing from the get-go.

To create a file in Vim: vim <filename>.<extension_of_choice>. A couple of basics to get started (execute the commands from normal mode):

• q Quit the file
• w Write (save) the file
• gg Navigate to the start of a file
• G Navigate to the end of a file
• $ Navigate to the end of a line
• 0 Navigate to the start of a line
• i Enter the insert mode

Customising Vim

There are two ways you can customise your Vim setup: enabling the built-in Vim extensions, which by default are disabled, or installing external plugins. Whichever path you choose, your gateway to Vim customisation is your .vimrc file. This is your Vim configuration file. If you haven’t used Vim before, you’ll need to create your config file in your home directory~/.vimrc.

Vim customisation is another area where internet research is both friend and foe. Like I said at the start — begin small. Think about which Vim features you really need to add/modify so that you can start using Vim on a regular basis. Once you perform the bare minumum customisations, just get used to working in Vim for a while. Overtime start to add more customisations as you identify the issues that bug you/could improve your efficiency. If you add a customisation and it isn’t working for you, remove it. Don’t go wild and add/enable every Vim plugin/feature that takes your fancy from the start. You’ll end up with a bloated .vimrc file and when you want to edit a customisation you won’t have a clue which one it was.

These were the features I customised within the first few weeks of using Vim:

• Appearance. I wanted Vim to look pretty, like VS Code. I installed this plugin to change the colour scheme and enabled syntax highlighting by adding syntax on to my .vimrc .
• Identifying current mode. Switching between Vim modes in WSL can be a bit sluggish. This plugin easily identifies which mode you’re currently in.
• Enabling auto indent and set tab to two spaces. I’m studying Ruby at Launch School so I set my .vimrc to insert two spaces when I hit the tab key using set tabstop=2 and set expandtab. I want Vim to autoindent to the same indentation as the previous line, set autoindent and for the default indentation to be two spaces set shiftwidth=2 .
• Enable line number. To make ensure line numbers are visable as default, add set number .

You can view my .vimrc file here.

Customising your .vimrc takes time. To avoid remembering all your customisations each time you set up a new machine, I recommend creating a dotfiles directory. Save all your configuration files, such as .vimrc and .bashrc in the dotfiles directory and push it to Github. The problem is Vim will read your ~/.vimrc file as default, not your ~/dotfiles/.vimrc file. To ensure Vim reads your updated, version controlled ~/dotfiles/.vimrc each time you open Vim, you can create a symbolic link between ~/.vimrc and ~/dotfiles.vimrc . That means whenever Vim goes to read ~/.vimrc it will be automatically re-directed to your ~/dotfiles/.vimrc file. Creating a symbolic link is easy:

# ln establishes a link; -s flag creates a 'soft' or symbolic link
# ~ is shorthand for your home directory
ln -s ~/dotfiles/.vimrc ~/.vimrc

To check it has worked, navigate to your home directory and enter ls -lah . Using the -lah flags in addition to ls means you can view files beginning with . , which are normally hidden, in a human-readable manner. You should see this:

Which shows the ~/.vimrc file is re-directed to the ~/dotfiles/.vimrc file.

Vim and tmux combo in action

Using tmux

A feature I liked in VS Code was the ability to have my text editor in one half on the screen and a terminal running below. This can be re-created by installing tmux . tmux is a powerful tool, a discussion of which is beyond the scope of this article. Cheatsheets are available but the basic process I use is:

• Navigate to your working directory and enter tmux in the terminal. This starts a new tmux session.
• tmux commands generally start by holding ctrl and b at the same time, releasing those keys then entering an additional command key.
• To split the screen horizontally, hold ctrl and b then enter " .
• To navigate between the two panes, hold ctrl and b then use the up or down arrow keys.
• To exit tmux you can use the command tmux detach , which detaches but doesn’t kill the session, or ctrl and b then enter x to kill each pane.

I hope this post helps you navigate your learning journey. Good luck and enjoy!