DEV Community

loading...
Cover image for (Neo)vim for Web development

(Neo)vim for Web development

ryanlanciaux profile image Ryan Lanciaux ・3 min read

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

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 \
    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

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.

01.plugins.vim

This is where I place all my plugin installation information.

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

02.settings.vim

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

03.plugin-settings.vim

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'

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

A couple of plugins that I'm using are:

ctrlp.vim

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.

ctrlsf

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

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.

Discussion (13)

pic
Editor guide
Collapse
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.

Collapse
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,...)

Collapse
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

Collapse
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'])
else
  call denite#custom#var('file_rec', 'command',
      \ ['grep', '--follow', '--nocolor', '--nogroup', '-g', ''])
endif

" 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>
Collapse
ryanlanciaux profile image
Ryan Lanciaux Author

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

Collapse
codenutt profile image
Jared

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

Collapse
ryanlanciaux profile image
Ryan Lanciaux Author

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

Collapse
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.

Collapse
mikaoelitiana profile image
Mika Andrianarijaona

You may also find interesting to try Vim Bootstrap that generates a configuration based on your target language vim-bootstrap.com/

Collapse
travisboss profile image
Travis Boss

This is a great tool to get a working config, I would recommend new users who use this feature to read through the config before you apply it. I did for funsies a version I would use for work and of course the keyboard shortcuts are much different and it installs a TON of plugins that you may not need or want.

I think this is a wonderful tool though and if you've never used vim. Do this on your home machine or on a server you use and work through it.

Collapse
0ctavia profile image
Octa

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

Collapse
travisboss profile image
Travis Boss • Edited

My only guess and is the reason I chose neovim is it has sane defaults.

I use about 15 plugins now down from 30 last year and my vim file is getting smaller and smaller and it gets more and more specialized. What I do at work and what I do at home are also very different (angular = work, vue = home) so the files are slightly different when we look at typescript and how I view git repos.