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.
If you’re running Ubuntu or any other Linux distro, you can use its package manager as such:
sudo apt install neovim
Same goes with macOS’ Homebrew:
brew install neovim
On Windows, you can use one of the package managers such as Chocolatey:
choco install neovim
Or Scoop.
scoop install neovim
If you’re having problems with installation, please visit the installation Wiki.
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:
curl -fLo ~/.local/share/nvim/site/autoload/plug.vim - create-dirs \
https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
md ~\vimfiles\autoload
$uri = 'https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'
(New-Object Net.WebClient).DownloadFile(
$uri,
$ExecutionContext.SessionState.Path.GetUnresolvedProviderPathFromPSPath(
"~\vimfiles\autoload\plug.vim"
)
)
For macOS and Linux, the Neovim config file is located in ~/.config/nvim/init.vim
.
mkdir ~/.config/nvim
And for Windows:
mkdir ~/AppData/Local/nvim
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:
call plug#begin("~/.vim/plugged")
" Plugin Section
call plug#end()
"Config Section
The default theme for Neovim will use your terminal’s theme. Let’s change that. In the plugins section, add:
Plug 'dracula/vim'
Now, below the plugin section, in the config section, add the following lines:
if (has("termguicolors"))
set termguicolors
endif
syntax enable
colorscheme dracula
For the changes to have an effect, you will need to install the plugin first and reload the editor like so:
nvim +PlugInstall
Then, quit the editor and open any file:
nvim App.css
Dracula theme demo for Vim
If we want a fully featured IDE, we need a file explorer, with icons. Simply add the following plugins:
Plug 'scrooloose/nerdtree'
Plug 'ryanoasis/vim-devicons'
And the config:
let g:NERDTreeShowHidden = 1
let g:NERDTreeMinimalUI = 1
let g:NERDTreeIgnore = []
let g:NERDTreeStatusline = ''
" Automaticaly close nvim if NERDTree is only thing left open
autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTree") && b:NERDTree.isTabTree()) | q | endif
" Toggle
nnoremap <silent> <C-b> :NERDTreeToggle<CR>
config.js
Now you can simply use Ctrl+B to toggle the file explorer.
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:
" open new split panes to right and below
set splitright
set splitbelow
" turn terminal to normal mode with escape
tnoremap <Esc> <C-\><C-n>
" start terminal in insert mode
au BufEnter * if &buftype == 'terminal' | :startinsert | endif
" open terminal on ctrl+n
function! OpenTerminal()
split term://bash
resize 10
endfunction
nnoremap <c-n> :call OpenTerminal()<CR>
config.js
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:
" use alt+hjkl to move between split/vsplit panels
tnoremap <A-h> <C-\><C-n><C-w>h
tnoremap <A-j> <C-\><C-n><C-w>j
tnoremap <A-k> <C-\><C-n><C-w>k
tnoremap <A-l> <C-\><C-n><C-w>l
nnoremap <A-h> <C-w>h
nnoremap <A-j> <C-w>j
nnoremap <A-k> <C-w>k
nnoremap <A-l> <C-w>l
config.js
This allows you to move between your terminal and other panels with Alt+H, Alt+J, Alt+K, and Alt+L.
Integrated terminal
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:
Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
Plug 'junegunn/fzf.vim'
And the config:
nnoremap <C-p> :FZF<CR>
let g:fzf_action = {
\ 'ctrl-t': 'tab split',
\ 'ctrl-s': 'split',
\ 'ctrl-v': 'vsplit'
\}
Now, to search for a file, press Ctrl+P , search for the file you’re looking for, and press:
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
:
let $FZF_DEFAULT_COMMAND = 'ag -g ""'
Which can be installed from here, using any package manager.
For syntax highlighting, we will be using coc.nvim, which basically uses VS Code’s code completion.
There are other alternatives, such as ALE orLanguageClient-neovimbut 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.
Firstly, install Node.js (Linux / macOS):
curl -sL install-node.now.sh/release | bash
And on Windows:
choco install nodejs
or
scoop install nodejs
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:
Plug 'neoclide/coc.nvim', {'branch': 'release'}
let g:coc_global_extensions = ['coc-emmet', 'coc-css', 'coc-html', 'coc-json', 'coc-prettier', 'coc-tsserver']
And if you also need TypeScript and TSX support:
Plug 'leafgarland/typescript-vim'
Plug 'peitalin/vim-jsx-typescript'
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:
{
"coc.preferences.formatOnSaveFiletypes": ["javascript", "typescript", "typescriptreact", "json", "javascriptreact", "typescript.tsx"],
"eslint.filetypes": ["javascript", "typescript", "typescriptreact", "javascriptreact", "typescript.tsx"],
"coc.preferences.diagnostic.virtualText": true,
}
coc-settings.json
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
call plug#begin("~/.vim/plugged")
" Theme
Plug 'dracula/vim'
" Language Client
Plug 'neoclide/coc.nvim', {'branch': 'release'}
let g:coc_global_extensions = ['coc-emmet', 'coc-css', 'coc-html', 'coc-json', 'coc-prettier', 'coc-tsserver']
" TypeScript Highlighting
Plug 'leafgarland/typescript-vim'
Plug 'peitalin/vim-jsx-typescript'
" File Explorer with Icons
Plug 'scrooloose/nerdtree'
Plug 'ryanoasis/vim-devicons'
" File Search
Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
Plug 'junegunn/fzf.vim'
call plug#end()
" Enable theming support
if (has("termguicolors"))
set termguicolors
endif
" Theme
syntax enable
colorscheme dracula
let g:NERDTreeShowHidden = 1
let g:NERDTreeMinimalUI = 1
let g:NERDTreeIgnore = []
let g:NERDTreeStatusline = ''
" Automaticaly close nvim if NERDTree is only thing left open
autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTree") && b:NERDTree.isTabTree()) | q | endif
" Toggle
nnoremap <silent> <C-b> :NERDTreeToggle<CR>
nnoremap <C-p> :FZF<CR>
let g:fzf_action = {
\ 'ctrl-t': 'tab split',
\ 'ctrl-s': 'split',
\ 'ctrl-v': 'vsplit'
\}
" requires silversearcher-ag
" used to ignore gitignore files
let $FZF_DEFAULT_COMMAND = 'ag -g ""'
" open new split panes to right and below
set splitright
set splitbelow
" turn terminal to normal mode with escape
tnoremap <Esc> <C-\><C-n>
" use alt+hjkl to move between split/vsplit panels
tnoremap <A-h> <C-\><C-n><C-w>h
tnoremap <A-j> <C-\><C-n><C-w>j
tnoremap <A-k> <C-\><C-n><C-w>k
tnoremap <A-l> <C-\><C-n><C-w>l
nnoremap <A-h> <C-w>h
nnoremap <A-j> <C-w>j
nnoremap <A-k> <C-w>k
nnoremap <A-l> <C-w>l
" start terminal in insert mode
au BufEnter * if &buftype == 'terminal' | :startinsert | endif
" open terminal on ctrl+;
" uses zsh instead of bash
function! OpenTerminal()
split term://bash
resize 10
endfunction
nnoremap <c-n> :call OpenTerminal()<CR>
init.vim
{
"coc.preferences.formatOnSaveFiletypes": ["javascript", "typescript", "typescriptreact", "json", "javascriptreact", "typescript.tsx"],
"eslint.filetypes": ["javascript", "typescript", "typescriptreact", "javascriptreact", "typescript.tsx"],
"coc.preferences.diagnostic.virtualText": true,
}
coc-settings.json
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:
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.
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch