My Neovim setup

Neovim is my favourite editor for modern web development with React, TypeScript, etc. Here it is my setup.

Apr 01 2021

Vim

React

Why Vim

I am the Editor thy Vi.

I cannot stop using Vim, I tryed many times with several editors. No way. Neovim is a great project since it is fully compatible with Vim’s editing model but helped a lot moving forward, which was not possible due to retrocompatibility support (yes, Vim works on Amiga too).

The result is the best of both good old Vim and modern improvements. However, the configuration can take a lot of time scouting and trying plugins and configurations. Let me share what I obtained: a cool environment for web development.

Configuration

This section is highly opinionated. Please consider the configurations below as a starting point. To me they are essentials to a joyful developer experience.

Install vim-plug for Neovim first, instructions here.

Neovim configuration entry file is ~/.config/nvim/init.vim. This is how it looks mine.

" cannot code without the following
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
set encoding=UTF-8
syntax on
set number

" only vim can do this
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
set cursorline
set cursorcolumn

" open terminal
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
nnoremap <leader>t :below 10sp term://$SHELL<cr>i
" hit <Escape> key to exit from terminal mode
:tnoremap <Esc> <C-\><C-n>

" use current file directory as a start to find file to edit
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" credits to: https://stackoverflow.com/a/1708936

map <leader>e :e <C-R>=expand("%:p:h") . "/" <CR>
map <leader>s :split <C-R>=expand("%:p:h") . "/" <CR>

" it is ok to wrap lines, just use gj or gk to move
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
set wrap

" console.log hot key: type cll
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" credits to: https://gist.github.com/jasongonzales23/6189da1d82ee05a91edfd53403d6941d

" insert mode, puts focus inside parentheses
"
" if you are using coc-pairs or any other auto pairs plugin,
" use this code:
" imap cll console.log(
"
imap cll console.log()<Esc><S-f>(a

" from visual mode on next line, puts visual selection inside parentheses
vmap cll yocll<Esc>p

" from normal mode, wraps word under cursor
nmap cll yiwocll<Esc>p

" cycle buffers
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
:nnoremap gb :bnext<CR>

" move camelCase-wise
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Use Shift + arrow keys,
" source: https://vim.fandom.com/wiki/Moving_through_camel_case_words

nnoremap <silent><S-Left> :<C-u>call search('\<\<Bar>\U\@<=\u\<Bar>\u\ze\%(\U\&\>\@!\)\<Bar>\%^','bW')<CR>
nnoremap <silent><S-Right> :<C-u>call search('\<\<Bar>\U\@<=\u\<Bar>\u\ze\%(\U\&\>\@!\)\<Bar>\%$','W')<CR>
inoremap <silent><S-Left> <C-o>:call search('\<\<Bar>\U\@<=\u\<Bar>\u\ze\%(\U\&\>\@!\)\<Bar>\%^','bW')<CR>
inoremap <silent><S-Right> <C-o>:call search('\<\<Bar>\U\@<=\u\<Bar>\u\ze\%(\U\&\>\@!\)\<Bar>\%$','W')<CR>

" Finally, load plugins
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
source ~/.config/nvim/plugins.vim

I keep plugins in a separate file: ~/.config/nvim/plugins.vim.

The last plugin listed, i.e. the bubblegum is my favourite colorscheme. Other plugins and configurations are considered essentials to me.

" vim-plug start
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
call plug#begin('~/.nvim/plugged')

" files hierarchy tree
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
Plug 'scrooloose/nerdtree'
Plug 'Xuyuanp/nerdtree-git-plugin'

" toggle NERDTree with <Ctrl-e>, where 'e' stands for 'explorer'
nmap <C-E> :NERDTreeToggle<CR>

" cool icons
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
Plug 'ryanoasis/vim-devicons'

let g:webdevicons_enable_nerdtree = 1

" Git integration
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
Plug 'tpope/vim-fugitive'

" Enables :GBrowse from fugitive.vim to open GitHub URLs.
Plug 'tpope/vim-rhubarb'

" editorconfig support
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
Plug 'editorconfig/editorconfig-vim'

" lean & mean status/tabline
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
Plug 'vim-airline/vim-airline'
Plug 'vim-airline/vim-airline-themes'

let g:airline#extensions#tabline#enabled = 1

" emmet (like), essential toolkit for HTML & CSS abbreviation expansion
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Quick tutorial.
"
" Open or create index.html file.
"
" Type ("_" is the cursor position)
"
"      html:5_
"
" Then type <C-y>, (Ctrl y ,) to trigger expansion.
"
" More tutorials here: https://raw.githubusercontent.com/mattn/emmet-vim/master/TUTORIAL
Plug 'mattn/emmet-vim'

" awesome completion tool
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
Plug 'neoclide/coc.nvim', {'branch': 'release'}

" use <Tab> key to trigger completion and navigate to the next complete item;
" can use also <Ctrl-n> to go to next element
"              <Shift-Tab> <Ctrl-p> to go to previous element
function! s:check_back_space() abort
  let col = col('.') - 1
  return !col || getline('.')[col - 1]  =~ '\s'
endfunction
inoremap <silent><expr> <Tab>
      \ pumvisible() ? "\<C-n>" :
      \ <SID>check_back_space() ? "\<Tab>" :
      \ coc#refresh()

" Use K to show documentation in preview window.
nnoremap <silent> K :call ShowDocumentation()<CR>

function! ShowDocumentation()
  if CocAction('hasProvider', 'hover')
    call CocActionAsync('doHover')
  else
    call feedkeys('K', 'in')
  endif
endfunction

" Use `d[` and `d]` to navigate diagnostics
" Use `:CocDiagnostics` to get all diagnostics of current buffer in location list.
nmap <silent> d[ <Plug>(coc-diagnostic-prev)
nmap <silent> d] <Plug>(coc-diagnostic-next)

" Apply AutoFix to problem on the current line.
" Use `:CocFix` to get all choices avaliable.
nmap <leader>x <Plug>(coc-fix-current)

" GoTo code navigation.
nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)

" Symbol renaming.
nmap <leader>r <Plug>(coc-rename)

" Formatting selected code.
xmap <leader>f  <Plug>(coc-format-selected)
nmap <leader>f  <Plug>(coc-format-selected)

" toggle comments
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" use `gcc` to comment out a line (takes a count),
" `gc` in visual mode to comment out the selection, and much more...
Plug 'tpope/vim-commentary'

" search tool
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
Plug 'mileszs/ack.vim'
" This Leader-a shortcut has a Ack! command with bang, which will search
" but do not jump to the first result automatically.
" Hit Leader-a and type string to search, or
" hit Leader-a and then Enter to search for string under cursor.
nnoremap <Leader>a :Ack!<Space>

Plug 'ctrlpvim/ctrlp.vim'
let g:ctrlp_custom_ignore = {
  \ 'dir':  '\v[\/](\.git|\.next|node_modules)$',
  \ 'file': '\v\.(exe|so|dll)$',
  \ }

" my favourite colorscheme, bubblegum
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
Plug 'baskerville/bubblegum'

" vim-plug end, add plugins to &runtimepath
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
call plug#end()

" activate bubblegum colorscheme
colorscheme bubblegum-256-dark
let g:airline_theme='bubblegum'

Further steps

Once vim-plug is installed, and both config files are created, open Neovim and run command

:PlugInstall

CoC

Use Conquer of Completion (a.k.a. coc.nvim or simply coc) to install plugins. In Neovim run once the following command to install extendsions marketplace

:CocInstall coc-marketplace

Now you can:

List/Install all available extensions with :CocList marketplace.
Install extensions directly, e.g. :CocInstall coc-json

I recomment at least the following:

coc-css
coc-html
coc-json
coc-pairs
coc-prettier
coc-tsserver

See other coc.nvim extensions here.

You may also want to configure CoC, for instance launch command :CocConfig (or edit ~/.config/nvim/coc-settings.json file) and start with the following

{
  "coc.preferences.formatOnSaveFiletypes": [
    "javascript", "javascriptreact",
    "typescript", "typescriptreact"
   ],
  "diagnostic.checkCurrentLine": true,
  "typescript.suggestionActions.enabled": true
}

See also CoC configuration JSON schema here.

ack!

ack is a grep-like source code search tool

You need to install ack!, go beyondgrep. With brew just run

brew install ack

To speed up, I also create a ~/.ackrc file like the following

## Ack is awesome: https://beyondgrep.com/
#
--smart-case
# folders I usually do not want to look into
--ignore-dir=.next
--ignore-dir=_site
--ignore-dir=build
--ignore-dir=dist
# files I usually ignore
--ignore-file=match:/bundle/

NerdFonts

Install a patched font from NerdFonts for example I downloaded Fura Code Retina Nerd Font Complete. Wow, that font name sounds good!

Thanks to vim plugin ryanoasis/vim-devicons you will get an awesome result.

Vim devicons

How I implement a TypeScript type-guard on an object-like type.: It happens often I need to implement a TypeScript type-guard that consumes an object-like type, but did not found clear examples in official documentation or articles. This is the solution I found.
React list with Array.from(): How to use Array.from() to render a list of React components, makes me think about how good is React software design.
Rethink React with Deno: How to setup a Deno server to perform ServerSideRendering with React. The Web is evolving in the right direction.
Brand your app version with Create React App: Write your app version into the HTML. Quick and simple implementation.
TypeScript enum alternative: Define a list of strings that represents a set of entities, using Literal Types instead of Enum
A Simple React/Redux structure: Let me show you I use Redux with React, a set of snippets that I have polished during the last few years to achieve a simplified and flexible structure that is easy to understand also for beginners.
Framer X and internationalization: How to setup Framer X to use a i18n React tool and design with translations integrated
Using Framer X with custom Sass build: Framer X is a slick tool, you can express your creativity creating not only design mockups but also React components from real code. Is it possible to use your own Sass build?
Create a Material React app: How to use create-react-app with Material web components.
React input number done right: Having an input number working correctly is not that easy, let me share my implementation.
Always use TypeScript: If you are writing a JavaScript code base you should use TypeScript, even if you are not writing TypeScript code.
Vim tips & tricks: Vim is awesome and can speed up your productivity, however it is hard to learn. I will write here things it is worth to remember.
React Semantic-UI customized: React and Semantic-UI are awesome! This article describes step by sted how to use them together and create a custom build.
My Vim configuration: This is a collection of vim configuration directives.