< go back to home

Vim Setup For Development

June 22, 2017

Vim is my go to code editor not just when tinkering stuff in servers but also when developing in my local machine. It is very powerful and productive due to its keyboard shortcuts which makes it just as capable as modern editors like Atom or Sublime. Out of the box, Vim might be lacking great features like syntax highlighting and tree-panel navigation. Those features are available as plugins and in this article, I am going to show Vim setup I used for most of my coding.

The commands and setups are based in Ubuntu 16.04 environment but this should be applicable or can be used as basis to other 'nix' based environments.

In Linux, Vim is usually readily available from package repositories. Let's go ahead and install Vim that way.

$ sudo apt-get install vim

To check if the installation was successful, just type vim and it shouold open VIM:

$ vim

I. Tabspaces

The first thing I configure are proper indentions and tabspaces. Create a file named "./vimrc" in your home folder which will contain vim configurations. Enter the following setup:

# use space instead of tab
set expandtab

# insert 4 spaces when tab is pressed.
set tabstop=4

# set backspace to 4 spaces also instead of single space only
set softtabstop=4

# set indention to 4 spaces
set shiftwidth=4

# set number lines to visible
set nu

Next is to set the tabspaces for specific files based on their types. For example, we might need to have Javascript files set to two tabspaces while Python files are set to four spaces. To do that, we must append the "autocmd Filetype" line in our vimrc file. Append the following codes to the current vimrc file:

# turn on syntax highlighting
syntax on

# set Javascript based files to 2 tabspaces
autocmd Filetype javascript setlocal ts=2 sts=2 sw=2 expandtab

# set HTML based files to 2 tabspaces
autocmd Filetype html setlocal ts=2 sts=2 sw=2 expandtab

# set CSS based files to 2 tabspaces
autocmd Filetype css setlocal ts=2 sts=2 sw=2 expandtab

# set files that ends with .ejs to 2 tabspaces
autocmd BufRead,BufNewFile *.ejs setlocal ts=2 sts=2 sw=2 expandtab

II. Filesystem Tree Navigation

Another important capability of a code editor is displaying treeview of a project folder. It is useful for navigating files and visualizing the project structure. For that I use NerdTree.

Let us start by installing apt-vim. Apt-vim is a plugin management tool for Vim.

curl -sL https://raw.githubusercontent.com/egalpin/apt-vim/master/install.sh | sh

Next is to install NerdTree itself:

curl -sL https://raw.githubusercontent.com/egalpin/apt-vim/master/install.sh | sh

Reload VIM (by closing it and opening) and enter the command NERDTreeToggle and you should see the treeview in the left panel.

For more conviniences like command shortcuts or automatically openning NerdTree when VIM starts, refer to NerdTree documentation here.

This is part I of the VIM setup series. Part II covers javascript linting. That's it for now. Happy coding!!!

< go back to home