How I use Vim for Web Development — Part 1 (Plugins)

If you came here hoping I will convince you to use Vim, I won’t — or at least I’m not trying to. There are plenty of preachers out there, and you can easily find them. To be honest, I’m here because of them.

I’m hoping I can help those already determined to use Vim to find an easy way of configuring and installing basic plugins, just to make it better (if possible).

Installation

Make sure you have Vim installed and ready to go. If you use linux, you can do this to make sure it’s correctly installed:

sudo apt update
sudo apt install vim
vim --version

And if you use Mac, you should install it using Homebrew, even if it comes already installed on your system:

brew install vim

Learn it!

There’s nothing I could teach you that hasn’t already been said here.
Seriously, there are no plugins that could make up for practice. First, you learn how to use it, and then how to improve it. You can’t run if you don’t know how to walk.

Plugins, use them carefully

Now let’s talk usability! There are loads of plugins for anything you could need, and even more for things you don’t. So before you start installing everything you see that you “might” use, think about stuff you already miss everyday. With that in mind, let’s get down to it!

First, you should install a plugin manager, just to make things easier. You can choose not to, but again, I’m just someone sharing with you what works for me. I use Vim Plug, but feel free to pick any other you think it’s going to work better for you. After installing it and removing unnecessary lines, your .vimrc should look like this:

If you don’t know what a .vimrc is, it’s a file located in your home directory that holds your vim configurations. If you don’t have it, you can create it.

NERDTree

The first thing you might question when starting to use vim is: do I really need to go through all of this just to get to another file/directory?

The answer is no, you can learn how to use Vim’s default navigation, but as we’re talking about usability, NERDTree is the way to go.

I don’t know about you, but I like things working for me, not otherwise.

Put this line after call vundle#begin() (see code above):

Plugin 'scrooloose/nerdtree'

After this, you can type :source % on normal mode, and then :PluginInstall. Do this for every plugin you install with Vundle.

Make sure you are editing your .vimrc on vim, otherwise this commands won’t work

You can now use NERDTree by typing :NERDTree on normal mode.

Ctrl P

Ok, NERDTree is great, but sometimes you just happen to know the name of your file and you don’t want to search for it inside billions of folders, I know. For that you should have Ctrl P. Thank me later.

Plug 'kien/ctrlp.vim'

Vim Polyglot

This one is a language pack for multiple languages. It tells Vim how to highlight and indent any kind of file supported by it.

Plugin 'sheerun/vim-polyglot'

Vim Closer

Now this one is a must if you can’t really tell whether you’ve left an open parenthesis or you just have a typo. If you open any, or multiples, of these ([{, and press enter, magic will happen.

Plugin 'rstacruz/vim-closer'

Vim Airline

This one is a little cosmetic, but it sure gives you that status bar you have always wanted.

Plugin 'vim-airline/vim-airline'

Vim Prettier

If you work with JavaScript, there are so many things you have to worry along the day. Yes, I know the drill, it’s a love AND hate relationship. That’s why prettier saves me everyday: if I miss a space, or an indentation, I just press <Leader>p and everything gets pretty! I have configured my leader to ,, but I will tell you more about it later on.

Plugin 'prettier/vim-prettier'

Vim Fugitive

As a developer, Git is a part of who I am, it’s a commitment.

[pause for laughter]

But seriously, when I discovered this plugin, it was life changing. It took me a while to get use to typing :Git instead of leaving Vim or changing tabs. But once I got the hang of it, I’m giting all over the place.

Plugin 'tpope/vim-fugitive'

Python related

I am learning Python right now, so I’m still confused by some syntax and indentation. These two are life saving:

Plug 'vim-scripts/indentpython.vim'
Plug 'nvie/vim-flake8'

Vim Surround

This plugin is great for dealing with “surroundings”, like <>, {}, (), etc… It helps you add, remove and change them with easy commands.

Plug 'tpope/vim-surround'

Gruvbox

This one is totally subjective. It’s a retro inspired colorscheme.

Super colourful themes, that usually come by default, hurt my eyes and don’t match my color taste. So even if you don’t like gruvbox, I suggest you search for one you get comfortable with, especially if you’re going to use it day and night.

Plugin 'morhetz/gruvbox'

After Vim Plug config, I set gruvbox to dark mode:

colors gruvbox
set background=dark

If you think something is still missing, check VimAwesome. But remember to keep it simple and functional, otherwise you should pick another text editor that is considered complete, with features you’ll never use, but using memory you always need.

Soon: How I use Vim for Web Development — Part 2 (Configuration)