Setting Up Neovim like VSCode
Tags: vim, javascript, programming, opensource
Published: 2021-10-23 10:10:52

## 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](https://github.com/junegunn/vim-plug). 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
```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'

```
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:
```bash
   ~/.config/nvim/init.vim
```

Now open `init.vim` file and add these lines,

```vim
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,

```vim
   Plug 'preservim/nerdtree'
```
This will give you a directory management panel on your left side.
Now add below config and keybindings for nerdtree

```vim
"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.

```vim
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,
```vim
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,

```vim
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](https://github.com/neoclide/coc.nvim) 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,

```JSON
{
  "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

![spaceduck](https://raw.githubusercontent.com/pineapplegiant/spaceduck-terminal/main/img/screenshot.png)

For the color scheme, I use [spaceduck](https://github.com/pineapplegiant/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,

```vim
    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](https://github.com/genzyy/suckless-builds/blob/dotfiles/config/nvim/init.vim).

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