Setting Up Neovim for Web Development in 2020

Switching from VS Code to Neovim for React and TypeScript development

Dominik Tarnowski
Jan 16 · 5 min read

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

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

Same goes with macOS’ Homebrew:

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

Or Scoop.

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:

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

And for Windows:

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:


Theming

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

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

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

Then, quit the editor and open any file:

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:

And the config:

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:

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.

Add the following to your config section:

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

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:

And the config:

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.
CTRL+P, type file name, CTRL+V

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:

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 or LanguageClient-neovim but 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.

https://star-history.t9t.io

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

And on Windows:

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:

And if you also need TypeScript and TSX support:


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:


Final Demos

Errors can be configured to appear on the same line, on the bottom line, or simply stay hidden
Adding coc-emmet allows us to use emmet shortcuts

Config files


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.

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Dominik Tarnowski

Written by

Don't forget to clap 👏 and follow. Student & Software Developer. React. Go. Rust. https://tdom.dev

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade