DEV Community

Cover image for (Neo)vim for Web development
Ryan Lanciaux
Ryan Lanciaux

Posted on

(Neo)vim for Web development

I've recently been interested in using the tried-and-true vim editor again. For those unfamiliar, vim is an editor that was first released in 1991. Vim boasts a large community of users, plugins, and add-ons. Most vim users configure their editor quite heavily. This customization is one of the nicest things about vim. That said, it's also one of the more challenging things to get right.

In order to consider my vim configuration a success, I wanted to have some IDE like features available. Things like "find in project", "jump to file", and linting / TypeScript support are necessary. This article is a high-level overview of how I setup NeoVim (nvim) to achieve these results.

1) Install nvim

I am using NeoVim (nvim) instead of the standard vim. Neovim is a "vim-based" text editor. It's fairly compatible with standard vim but it adds some features around what types of things plugins can do.

It's good to follow the documentation for installing nvim. On my Mac, I ran

brew install --HEAD neovim
Enter fullscreen mode Exit fullscreen mode

2) Install VimPlug

VimPlug is what I'm using to manage my plugins. Take a look at the installation documentation. For my setup, I ran the following:

curl -fLo ~/.local/share/nvim/site/autoload/plug.vim --create-dirs \
Enter fullscreen mode Exit fullscreen mode

3) Set up the config files

nvim's configuration, by default, is controlled from .config/nvim/init.vim. This file could contain all of the configuration options for nvim. As time goes on, placing our configuration in one file could get unwieldy. Thankfully, you can split your vim configuration files to make it easier to manage. Following that guide, init.vim, loads configuration from other config files. I have the following files but any number / name of configuration files could be used.


This is where I place all my plugin installation information.

call plug#begin('~/.vim/plugged')
  " Plugins go here
call plug#end()
Enter fullscreen mode Exit fullscreen mode


This settings.vim contains all of my standard nvim configuration.


Plugin configuration goes in this file. I wanted to keep this separate from the plugin installation but it could technically be placed along side the installation configuration file.

4) Configure default vim settings

My vim settings are available here. These settings are mostly personal preference. Take a look at this guide on configuring vim for more info.

5) Install Plugins

With this structure, everything should be in a good place to begin installing and configuring plugins. Plugins can be installed using VimPlug by placing statements Plug statements between the opening and closing plug functions. For example

Plug 'bling/vim-bufferline'
Enter fullscreen mode Exit fullscreen mode

After configuring the plugins, run :PlugInstall to install the plugins.

A couple of plugins that I'm using are:


ctrlp is described as a "Full path fuzzy file, buffer, mru, tag, ... finder for Vim." I use this similarly to how I use Command+P in VS Code to quickly jump to another file.


This plugin makes it very easy to quickly search a codebase and edit files in the search results view.

Conquer of Completion

This plugin is what I use to get intellisense information like VS Code. The autocompletion is surprisingly good. The documentation boasts that it has the same language protocol support that powers VS Code.

Conquer of completion has completion sources for TypeScript and other programming languages that may need to be installed separately. See the docs for more on this


Ale stands for "Asynchronous Lint Engine." Ale lives up to the name and is great at linting my JavaScript codebases.

Wrapping up

While vim may not be for everyone and might not even be my primary editor, it can be a nice way to edit code. My configuration files are available on github.

Top comments (13)

matthewbdaly profile image
Matthew Daly • Edited

I ditched CtrlP for vim-fzf, on top of fzf and Ripgrep. They seem faster, produce better results, and handle interacting with source control better.

Most of my work is in PHP, and for that PHPactor has changed my life for the better. It provides the sort of refactoring tools that used to be solely the province of IDE's. It's one of the most useful Vim plugins I've ever seen.

skydevht profile image
Holy-Elie Scaïde

vim-fzf is what works best for me. I tried Denite but it was too much configuration for things that works out of the box for vim-fzf. (File name search, in file search, buffer list,...)

moopet profile image
Ben Sinclair

I just tried denite but can't get it to work at all.
I've spent the last few years ignoring fzf but I've just updated a few scripts to optionally use it if it's installed and have to say it makes things look better.

Thread Thread
skydevht profile image
Holy-Elie Scaïde

I had it working, but it felt a little off for me

dmfay profile image
Dian Fay

I switched from ctrlp to denite a while back and love it. Here's the relevant part of my vimrc with ripgrep and some keybinds:

if executable('rg')
  call denite#custom#var('file_rec', 'command', ['rg', '--files', '--glob', '!.git'])
  call denite#custom#var('grep', 'command', ['rg'])
  call denite#custom#var('grep', 'recursive_opts', [])
  call denite#custom#var('grep', 'final_opts', [])
  call denite#custom#var('grep', 'separator', ['--'])
  call denite#custom#var('grep', 'default_opts', ['--vimgrep', '--no-heading', '--ignore-case'])
  call denite#custom#var('file_rec', 'command',
      \ ['grep', '--follow', '--nocolor', '--nogroup', '-g', ''])

" allow grep source filtering on either path or text
call denite#custom#source('grep', 'converters', ['converter_abbr_word'])

call denite#custom#map('insert', '<C-h>', '<denite:move_to_first_line>', 'noremap')
call denite#custom#map('insert', '<C-j>', '<denite:move_to_next_line>', 'noremap')
call denite#custom#map('insert', '<C-k>', '<denite:move_to_previous_line>', 'noremap')
call denite#custom#map('insert', '<C-l>', '<denite:move_to_last_line>', 'noremap')

call denite#custom#option('default', 'prompt', '>')
call denite#custom#option('default', 'cursor_wrap', v:true)

nnoremap <C-p> :Denite -direction=topleft file_rec<CR>
nnoremap <space>/ :Denite -direction=topleft grep<CR>
nnoremap <space>f :Denite -direction=topleft -no-quit -mode=normal grep:.<CR>
nnoremap <space>s :Denite -direction=topleft buffer<CR>
ryanlanciaux profile image
Ryan Lanciaux

Very cool and thanks for sharing this! I’ll have to checkout denite

codenutt profile image

Made the switch completely about 6 months ago! Glad to see Conquer of Completion popping up more. That plugin is the BEST.

ryanlanciaux profile image
Ryan Lanciaux

You're right! That plugin is so nicely made and really enhances my experience w/ vim :D

nflamel profile image
Fran C.

Same here. Now that many more languages have their own Language Servers it is pretty easy to even configure one which doesn't have a CoC plugin. And the experience over traditional completion plugins or tags I sooooooo much better.

mikaoelitiana profile image
Mika Andrianarijaona

You may also find interesting to try Vim Bootstrap that generates a configuration based on your target language

0ctavia profile image

Any reason why you picked neovim rather than the basic vim or gvim?