DEV Community

Cover image for 10 Vim plugins I can’t live without (and how to install them?)
Adnane Kouna
Adnane Kouna

Posted on • Originally published at techdemon.hashnode.dev

10 Vim plugins I can’t live without (and how to install them?)

Introduction

Vim (short for Vi IMproved) is a free and open-source text editor released in 1991 by Bram Moolenaar. 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:

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
Enter fullscreen mode Exit fullscreen mode

For Windows users :

iwr -useb https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim |`
    ni $HOME/vimfiles/autoload/plug.vim -Force
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

The plugins I can't live without

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
Installation :

Plug "mhinz/vim-startify"
Enter fullscreen mode Exit fullscreen mode

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

Installation :

Plug "preservim/nerdtree"
Enter fullscreen mode Exit fullscreen mode

Lightline

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

Installation :

Plug "itchyny/lightline.vim"
Enter fullscreen mode Exit fullscreen mode

Cheat.sh

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

Screenshot_20220103_160347.png

Installation :

Plug "dbeniamine/cheat.sh-vim"
Enter fullscreen mode Exit fullscreen mode

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

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.

Installation :

Plug "tpope/vim-surround"
Enter fullscreen mode Exit fullscreen mode

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

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

Installation :

Plug "sheerun/vim-polyglot"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

Useful Commands :
You can find all the abbreviations and shortcuts in the documentation.

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

Installation :

Plug "airblade/vim-gitgutter"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

Useful Commands :

  • gcc : comments out a line.
  • gc : comments out the selected text.

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

Installation :

Plug "ap/vim-css-color"
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)