Setting Up Neovim like VSCode

My own setup

A lot of us use vscode for our day to day development work and we are used to its features. But for some of us vscode seems to be heavy on the resource usage and lags a little. So I switched to vim editor but when I started my development work, I was missing a lot of vscode features like auto-suggestions, completions, jumping to another file, etc and then I stumbled upon something that came from heaven.

Believe me this can be done in vim (neovim) too. There are lots of vim plugins available for this and even neovim 0.5 supports this out of the box with little configuration needed with lua language.

What we need

• We need a plugin manager to install plugins for our vim editor
• We also need neovim instead of vim editor for our setup.
• And we need nodejs and npm installed on our system.

Plugin Manager: vim-plug

The plugin manager that we will be using in our setup is vim-plug which can be found here. What this plugin manager will do is that it will install various utilities and plugins that the vim community has created without any builds required by the user. Just add the plugin name to the vim config and it will install that plugin.
Let's install vim plug now. As a neovim user, run

   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'

This will install the vim plug manager on your system. Now since you are using neovim, create a directory nvim in your config folder which is ~/.config for UNIX-based systems, and then there create a file as init.vim.
The final structure looks like this:

   ~/.config/nvim/init.vim

Now open init.vim file and add these lines,

call plug#begin('~/.vim/plugged')

" leave some space in between

call plug#end()

" we will add keybinds below this comment.

What these lines do? These lines call a function to enable the installed plugins whenever we open our neovim editor. Here we will add the plugins for usecases.

Plugins

As a former vscode user, I use a lot of vim plugins to make the experience better and to be honest it is okay to use a lot of plugins.

NerdTree

• To have a folder structure and to view or jump to different files while in the vim editor, We can use the plugin nerdtree.

We can install the plugin by adding,

   Plug 'preservim/nerdtree'

This will give you a directory management panel on your left side.
Now add below config and keybindings for nerdtree

"Changing default NERDTree arrows
let g:NERDTreeDirArrowExpandable = '▸'
let g:NERDTreeDirArrowCollapsible = '▾'

nnoremap <C-t> :NERDTreeToggle<CR>

The above lines change the arrow type when changing directories in nerdtree and the nnoremap keybind binds Ctrl + t to open nerdtree.
You can also look at the actions for the directory by pressing m while you are on the nerdtree panel.

Code Completion

• For the code completion I use coc vim completion plug. For this you need nodejs and npm installed to get the language packs with which you will get suggestions and code completion.

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

Add this between those two plug lines that we added from the above section.
Then add these keybindings for working with coc,

nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gr <Plug>(coc-references)

nmap <silent> [g <Plug>(coc-diagnostic-prev)
nmap <silent> ]g <Plug>(coc-diagnostic-next)
nnoremap <silent> <space>s :<C-u>CocList -I symbols<cr>

nnoremap <silent> <space>d :<C-u>CocList diagnostics<cr>

nmap <leader>do <Plug>(coc-codeaction)

nmap <leader>rn <Plug>(coc-rename)

Then to add the language packs for coc,

let g:coc_global_extensions = [
  \ 'coc-tsserver',
  \ 'coc-json',
  \ 'coc-css',
  \  'coc-eslint',
  \  'coc-prettier'
  \ ]

These are some of the language packs that I use. You can go here and can look for other language packs as well.

Now in the same directory where we created init.vim, create another file as coc-settings.json. Then add the following,

{
  "eslint.autoFixOnSave": true,
  "eslint.filetypes": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "coc.preferences.formatOnSaveFiletypes": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "tsserver.formatOnType": true,
  "coc.preferences.formatOnType": true
}

Note that these settings are only for the language packs that I use so if you are using the same packs with additional packages on top of it, you can have these configs otherwise it might create problems or give you an error when you open vim.

Colorscheme

For the color scheme, I use spaceduck, which is a blue coloured theme. To install this, add Plug pineapplegiant/spaceduck', { 'branch': 'main' }

And then add these lines below the plug function,

    if exists('+termguicolors')
      let &t_8f = "\<Esc>[38;2;%lu;%lu;%lum"
      let &t_8b = "\<Esc>[48;2;%lu;%lu;%lum"
      set termguicolors
    endif

   colorscheme spaceduck

For more details, you can look here,
dotfiles.

Thanks for reading and let me know if I can help you!