Neovim Setup for Development

Neovim Setup for Development

There are many available tools for software developers that we could take advantage of. We all have our preferences when it comes to tools, or it may just depend on the requirements this can range from web browsers, terminals, text editors, and many more. But have you heard of Neovim?

For this article, I would like to share how I use Neovim as my text editor for web development at my work which would require you the basic knowledge of Vim. There’s a Vim cheat sheet (https://vim.rtorr.com/) available online that you can use to study. I will also add some terminal plugins that may help you as well. For a little bit of context about Neovim, it’s a refactored version of Vim with a smaller codebase that focuses on usability and extensibility. The main reason I switched to Neovim from Vim is because of the improvement of performance for things like linting and code completion. But between the two, there isn’t much difference.

Now to start, you need to install Neovim first, which you can check here: https://github.com/neovim/neovim/wiki/Installing-Neovim. It varies for every system so try out the one that suits you. Then, the next step is to install plugins for our Neovim. We can use Neovim as is but plugins can help ease our development. We will be using vim-plug (https://github.com/junegunn/vim-plug) as our plugin manager for our Neovim. This plugin manager is simple and easy to use so I recommend this one.

Plugins

I will run through the plugins that I use for Neovim. This will not include every plugin that I use, but only the key plugins that I wouldn’t be able to live without will be included. I use VimAwesome (https://vimawesome.com/) to look for plugins.

Since we are using vim-plug as our plugin manager, we will be needing to include the plugin inside the config. For Neovim, the config file should be located on ~/.config/nvim/init.vim. We need to add the line for the plugins inside the call plug functions:

call plug#begin()
Plug <plugin_name>
call plug#end()

Then you’ll be needing to :source % then :PlugInstall.

junegunn/fzf.vim (https://vimawesome.com/plugin/fzf-vim)

This plugin can help us search through files and folders. We can also use this to quickly switch to another file.

To install:

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

By default, this will also search for files inside node_modules, which may cause more time when searching. To remove it, include this line inside .zshrc:

export FZF_DEFAULT_COMMAND='fd --ignore-file=.gitignore'

With this, fzf should ignore all the files and folders written inside .gitignore.

You may also set a shortcut key (ctrl+p) for this by adding this line inside your Neovim config:

nnoremap <C-p> :FZF<CR>

preservim/nerdtree (https://github.com/preservim/nerdtree)

With nerdtree, we can check the structure of the project directly inside Vim. We can also add files and folders inside nerdtree so we won’t be needing to go into our file explorer to do those actions.

We can set our shortcut key (ctrl+e) as follows.

nnoremap <C-E> :NERDTreeToggle<CR>

To install:

Plug 'preservim/nerdtree'

xuyuanp/nerdtree-git-plugin (https://github.com/Xuyuanp/nerdtree-git-plugin)

With this plugin, we can further improve our nerdtree. It will add a git status indicator for each file and folder inside nerdtree.

You can include this variable to change the symbols for the status indicators.

let g:NERDTreeGitStatusIndicatorMapCustom = {
                \ 'Modified'  :'✹',
                \ 'Staged'    :'✚',
                \ 'Untracked' :'✭',
                \ 'Renamed'   :'➜',
                \ 'Unmerged'  :'═',
                \ 'Deleted'   :'✖',
                \ 'Dirty'     :'✗',
                \ 'Ignored'   :'☒',
                \ 'Clean'     :'✔︎',
                \ 'Unknown'   :'?',
                \ }

To install:

Plug 'xuyuanp/nerdtree-git-plugin'

dyng/ctrlsf.vim (https://vimawesome.com/plugin/ctrlsf-vim)

This plugin can help us search through the codebase of the entire project. This acts like the grep function in VS Code.

To use it you’ll need to type :CtrlSF <pattern>, then it will search through the codebase.

To install:

Plug 'dyng/ctrlsf.vim'

pechorin/any-jump.vim (https://vimawesome.com/plugin/any-jump-vim-who-speaks)

This plugin will let you check all definitions and references based on the text your cursor is focused on. To use, you just need to focus on a text, then type :AnyJump.

To Install:

Plug 'pechorin/any-jump.vim'

mg979/vim-visual-multi (https://github.com/mg979/vim-visual-multi)

This plugin will let you select multiple words and edit it. Basic usage is to focus on a word, press ctrl+n, then it should select another similar word. You can edit all of it from there at the same time.

To install:

Plug 'mg979/vim-visual-multi', {'branch': 'master'}

tpope/vim-surround (https://github.com/tpope/vim-surround)

With this plugin, adding a surrounding pair of parenthesis, brackets, etc. will be easier.

Basic usage as shown in the gif is:

yss”    // Add “ in whole line
cs”’    // Change “ to ‘
ds’    // Delete surrounding ‘

To install:

Plug 'tpope/vim-surround'

Some more Neovim configurations

Those are the key plugins that I think you’ll want as well for Neovim. I didn’t include the language specific plugins like code completion and linting because there’s plenty but I use coc (https://github.com/neoclide/coc.nvim) if ever I need one.

Now an additional configuration for Neovim that I like is this one:

augroup numbertoggle
    autocmd!
    autocmd BufEnter,FocusGained,InsertLeave * set relativenumber
    autocmd BufLeave,FocusLost,InsertEnter * set norelativenumber
augroup END

When you’re in normal mode, this will make the numbers on the left side of Vim turn into relative numbers. However, once you switch to insert mode it will change into absolute numbers.

This is very helpful as you can make full use of <line_number>gg and <line_number> j or k letting you navigate the file so much easier.

Terminal Plugins

If we’re talking about Neovim, why not talk about some terminal plugins as well? If you’re a heavy user of the terminal, I also know some plugins that may help you.

To install these plugins, I recommend installing it through oh-my-zsh. To clarify, these plugins are for your shell, not Neovim.

zsh-history-substring-search (https://github.com/zsh-users/zsh-history-substring-search)

What this plugin does is that if you type, let’s say zsh on the terminal like the GIF below, it will look back into history with the zsh text. This is really helpful if you only remember the fragment of a command.

You can set a shortcut key for this plugin:

​​bindkey '^k' history-substring-search-up
bindkey '^j' history-substring-search-down

With this shortcut key, you only need to use ctrl+j or k to search back and forward. You can change it to any that you want.

zsh-autosuggestions (https://github.com/zsh-users/zsh-autosuggestions)

This plugin will suggest the whole command and be able to accept it based on your history. This is very helpful if you don’t want to type the whole command.

bindkey '^l' autosuggest-accept

With this shortcut key, you’ll be able to accept the suggestion by using ctrl+l.

zsh-syntax-highlighting (https://github.com/zsh-users/zsh-syntax-highlighting)

This adds syntax highlighting on your terminal. Helpful to know if the command you’re typing is executable.

With the combination of these plugins you’ll have a terminal powerhouse. There are a lot of times where I use all of this and have wondered what would’ve happened if I didn’t have these plugins.

Final Thoughts

Needless to say, Neovim isn’t for everyone and can be quite daunting and time-consuming when starting. If you’re looking for a keyboard-centric type of text editor, then this can be your go-to text editor as well. But this doesn’t mean that we should stick to only one text editor. As developers, we should take advantage of any tools possible that will help us deliver any tasks promptly. As for this case, we can make use of Neovim for quickly editing the code, and then make use of other text editors like VS Code for navigating throughout the project, and make use of some of its extensions when setting up the project. Neovim is good if you want to type faster as this will remove the usage of your mouse and just solely focus on the usage of your keyboard.