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

Vim’s initial screen

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
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!

NERDTree

Plugin 'scrooloose/nerdtree'

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.

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.

Plugin 'morhetz/gruvbox'
colors gruvbox
set background=dark

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store