10 Vim plugins I can’t live without (and how to install them?)
Tags: vim, plugins, ide, top10
Published: 2022-01-04 08:59:27

## Introduction
Vim (short for Vi IMproved) is a free and open-source text editor released in 1991 by [Bram Moolenaar](https://en.wikipedia.org/wiki/Bram_Moolenaar?oldformat=true). It’s one of the most popular text editors among developers, in fact it is the 5th most used IDE according to the 2021 Stack Overflow Developer Survey.
Its rising popularity is mostly due to its minimalism, fast workflow and high customizability, since not only are there multiple shortcuts for literally everything, it also has thousands of plugins that you can install and customize in a couple of seconds (thanks to the amazing and creative community it has).
And in this article, we’re going to give you 10 Vim plugins to make your workflow even faster and easier and turn your simple text editor into a fully working Integrated Development Environment.

Note : *This tutorial is aimed directly towards Vim, but you can still apply it to NeoVim too.*

## How to install Vim Plugins?
Like practically anything else in Vim, there is no one particular way to install plugins and to make it easy for you, here are the most popular options:

- [Manual Installation](https://howchoo.com/vim/how-to-install-vim-plugins-without-a-plugin-manager) 
- [Vundle](https://github.com/VundleVim/Vundle.vim)
- [Pathogen](https://github.com/tpope/vim-pathogen)
- [Vim-Plug](https://github.com/junegunn/vim-plug), and it's the method we are going to the use for the rest of this article.

### To install the plugins
First, we need to execute the following commands to install Vim-Plug :

*For Linux/Mac users :*
```
curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
``` 

*For Windows users :*
```
iwr -useb https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim |`
    ni $HOME/vimfiles/autoload/plug.vim -Force
``` 
Then, you have to add a Vim-Plug section to your Vim Configuration File (aka .vimrc) :
```
call plug#begin()
Plug ""
Plug ""
Plug ""
call plug#end()
```
Note : *insert the link to a plugin repository between the quotations to add it to Vim-Plug.*

After that, we only need to execute this command (in Vim) in order to completely install the added plugins :
```
:PlugInstall
```

## The plugins I can't live without
###  [Startify](https://github.com/mhinz/vim-startify)
**Overview :** Whenever you open vim without a file, it opens in a new file. Instead with Startify, you get this fancy looking start page with bookmarks, recently opened files and an advising cow on top.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641043231582/GAUynv2_X.png)
**Installation :**
```
Plug "mhinz/vim-startify"
```

### [NERDTree](https://github.com/preservim/nerdtree)
**Overview :** To browse different folders and files, you don't have to exit anymore thanks to NERDTree that provides a file hierarchy explorer inside Vim like many other modern IDEs.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641045929899/tq3nP4q0V.png)

**Installation :**
```
Plug "preservim/nerdtree"
```

### [Lightline](https://github.com/itchyny/lightline.vim)
**Overview :** Instead of a plain text with the active mode, you can get a very cool and colorful status bar containing the active mode, the name of the file and the position of the cursor...etc.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641049326132/RwgaYztH5.png)

**Installation :**
```
Plug "itchyny/lightline.vim"
```
### [Cheat.sh](https://github.com/dbeniamine/cheat.sh-vim)
**Overview :** How many times have you looked up how to invert an array or how to make a switch statement in JavaScript? If the answer is more than once, then you definitely need this plugin. Cheat.sh is a website that has tons of cheatsheets for every programming language, and thanks to this plugin you can access all these plugins directly from Vim.

![Screenshot_20220103_160121.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641222352748/jOdotjd0i.png)

![Screenshot_20220103_160347.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641222378868/fABcS3woh.png)

**Installation :**
```
Plug "dbeniamine/cheat.sh-vim"
```

**Useful Commands :**
- *leader key* + KK : to look up the selected text/line.
- *leader key* + KR : to replace the selected question by its answer.
- :Cheat + *question* : to look up the question.
- :HowIn + *language or framework* + *question* : to look up the question in the specified language.

### [Vim-Surround](https://github.com/tpope/vim-surround)
**Overview :** More to the lazyness, ahem, I mean the time effectiveness of developers, now you don't even have to change the surrounding characters by yourself thanks to surround.vim. It is developed by the famous Vim plugin artist *[tpope](https://github.com/tpope)*.

**Installation :**
```
Plug "tpope/vim-surround"
```

**Useful Commands :**
- :cs+*old-surrounding*+*new-surrounding* : changes surrounding characters (*e.g. :cs'" -> changes 'string' to "string"*).
- :ds+*old-surrounding* : deletes surrounding characters (*e.g. :ds' -> changes 'string' to string*).


### [Vim-Polyglot](https://github.com/sheerun/vim-polyglot)
**Overview :** Can we all agree that one of the main reasons we fell in love with programming is the aesthetics? And because of that, you cannot have a popular IDE without some proper syntax highlighting and among the best plugins to provide this, there is Vim Polyglot, compatible with hundreds of programming languages.

![Screenshot_20220103_163621.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641224253544/y53E8E575.png)

**Installation :**
```
Plug "sheerun/vim-polyglot"
```

### [Emmet-Vim](https://github.com/mattn/emmet-vim)
**Overview :** This plugin is one of two in this list that are specific to Web Development. If you have already heard of Emmet before, then this plugin is just the vim version of it. If not, Emmet is a set of plugins that speeds up coding in HTML and takes it to a whole another level of easability thanks to the tons of intuitive and easy to learn shortcuts and abbreviations it has.

**Installation :**
```
Plug "mattn/emmet-vim"
```

**Useful Commands :**
You can find all the abbreviations and shortcuts in the [documentation](https://docs.emmet.io/abbreviations/syntax/).

### [Vim-Gitgutter](https://github.com/airblade/vim-gitgutter)
**Overview :** If you're a coder or a developer, odds are you use Git on a semi-daily basis. If you do indeed use Git, then this next plugin is definitely for you. It shows, in the sign column, all the edits you have made since the last commit.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641225857793/5nD9VgUpY.png)

**Installation :**
```
Plug "airblade/vim-gitgutter"
```

### [Vim-Commentary](https://github.com/tpope/vim-commentary)
**Overview :** Instead of having to switch modes in order to comment out chunks of your code, you can do this in much less keystrokes thanks to this plugin.

**Installation :**
```
Plug "tpope/vim-commentary"
```

**Useful Commands :**
- gcc : comments out a line.
- gc : comments out the selected text.

### [Vim-CSS-Color](https://github.com/ap/vim-css-color)
**Overview :** This is the second Web-Dev specific plugin in our list, there's not much to explain here, it does exactly what it says : it previews the HEX colors in CSS files which makes it easier for you to remember which color is which while working on large projects.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1641226685032/Jd03up2CT.png)

**Installation :**
```
Plug "ap/vim-css-color"
```

## Conclusion
These are 10 necessary Vim Plugins that extend the usability of Vim and turn it into a full integrated development environment. Don't forget to comment your favourite Vim plugin, I would love to discover some more.
This is also my first blog ever, so I would love to get your opinions and constructive criticism in the comments below.