How to Set Up Neovim for JavaScript

Developers need a tool to write their code. Depending on personal preference, this can be a simple text editor or a fully-fledged Integrated Development Environment (IDE).

I've been a remote developer for over twenty years and have seen and used many editors, from memory-hungry IDEs to very light-weight editors. My favorite one used to be VSCode, but times change and so do tools and workflow needs.

I moved away from VSCode because I live and breathe in the terminal. While you can have a terminal split inside VSCode, being connected to remote servers with Vim on one side and VSCode on another just didn't work for me. Besides, it's too complicated to manage separate editors, each with their own plugins, configurations, key bindings, etc. One editor makes life easier.

So about a year ago, I moved my entire workflow to Neovim. I chose Neovim over Vim because it's a more actively maintained and simpler project. This being said, it's still a fork of Vim and comes with the learning curve that scares many newcomers away from Vim. It scared me at the time too!

But once you learn how to configure and personalize Vim and once you have memorized the key combinations, you won't ever consider other IDEs anymore. Imagine not having to use your mouse while coding. Pretty sweet, right? 😀

In this blog post, I will show you how to set up Neovim for JavaScript, complete with auto completion, snippets, and eslinting.

Prerequisites

• Neovim
• Node (we need a JS runtime for the CoC extension)
• Git (so that vim-plug can clone the plugins)

Plugin Management

In order to use Neovim effectively, you'll need a plugin manager. Vim has a couple, but I recommend vim-plug because it makes it super easy to install, update, and upgrade all the plugins you'll need for your workflow.

Let's start by creating a basic init.vm in ~/.config/nvim/init.vim with the following code:

" this will install vim-plug if not installed if empty(glob('~/.config/nvim/autoload/plug.vim')) silent !curl -fLo ~/.config/nvim/autoload/plug.vim --create-dirs \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim autocmd VimEnter * PlugInstall endif call plug#begin() " here you'll add all the plugins needed call plug#end()

This initial piece of code tells Neovim to download and install vim-plug on launch. All the plugins between the plug#begin() and plug#end lines will be installed with the simple :PlugInstall command that we'll cover next.

Setting Up the Plugins

In your init.vim file, add the following between plug#begin() and plug#end:

Plug 'neoclide/coc.nvim', {'do': 'yarn install --frozen-lockfile'} " this is for auto complete, prettier and tslinting let g:coc_global_extensions = ['coc-tslint-plugin', 'coc-tsserver', 'coc-css', 'coc-html', 'coc-json', 'coc-prettier'] " list of CoC extensions needed

Plug 'jiangmiao/auto-pairs' "this will auto close ( [ { " these two plugins will add highlighting and indenting to JSX and TSX files.
Plug 'yuezk/vim-js'
Plug 'HerringtonDarkholme/yats.vim'
Plug 'maxmellon/vim-jsx-pretty'

Save the file and reopen Neovim, then type :PlugInstall to install all those plugins and extensions. That's all you need to get started with JavaScript development in Neovim!

The beauty of CoC is that you can add support for the language you're working with. For example, if you need to work with Python, just add coc-python to g:coc_global_extensions, save the file, reopen Neovim, run :PlugInstall, and you're set. Cool, right? 😀

Enjoy the journey and never stop creating.