Setting Up Neovim for Web Development

6 min readNov 8, 2021

modern web development in neovim without any compromisation

Prerequisite

neovim ≥ 0.5
internet connection

I am assuming that you already know how to use neo(vim). In this article, we are going to set up a web development environment in neovim.

Disclaimer

it’s always a good idea to backup your config before creating or making any config change (in case anything goes wrong). So, we are going to start this tutorial by backing up the config.

initial step

backup the config

$ mv ~/.config/nvim ~/.config/nvim.bkp

create a directory called nvim in ~/.config/

$ mkdir ~/.config/nvim

~/.config/nvim is a parent directory of any config we are going to create in this tutorial

Plan

we are going to need the plugins that can be used to achieve the following.

Plugin Manager →to install/manage plugins
LSP / LspInstaller →configurations for the Nvim LSP client
Completion → for auto-completion/suggestion
Treesitter → for batter syntax
Color scheme →for syntax highlighting

Plugin Manager

we are going to use Packer Plugin Manager to install or manage our plugins.

create ~/.config/nvim/init.lua file.

$ touch ~/.config/nvim/init.lua

init.lua is a file where neovim config begins. Now save the following code in ~/.config/nvim/init.lua file

file: ~/.config/nvim/init.lua

now, open init.lua file in neovim and run PackerSync command in neovim.

$ nvim ~/.config/nvim/init.lua:PackerSync

We are now ready to install any neovim plugin. we will install every required plugin as we move forward in this tutorial

LSP

Language Server Protocol (LSP) is an open, JSON-RPC-based protocol for communication between source code editors and language servers, which provide programming language-specific features such as:

Go to definition
(auto)completion
Code Actions (automatic formatting, organizing imports, …)
Show method signatures
Show/go to references
Snippets

to setup LSP in neovim, we are going to install the following plugins

nvim-lspconfig → a collection of common configurations for Neovim’s built-in language server client
nvim-lsp-installer → companion plugin for nvim-lspconfig that allows you to seamlessly install LSP servers locally
lspkind-nvim → vscode-like pictograms for neovim lsp completion items Topics
lsp-status.nvim → Utility functions for getting diagnostic status and progress messages from LSP servers, for use in the Neovim statusline

to install the above plugins, paste the following codes in ~/.config/nvim/init.lua after line number 17.

use { -- A collection of common configurations for Neovim's built-in language server client
        'neovim/nvim-lspconfig',
        config = [[ require('plugins/lspconfig') ]]
}use {
        'williamboman/nvim-lsp-installer',
        config = [[ require('plugins/lsp_installer_nvim') ]]
}use { -- vscode-like pictograms for neovim lsp completion items Topics
        'onsails/lspkind-nvim',
        config = [[ require('plugins/lspkind') ]]
}use { -- Utility functions for getting diagnostic status and progress messages from LSP servers, for use in the Neovim statusline
        'nvim-lua/lsp-status.nvim',
        config = [[ require('plugins/lspstatus') ]]
}

then our init.lua file will look like this:

file: ~/.config/nvim/init.lua

please note that every plugin will have its separate config file and will be sourced it using Packer. For example, here in following code,

use {
        'williamboman/nvim-lsp-installer',
        config = [[ require('plugins/lsp_installer_nvim') ]]
}

config = [[ require(‘plugins/lsp_installer_nvim’) ]] means config for nvim-lsp-installer plugin is defined in ~/.config/nvim/lua/plugins/lsp_installer_nvim.lua file.

so, we are going to create the config file for each plugin we mentioned above.

$ mkdir -p ~/.config/nvim/lua/plugins
$ cd ~/.config/nvim/lua/plugins/
$ touch lspconfig.lua lsp_installer_nvim.lua lspkind.lua  lspstatus.lua

now, we have the following files and directories

~/.config/nvim/
├── init.lua
└── lua
    └── plugins
        ├── lspconfig.lua
        ├── lsp_installer_nvim.lua
        ├── lspkind.lua
        └── lspstatus.lua

Again, run the :PackerSync command in neovim as we did before, this will install the above plugins.

after installing the plugins, we need to config each plugin as

~/.config/nvim/lua/plugins/lspconfig.lua

file: ~/.config/nvim/lua/plugins/lspconfig.lua

~/.config/nvim/lua/plugins/lspkind.lua

file: ~/.config/nvim/lua/plugins/lspkind.lua

~/.config/nvim/lua/plugins/lspstatus.lua

file: ~/.config/nvim/lua/plugins/lspstatus.lua

~/.config/nvim/lua/plugins/lsp_installer_nvim.lua

file: ~/.config/nvim/lua/plugins/lsp_installer_nvim.lua

Now, run the following command

$ nvim  --headless -c 'PackerSync'

NOTE: it would take some time because it’s going to install LSs. when you see packer.compile: Complete , press ctrl+c .

we are done with configuring LSP

let's move forward…

Completion

after setting up the LSP, we are going to use nvim-cmp completion engine plugin for autocomplete suggestion just like vscode.

add the following code in ~/.config/nvim/init.lua after line number 34 to install nvim-cmp and snippet plugins

use { -- A completion plugin for neovim coded in Lua.
        'hrsh7th/nvim-cmp',
        requires = {
          "hrsh7th/cmp-nvim-lsp",           -- nvim-cmp source for neovim builtin LSP client
          "hrsh7th/cmp-nvim-lua",           -- nvim-cmp source for nvim lua
          "hrsh7th/cmp-buffer",             -- nvim-cmp source for buffer words.
          "hrsh7th/cmp-path",               -- nvim-cmp source for filesystem paths.
          "hrsh7th/cmp-calc",               -- nvim-cmp source for math calculation.
          "saadparwaiz1/cmp_luasnip",       -- luasnip completion source for nvim-cmp
        },
        config = [[ require('plugins/cmp') ]],
  }use { -- Snippet Engine for Neovim written in Lua.
        'L3MON4D3/LuaSnip',
        requires = {
          "rafamadriz/friendly-snippets",   -- Snippets collection for a set of different programming languages for faster development.
        },
        config = [[ require('plugins/luasnip') ]],
  }

then our ~/.config/nvim/init.lua will look like this:

file: ~/.config/nvim/init.lua

then create two files, ~/.config/nvim/lua/plugins/cmp.lua and ~/.config/nvim/lua/plugins/luasnip.lua which will contains config for nvim-cmp and LuaSnip plugin.

$ touch ~/.config/nvim/lua/plugins/cmp.lua  
$ touch ~/.config/nvim/lua/plugins/luasnip.lua~/.config/nvim/lua/plugins/cmp.lua

file: ~/.config/nvim/lua/plugins/cmp.lua

~/.config/nvim/lua/plugins/luasnip.lua

file: ~/.config/nvim/lua/plugins/luasnip.lua

run the following command [note: when you see “packer.compile: Complete”, press ctrl+c]

$ nvim  --headless -c 'PackerSync'

Syntax Highlighting

For better syntax highlighting, we are going to install a color scheme and treesitter.

for the color scheme, I’m going to use roshnivim-cs , as it supports treesitter.

add the following code in ~/.config/nvim/init.lua file after line 53

use { --  colorscheme for (neo)vim written in lua specially made for roshnivim
       'shaeinst/roshnivim-cs',
}
use { -- Nvim Treesitter configurations and abstraction layer
        'nvim-treesitter/nvim-treesitter',
        run = ':TSUpdate',
        config = [[ require('plugins/treesitter') ]]
}

our ~/.config/nvim/init.lua will now look like:

create a file ~/.config/nvim/lua/plugins/treesitter.lua which is going to contain the config for treesitter plugin.

$ touch ~/.config/nvim/lua/plugins/treesitter.lua

file: ~/.config/nvim/lua/plugins/treesitter.lua

run the following command [note: when you see “packer.compile: Complete”, press ctrl+c]

$ nvim  --headless -c 'PackerSync'

to use colorscheme which we just installed, we are going to create ~/.config/nvim/lua/configs.lua file. This file going to contain the config that doesn’t depends on plugins (colorscheme is an exception).

$ touch ~/.config/nvim/lua/configs.lua

file: ~/.config/nvim/lua/configs.lua

now we need to source ~/.config/nvim/lua/configs.lua file in ~/.config/nvim/init.lua . for this, put the following code on top of ~/.config/nvim/init.lua file

require('configs')

then our ~/.config/nvim/init.lua file will look like:

file: ~/.config/nvim/init.lua

run the following command [note: when you see “packer.compile: Complete”, press ctrl+c]

$ nvim --headless -c 'PackerSync'

then run following command,

$ nvim --headless -c 'TSInstall typescript tsx json'

one more plugin

add the following code in ~/.config/nvim/init.lua file after line number 62

use { -- A super powerful autopairs for Neovim. It support multiple character.
       'windwp/nvim-autopairs',
       config = [[ require('plugins/autopairs') ]]
 }

then our final ~/.config/nvim/init.lua will look like this:

file: ~/.config/nvim/init.lua

create file, ~/.config/nvim/lua/plugins/autopairs.lua

$ touch ~/.config/nvim/lua/plugins/autopairs.lua

file: ~/.config/nvim/lua/plugins/autopairs.lua

run the following command [note: when you see “packer.compile: Complete”, press ctrl+c]

$ nvim  --headless -c 'PackerSync'

Directory structure

~/.config/nvim
├── init.lua
├── lua
│   ├── configs.lua
│   └── plugins
│       ├── autopairs.lua
│       ├── cmp.lua
│       ├── lspconfig.lua
│       ├── lsp_installer_nvim.lua
│       ├── lspkind.lua
│       ├── lspstatus.lua
│       ├── luasnip.lua
│       └── treesitter.lua
├── plugin
│   └── packer_compiled.lua