Step Up Your Game with Neovim

Neovim

Why do I switch to VIM and use Neovim?

Working as a Software Engineer, I type a lot on a daily basis. Coding requires a lot of typing, which means that I need to find a way to type faster.

As of now, I’m a Software Engineer at Moka, a leading cloud-based Point-of-Sales system in Indonesia. I’m working as a full stack engineer, which means working on both front-end and back-end. With the amount of work I have, I need something to boost my speed. Furthermore, I dislike having to switch between mouse and keyboard every time I need to navigate between windows, tabs, or lines of code. Hence, VIM came in as a solution.

VIM is a text editor for UNIX, but it’s very different from the text-editor that you know such as Visual Studio Code, Sublime Text, Notepad++, etc. Those text-editors are good, but VIM just takes it on a whole new level. There are several forks of Vim such as SpaceVIM and Neovim. I decided to use Neovim because it’s easier to set up in my opinion.

Disclaimer: I’m still a VIM newbie as well since I started to use it less than a year ago. Any input or suggestion which could improve my whole setup is welcome!

Installing Neovim

Linux

You can install using package manager by running the command below:

sudo apt install neovim

This command should run just fine on Ubuntu and other Linux distros, for details about Linux installation, you can check it out here.

MacOS

There are two methods you can use, either Homebrew or Macports

Homebrew

brew install neovim

Macports

sudo port selfupdate
sudo port install neovim

Windows

You can use either Chocolatey or Scoop.

Chocolatey

choco install neovim

Scoop

scoop install neovim

For more details about the installation, you can checkout the installation wiki.

To verify that you have successfully installed Neovim, run nvim and it should open a Neovim start-up screen.

Setting Up Neovim

Upon writing this article, I’m installing and running Neovim on MacOS. If you happen to run against any problems on other platforms, you are welcome to leave a comment and I will try my best to help you.

Config directory

For Linux/MacOS the config directory for Neovim should be at ~/.config/nvim . If it doesn’t exist, you can run the following command:

mkdir ~/.config/nvim

And for Windows it’s located at ~/AppData/Local/nvim . If it doesn’t exist, run the following command:

mkdir ~/AppData/Local/nvim

To kickstart the setup, we will first install a plugin manger to manage all the plugins. I’m using Plug to manage my plugins. There are several plugin manager such as Vundle and Pathogen.

Linux/MacOS

curl -fLo ~/.config/nvim/autoload/plug.vim --create-dirs \
 https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

Windows

md ~\vimfiles\autoload
$uri = 'https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'
(New-Object Net.WebClient).DownloadFile(
  $uri,
  $ExecutionContext.SessionState.Path.GetUnresolvedProviderPathFromPSPath(
    "~\vimfiles\autoload\plug.vim"
  )
)

Adding Plug (VIM Plugin Manager)

The config file for Neovim is named as init.vim and is located at the config directory. If it doesn’t exist, you can create one. Copy and paste the following codes to your config file to allow Plug to manage your plugins:

// Note that the plugin file location might be different. You might want to recheck it manually.
call plug#begin("~/.config/nvim/plugged")
  " Plugin Section
call plug#end()
" Everything after this line will be the config section

Put the following codes at the top of the file to ensure that the plugin will be loaded every time you run a vim session. The way the plugin is installed by Plug is by adding references to the Github repositories. So for example if we have a plugin from a repository https://github.com/pluginOwner/pluginNames , you can add the plugin by adding this:

call plug#begin("~/.config/nvim/plugged") 
  Plug 'pluginOwner/pluginNames'
call plug#end()

You will then install the plugin by using :PlugInstall command.

Customizing the Theme

To make Neovim look even better, you can add a theme to it. There are a lot of themes out there, you can pick the one that you like most. I will go with gruvbox since it just doesn’t feel right without using this theme for me. To install gruvbox add:

Plug 'morhetz/gruvbox'

Now, to set the theme, paste the following lines:

if (has("termguicolors"))
 set termguicolors
endif
set background=dark
colorscheme gruvbox

Now, type :w and :source % . Then run :PlugInstall and restart your Neovim and you will now have the gruvbox theme which looks like this.

Gruvbox color scheme

If you are using ZSH and you have already installed vim, you can add the following lines so that by default your vim will be nvim, but you still could run old vim.

alias vim="nvim"
alias oldvim="\vim"

File Explorer

Neovim is designed to be like an IDE, hence we need a file explorer. We will need the following plugins:

Plug 'preservim/nerdtree'
Plug 'tiagofumo/vim-nerdtree-syntax-highlight'
Plug 'Xuyuanp/nerdtree-git-plugin' 
Plug 'ryanoasis/vim-devicons'

We will use NERDTree as the default file explorer and combines it with folders and files highlighting and also to show git changes on folders and files. We will use devicons plugins to add icons to the files.
The config:

The <leader> pv command will open the current files in NERDTree on it’s current directory. So, it will call :NERDTreeFind and then set the vertical size of the NERDTree tab. I also added line 9 which will close all the session if NERDTree is the last tab that’s still active.

<leader> pv

For more info about how to customize them, check out NERDTree, NERDTree Syntax Highlight, NERDTree Git Plugin and Vim Devicons.

NERDTree with Syntax Highlight, Git and Devicons plugin

File Search

You can search for files really easy on Neovim by using Fuzzy Finder/FZF.

You can install it using this:

Plug 'junegunn/fzf', { 'do': { -> fzf#install() } }

Or this:

Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
Plug 'junegunn/fzf.vim'

Then add the config:

nnoremap <C-p> :GFiles<CR>
let g:fzf_action = {
  \ 'ctrl-t': 'tab split',
  \ 'ctrl-s': 'split',
  \ 'ctrl-v': 'vsplit'
  \}

You can change the :GFiles command to anything you want by referencing from this page. I’m using :GFiles since I mostly work on Git so the command will actually do git ls-files .
fzf_action is used to specify the key mapping to where the file will be opened.

• Ctrl + T will open in a new tab.
• Ctrl + S will open to the bottom. (horizontal split)
• Ctrl + V will open to the side. (vertical split)
• Enter will open in the current panel.

Add the following lines to remove node_modules from searching so that you search result won’t be cluttered by all those dependencies. It will also ignore files defined in the .gitignore file. This will require you to install silversearcher-ag . You can install it here.

let $FZF_DEFAULT_COMMAND = 'ag -g ""'

Fuzzy Search

Statusline/Tabline

To make your statusline/tabline looks less boring, you can install lightline to customize your statusline/tabline. Add the following lines:

Plug 'itchyny/lightline.vim'

And add the config:

" Lightline
let g:lightline = {
  \     'colorscheme': 'powerlineish',
  \     'active': {
  \         'left': [['mode', 'paste' ], ['readonly', 'filename', 'modified']],
  \         'right': [['lineinfo'], ['percent'], ['fileformat', 'fileencoding']]
  \     }
  \ }

For more configuration, you can checkout the Github pages here. For the colorscheme choices, you can see it here.

Your statusline/tabline will look like this.

Powerlineish color scheme

Code Completion, IntelliSense and Syntax Highlighting

There are a lot of plugins regarding this topic out there. I am using ALE, CoC and Polyglot. In my experience, those 3 complement each other.

We will need Node.js for this one. I suggest using NVM to install Node.js. For Linux/MacOS you can check this out. For Windows, you can use this.

After Node.js is installed, add this line to install the plugin:

Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'w0rp/ale'
Plug 'sheerun/vim-polyglot'

Next step, adding the config:

Most of the config for Coc is added from the Coc documentation directly.

For ALE, I use ESLint as linter and customize the icons for error and warning. I also enforce to fix and lint the file upon saving. For CoC, I added the languages that I need on the global_extensions section. I also change the mapping for the CoC functions on line 22-25 .

For Polyglot, there’s nothing to modify, but in case you want to ignore some file extensions, you can check it out here. You will need to set syntax on on the Neovim config file. I’ve added it in the last section of this article.

CoC code completion

Undo History

Neovim has built-in undo history, but I decided to use Undotree plugin instead since it allows you to write the history to a file and you can check the history in with visualization.

Undotree

Install the plugin:

Plug 'mbbill/undotree'

You will need to add the following lines to your Neovim config file in for Undotree to work properly.

set undodir=~/.config/nvim/undodir " set undotree file directory
set undofile " set undotree to save to file

I’ve added this in the Neovim config file in the last section of this article as well. I also added a mapping to open Undotree easier rather than typing the whole command. All it takes is <leader> u or in my case Space + U

" " Map show undo tree
nnoremap <leader>u :UndotreeShow<CR>

Code Commenting

You can do code comments by multiple lines editing and comment on the lines that you want. But, that takes time both to comment and uncomment. NERDCommenter solves this issue by enabling easier code commenting.

Install the plugin:

Plug 'preservim/nerdcommenter'

The config:

Now, you can use ++ to comment or uncomment. For iTerm users, you can add a key binding. I bind Cmd + / to send ++ to Neovim so I can now use Cmd + / to do code comment.

Nerd Commenter on action

Additional Plugins

These are several plugins that I added that aren’t important but they’re nice to have.

Vim CSS Color

Vim CSS Color

This plugin enables color name highlighter. You can install it by adding:

Plug 'ap/vim-css-color'

Vim Fugitive

Having the ability to run Git command on Neovim directly is what I need because imagine yourself closing your current Neovim session to run a Git command and then opening it again. You can open a new terminal session or tab, but having it embedded directly is the best. Vim-fugitive is the plugin that I’m using.

Fugitive is the premier Vim plugin for Git. Or maybe it’s the premier Git plugin for Vim? Either way, it’s “so awesome, it should be illegal”. That’s why it’s called Fugitive. — From Vim-fugitive Github page

Installation is nothing different.

Plug tpope/vim-fugitive'

Vim Surround

Surround.vim is all about “surroundings”: parentheses, brackets, quotes, XML tags, and more. The plugin provides mappings to easily delete, change, and add such surroundings in pairs.

This plugin gives you the ability to manipulate the “surroundings” of a text.
E.g, from "Hello World" to 'Hello World', or from "Hello World" to <p>Hello World</p>

This plugin comes in handy when you want to modify string quotes on different languages or change HTML tags.

You can install it by running

Plug 'tpope/vim-surround'

Vim Surround in action

Neovim Configuration

We will now config Neovim to add some extra oomph. Add the following lines:

What each config values do is described in the config file, feel free to modify or remove to your preferences.

I set space to be the leader which means every command that has <leader> mapped into it will start with space. You can change this to other keys.

I have added panel switching mapping so that I could switch between panel by using <leader> {h/j/k/l}. I also added several mapping for panel splitting in case you want to split your panel horizontally and vertically. There are also mapping for moving lines up and down. It will move the line up and down in the increment of 1.

If you often yank (copy) from your Neovim to somewhere else, I have mapped it so that you can use Ctrl + C to copy from Neovim to your system clipboard.

Vim Startify

If you dislike the default start screen for Neovim, you can opt-out and change it to Vim Startify.

Install it by running:

Plug `mhinz/vim-startify'

Restart your vim session and type vim and Voila, now you have a new fancy start-up screen.

Vim Startify start-up screen

Final Thoughts

It does take quite some time to set things up and get yourself used to it. Once you’ve had everything set up properly, I bet you will never look back to other text-editor. You can even ditch IDE(s).

Currently, I use Neovim to deal with front-end stuff like React and Node.js. I use it occasionally on Ruby or Java projects when I want to do some small edits, but for more demanding tasks, I still find myself switching back to IDE. I will improve my Neovim config for better experience to code on other languages such as Java, Go, and Ruby in the future. I will post another article about it soon.

For the full init.vim file, you can check it at my Github’s repository.

greekrode/nvim-config

If you want to know more details about config and all the mappings, you can check my Notion pages.

Thanks a lot for reading. This is my very first article. If you have any feedback or suggestions, feel free to leave a comment.