How I Set Up My Neovim Config For Web Development
Set Up Your Neovim Config For Web Development
Table of contents
Introduction
I've been using the Neovim text editor for the past year.
While I still rely on VS Code for certain tasks, my journey with Neovim has been enjoyable.
In this guide, I'll walk you through how I've set up my Neovim configuration to boost my web development workflow.
To begin with, you need the following software installed on your PC:
The Neovim text editor.
Node and npm**: they provide** a JS runtime for the CoC extension.
The vim-plug plugin manager
Git: allow vim-plug to clone the plugins on GitHub
The init.vim
file
Create an init.vim
in the ~/.config/nvim/
directory.
This is a configuration file used to customize the behavior and appearance of the text editor. It allows a user to define various settings, keybindings, plugins, and other preferences to tailor the text editor to their specific needs.
Insert the following VimScript code in your init.vim file:
" 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 code instructs 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 :PlugInstall
command.
The plugins
In the init.vim
file, add the following between plug#begin()
and plug#end()
:
" Add IDE functionality to NeoVim
Plug 'neoclide/coc.nvim', {'do': 'yarn install --frozen-lockfile'}
let g:coc_global_extensions = ['coc-tslint-plugin', 'coc-tsserver', 'coc-eslint', 'coc-html-css-support', 'coc-rome', 'coc-tsserver', 'coc-css', 'coc-html', 'coc-json', 'coc-prettier']
" Auto Close Brackets ( [ {
Plug 'jiangmiao/auto-pairs'
" Add Highlighting and Indenting to JSX and TSX files.
Plug 'yuezk/vim-js'
Plug 'HerringtonDarkholme/yats.vim'
Plug 'maxmellon/vim-jsx-pretty'
Save and exit the file, then re-open it.
Type :PlugInstall
to install the plugins and extensions.
Conclusion
Check out this GitHub repository for more ideas on how you can customise Neovim to your liking: