Setting Up Neovim for Web Development in 2020

Setting Up Neovim for Web Development in 2020

  • 555

Setting Up Neovim for Web Development in 2020 .If you’ve never used [Vim](https://www.vim.org/) before, you’ll struggle with following this tutorial. However, if you want to see what can be done with Vim, I have .GIFS so keep scrolling.

Disclaimer

If you’ve never used Vim before, you’ll struggle with following this tutorial. However, if you want to see what can be done with Vim, I have .GIFS so keep scrolling.

Installing Neovim

Linux

If you’re running Ubuntu or any other Linux distro, you can use its package manager as such:

sudo apt install neovim

macOS

Same goes with macOS’ Homebrew:

brew install neovim

Windows

On Windows, you can use one of the package managers such as Chocolatey:

choco install neovim

Or Scoop.

scoop install neovim

If you’re having problems with installation, please visit the installation Wiki.

Setting Up Neovim

Although you can install Neovim on any platform, I’d highly recommend running Linux/macOS.

Just like Vim, Neovim is quite simple and doesn’t include any fancy plugins out of the box, so we are going to have to install them. Firstly, let’s install a plugin manager:

Unix (Linux/macOS)

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

Windows (PowerShell)

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"
  )
)

Editing the config file

For macOS and Linux, the Neovim config file is located in ~/.config/nvim/init.vim.

mkdir ~/.config/nvim

And for Windows:

mkdir ~/AppData/Local/nvim

And paste the following code in the config file located in the directory specified above, called init.vim. This allows you to configure plugins by adding references to their GitHub repositories like so:

call plug#begin("~/.vim/plugged")
  " Plugin Section
call plug#end()
"Config Section

Theming

The default theme for Neovim will use your terminal’s theme. Let’s change that. In the plugins section, add:

Plug 'dracula/vim'

Now, below the plugin section, in the config section, add the following lines:

if (has("termguicolors"))
 set termguicolors
endif
syntax enable
colorscheme dracula

For the changes to have an effect, you will need to install the plugin first and reload the editor like so:

nvim +PlugInstall

Then, quit the editor and open any file:

nvim App.css

Demo

Dracula theme demo for Vim

File Explorer

If we want a fully featured IDE, we need a file explorer, with icons. Simply add the following plugins:

Plug 'scrooloose/nerdtree'
Plug 'ryanoasis/vim-devicons'

And the config:

let g:NERDTreeShowHidden = 1
let g:NERDTreeMinimalUI = 1
let g:NERDTreeIgnore = []
let g:NERDTreeStatusline = ''
" Automaticaly close nvim if NERDTree is only thing left open
autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTree") && b:NERDTree.isTabTree()) | q | endif
" Toggle
nnoremap <silent> <C-b> :NERDTreeToggle<CR>

config.js

file

Now you can simply use Ctrl+B to toggle the file explorer.

Integrated Terminal

Neovim comes with an integrated terminal, however, it’s not configured out of the box so we need to add some key bindings to open and leave it in the config section:

" open new split panes to right and below
set splitright
set splitbelow
" turn terminal to normal mode with escape
tnoremap <Esc> <C-\><C-n>
" start terminal in insert mode
au BufEnter * if &buftype == 'terminal' | :startinsert | endif
" open terminal on ctrl+n
function! OpenTerminal()
  split term://bash
  resize 10
endfunction
nnoremap <c-n> :call OpenTerminal()<CR>

config.js

Now, you should be able to open the terminal with CTRL-N. To quit insert mode in the terminal, press Esc.

Now, to switch to the code editor pane, use CTRL+w w. This shortcut can get annoying once you have more than two panels open, so I added the following shortcuts too.

Switching between panels

Add the following to your config section:

" use alt+hjkl to move between split/vsplit panels
tnoremap <A-h> <C-\><C-n><C-w>h
tnoremap <A-j> <C-\><C-n><C-w>j
tnoremap <A-k> <C-\><C-n><C-w>k
tnoremap <A-l> <C-\><C-n><C-w>l
nnoremap <A-h> <C-w>h
nnoremap <A-j> <C-w>j
nnoremap <A-k> <C-w>k
nnoremap <A-l> <C-w>l

config.js

This allows you to move between your terminal and other panels with Alt+H, Alt+J, Alt+K, and Alt+L.

terminal

Integrated terminal

File Searching

In VS Code, searching for files in the current workspace can be as easy as pressing Ctrl+P and typing the name of the file.

This can be done even better with the fuzzy finder, which also has shortcuts for specifying where the newly opened file should be placed.

Add the following to your plugin section:

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

And the config:

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

Now, to search for a file, press Ctrl+P , search for the file you’re looking for, and press:

  • CTRL+T to open it in a new tab.
  • CTRL+S to open below (split view).
  • CTRL+T to open to the side (vertical split).
  • Enter to open it in the currently selected panel.

key

CTRL+P, type file name, CTRL+V

Ignoring node_modules

When using npm, the node_modules folder will often fill out most of the search results. To ignore that, and all files included in the .gitignore file, you’ll need to tell fzf to use silversearcher-ag:

let $FZF_DEFAULT_COMMAND = 'ag -g ""'

Which can be installed from here, using any package manager.

IntelliSense and Syntax Highlighting

For syntax highlighting, we will be using coc.nvim, which basically uses VS Code’s code completion.

There are other alternatives, such as ALE orLanguageClient-neovimbut from my experience, they are much harder to configure and don’t work as well with TypeScript and React. It was also rapidly adopted by the community since its release in early 2019.

This is image title

https://star-history.t9t.io

Firstly, install Node.js (Linux / macOS):

curl -sL install-node.now.sh/release | bash

And on Windows:

choco install nodejs
or
scoop install nodejs

Just to verify, make sure Node.js works by typing node --version. Note that you might have a different version to the one displayed below, and that’s OK.

Now, simply add the following lines to your plugin section:

Plug 'neoclide/coc.nvim', {'branch': 'release'}
let g:coc_global_extensions = ['coc-emmet', 'coc-css', 'coc-html', 'coc-json', 'coc-prettier', 'coc-tsserver']

And if you also need TypeScript and TSX support:

Plug 'leafgarland/typescript-vim'
Plug 'peitalin/vim-jsx-typescript'

Formatting on Save

Inside of your nvim folder (most likely ~/.config/nvim), paste the following config which will format selected files on save and show warning texts on the same line:

{
  "coc.preferences.formatOnSaveFiletypes": ["javascript", "typescript", "typescriptreact", "json", "javascriptreact", "typescript.tsx"],
  "eslint.filetypes": ["javascript", "typescript", "typescriptreact", "javascriptreact", "typescript.tsx"],
  "coc.preferences.diagnostic.virtualText": true,
}

coc-settings.json

Final Demos

IntelliSense, errors, and warnings

Errors

Errors can be configured to appear on the same line, on the bottom line, or simply stay hidden

Emmet

Adding

Adding coc-emmet allows us to use emmet shortcuts

Formatting on save

Formatting

Config files

init.vim

call plug#begin("~/.vim/plugged")
  " Theme
  Plug 'dracula/vim'

  " Language Client
  Plug 'neoclide/coc.nvim', {'branch': 'release'}
  let g:coc_global_extensions = ['coc-emmet', 'coc-css', 'coc-html', 'coc-json', 'coc-prettier', 'coc-tsserver']
  " TypeScript Highlighting
  Plug 'leafgarland/typescript-vim'
  Plug 'peitalin/vim-jsx-typescript'


  " File Explorer with Icons
  Plug 'scrooloose/nerdtree'
  Plug 'ryanoasis/vim-devicons'

  " File Search
  Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
  Plug 'junegunn/fzf.vim'
call plug#end()

" Enable theming support
if (has("termguicolors"))
 set termguicolors
endif

" Theme
syntax enable
colorscheme dracula

let g:NERDTreeShowHidden = 1
let g:NERDTreeMinimalUI = 1
let g:NERDTreeIgnore = []
let g:NERDTreeStatusline = ''
" Automaticaly close nvim if NERDTree is only thing left open
autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTree") && b:NERDTree.isTabTree()) | q | endif
" Toggle
nnoremap <silent> <C-b> :NERDTreeToggle<CR>

nnoremap <C-p> :FZF<CR>
let g:fzf_action = {
  \ 'ctrl-t': 'tab split',
  \ 'ctrl-s': 'split',
  \ 'ctrl-v': 'vsplit'
  \}
" requires silversearcher-ag
" used to ignore gitignore files
let $FZF_DEFAULT_COMMAND = 'ag -g ""'

" open new split panes to right and below
set splitright
set splitbelow

" turn terminal to normal mode with escape
tnoremap <Esc> <C-\><C-n>

" use alt+hjkl to move between split/vsplit panels
tnoremap <A-h> <C-\><C-n><C-w>h
tnoremap <A-j> <C-\><C-n><C-w>j
tnoremap <A-k> <C-\><C-n><C-w>k
tnoremap <A-l> <C-\><C-n><C-w>l
nnoremap <A-h> <C-w>h
nnoremap <A-j> <C-w>j
nnoremap <A-k> <C-w>k
nnoremap <A-l> <C-w>l

" start terminal in insert mode
au BufEnter * if &buftype == 'terminal' | :startinsert | endif

" open terminal on ctrl+;
" uses zsh instead of bash
function! OpenTerminal()
  split term://bash
  resize 10
endfunction
nnoremap <c-n> :call OpenTerminal()<CR>

init.vim

coc-settings.json

{
  "coc.preferences.formatOnSaveFiletypes": ["javascript", "typescript", "typescriptreact", "json", "javascriptreact", "typescript.tsx"],
  "eslint.filetypes": ["javascript", "typescript", "typescriptreact", "javascriptreact", "typescript.tsx"],
  "coc.preferences.diagnostic.virtualText": true,
}

coc-settings.json

Final Thoughts

Please let me know what you think about this basic configuration and if you’re interested in more Vim-related articles. I’m planning on releasing articles about:

  • Using Vim with Go, Rust, and C.
  • Adding Git integration to Vim.

If you’d like to see more articles like this one in your feed, remember to follow me.

Thanks a lot. If you have any feedback or suggestions for new articles, feel free to leave them in the comments.