How to get started with vim for web development in 2021

# How to get started with vim(neovim) for web development in 2021
Getting started with vim can be feeling hard if all you've seen of vim is a scary old terminal editor. But fear not! When setting up your vim for success with the right plugins and color theme it will become your new best friend. 

A quick note I use [neovim](https://neovim.io/) as my "vim" editor and therefore I will show you the workflow with [neovim](https://neovim.io/) in this article.

## What is VIM?
"Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X." taken from vim.org. 

Now okay, that sounds awesome but why is it very efficient? Vim can be very efficient because of its smallness and simplicity, therefore it does not consume a significant amount of system resources as opposed to other editors.

## What is Neovim?
Neovim is a continuation and extension of Vim. Neovim comes with the good parts of vim and more. Neovim has some architectural changes that bring more stability, performance and make the code more maintainable.

### Installing Neovim
Neovim got a great wiki section regarding installing it that you can find [here](https://github.com/neovim/neovim/wiki/Installing-Neovim)

## How to install and use vim-plug for neovim.
The plugin manager I use for vim is vim-plug and therefore I will show you how to install that. There are more plugin managers you could use if you want to and feel free to find the one that suits your needs best.

### Installing vim-plug for macOS/Linux
Run the following command inside your terminal.

```bash
sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs \
 https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'
```

### Installing vim-plug for Windows
Run the following command inside PowerShell.

```powershell
iwr -useb https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim |`
    ni "$(@($env:XDG_DATA_HOME, $env:LOCALAPPDATA)[$null -eq $env:XDG_DATA_HOME])/nvim-data/site/autoload/plug.vim" -Force
```

### How to use vim-plug
If you want to learn more on how to use vim-plug you can check out their [tutorial](https://github.com/junegunn/vim-plug/wiki/tutorial)

The basics of using vim-plug are:
1.  Begin the section with `call plug#begin()`
2.  List the plugins with `Plug` commands
3.  `call plug#end()` to update `&runtimepath` and initialize plugin system
    -   Automatically executes `filetype plugin indent on` and `syntax enable`. You can revert the settings after the call. e.g. `filetype indent off`, `syntax off`, etc.
4. Reload `~/config/nvim/init.vim` and `:PlugInstall` to install plugins.

*You can reload your init.vim while still editing it by running `:so %`*

## Selecting a color theme for neovim.
Now that we got vim-plug installed we can get some colors 🎨

I will show you how to install [gruvbox](https://github.com/morhetz/gruvbox) but here you can research and find a color scheme that suits you the best. Installing will be the same for most color schemes.

Inside the vim config add `Plug 'morhetz/gruvbox'` reload your config and run `:PlugInstall`

After that, you need to add the following to your vim config. Beware that this does not have to be inside your plug section.

```vim
syntax enable
colors gruvbox
```

An example of how it could look inside your config 👇
```vim
call plug#begin()
Plug 'morhetz/gruvbox'
call plug#end()

syntax enable
colors gruvbox
```

## Plugins to improve your developer experience
Some plugins I use daily to improve my developer experience is the following:
```vim
Plug 'nvim-telescope/telescope.nvim'
Plug 'scrooloose/nerdtree'
Plug 'itchyny/lightline.vim'
```

**[Telescope](https://github.com/nvim-telescope/telescope.nvim)**
Telescope is a highly extendable fuzzy finder over lists.

The following let's you use telescope with the bindings of leader key then ff, fg, fb, fh.
```vim
nnoremap <leader>ff <cmd>Telescope find_files<cr>
nnoremap <leader>fg <cmd>Telescope live_grep<cr>
nnoremap <leader>fb <cmd>Telescope buffers<cr>
nnoremap <leader>fh <cmd>Telescope help_tags<cr>
```

**[Nerdtree](https://github.com/preservim/nerdtree)**
Nerdtree is a file system explorer.

To toggle Nerdtree add the follwing to your config:
`nnoremap <C-Space> :NERDTreeToggle<CR>`
This lets your toggle nerdtree with CTRL + Space

**[Lightline](https://github.com/itchyny/lightline.vim)**
Lightline is a light and configurable statusline/tabline plugin for Vim

An example of lightline:
![example of lightline](https://raw.githubusercontent.com/wiki/itchyny/lightline.vim/image/powerline.png)

## Plugins for web development
When working with web development it's nice to have the correct syntax highlighting, autocompletion and linting.  I will now show the plugins I use when working with web development(Typescript, Next.js, React, etc.).

```vim
Plug 'neoclide/coc.nvim', {'branch': 'release'}

Plug 'maxmellon/vim-jsx-pretty'
Plug 'pangloss/vim-javascript'
Plug 'leafgarland/typescript-vim'
Plug 'peitalin/vim-jsx-typescript'

Plug 'styled-components/vim-styled-components', { 'branch': 'main' }
Plug 'jparise/vim-graphql'
```

The first plugin I use is coc. Coc is a intellisense engine for VIM.  Now the rest plugins I use are providing me with the correct syntax highlighting and autocompletion.

### Improving the power of coc
Some extra small tips I have inside my config for coc is the following:
```vim
let g:coc_global_extensions = [
  \ 'coc-tsserver'
  \ ]

if isdirectory('./node_modules') && isdirectory('./node_modules/prettier')
  let g:coc_global_extensions += ['coc-prettier']
endif

if isdirectory('./node_modules') && isdirectory('./node_modules/eslint')
  let g:coc_global_extensions += ['coc-eslint']
endif
```
These make sure that coc with typescript is up to date and installed. Also, since I often use eslint and prettier in my projects I have configured coc to install the relevant coc extension for them if they're being used.

Thank you for reading this blog post! You can find more posts like this on my website: [pluppen.com](https://pluppen.com/blog)

And at last, don't forget to share your VIM config with me and show off your awesome vim environment.


Blog

How to get started with vim for web development in 2021