All the plugins and settings were tested, and confirmed to work on Vim 8.1 and Neovim 0.4.0, the latest versions at the time of writing. As this post mainly deals with installing and configuring plugins for Vim, I recommend that you adopt vim-plug as your plugin manager if you don’t use one already.
However, I later replaced those two with vim-polyglot which is a plugin that bundles several other syntax plugins for over 100 languages, and loads them on demand so that performance is not affected.
So, instead of having to add another plugin to provide syntax highlighting for
.vue files for example,
While ESLint was built to be used via the command line, many people (myself included) prefer to integrate it into their code editor to get live feedback on code as it is being written. Bringing ESLint integration into Vim is pretty easy with ALE.
As you can see, indicators for errors and warnings appear next to the problematic lines as the code is written, and the reason for the error is printed at the bottom of the screen when the cursor is on the line where is error is found. In this case, ESLint is warning me that about unused variables and also about the
Additionally, you can open the location list to view all the errors in a file and jump to each error using
:lne) to navigate to the next item and
:lpr) to navigate to the previous item.
An easier way to jump between linting errors quickly is to use the
<Plug> keybindings shown below. You can change
]c to your preferred key combination.
nmap <silent> [c <Plug>(ale_previous_wrap)
nmap <silent> ]c <Plug>(ale_next_wrap)
By the way, I’m not a fan of the default indicators used by ALE for errors and warnings, so I changed them to something that’s aesthetically more pleasing using the following configuration:
let g:ale_sign_error = '❌'
let g:ale_sign_warning = '⚠️'
It works by formatting a file (or many files) according to the options specified in its configuration file. As such, all files formatted by Prettier adhere to the same guidelines for indendation, quote style, spacing, line width, and several other stylistic concerns.
To use Prettier, you need to add it to your project. You can use Prettier’s CLI, or configure it as a pre-commit hook, but I prefer the instant feedback of having it format my code immediately I save a file.
ESLint also has some code fixing capabilities, but some of these conflict with Prettier’s methods. It is better to have ESLint take care of code quality concerns, while leaving Prettier to focus on code formatting concerns.
To achieve this, you need to disable the ESLint rules that conflict with Prettier with eslint-config-prettier while adding Prettier’s code fixing capabilities to ESLint using eslint-plugin-prettier. To do so, run the following command in your project directory:
$ yarn add eslint-config-prettier eslint-plugin-prettier -D
Then add the following to your ESLint configuration file. This configures both
eslint-config-prettier in a single step.
In addition to supporting linters that report errors, ALE can also run fixers to format the code in a Vim buffer. All you need to do is specify
.vimrc as shown below:
" Fix files automatically on save
let g:ale_fix_on_save = 1
At this point, linting and formatting errors will be annotated by ESLint, while Prettier formats the code on save.
You can also format the code on demand using the
:ALEFix command. The easiest way to use it is to create a key mapping in your Vim configuration file.
nmap <F6> <Plug>(ale_fix)
File searching is important in any editor, and while Vim supports this via the
:find command, it’s very basic and doesn’t support fuzzy finding as far as I can tell. There are a couple of tools out there that bring fuzzy file search to vim. After using CtrlP for a while, I switched to Fzf.vim which is a wrapper for the command line fuzzy finder with the same name, Fzf.
Fzf looks like a simple tool on the surface, but it’s actually very powerful. Here’s a few ways I take advantage of it on a daily basis:
My primary use of Fzf is to search files in a project. This is achieved using the
:Files command which I heartily bound to Ctrl-P in my Vim config. I also modified the
$FZF_DEFAULT_COMMAND variable to use Ripgrep for listing the files. After installing Ripgrep, put this in your
.zshrc to search for all files except those in hidden directorys (like
.git) or those that have been ignored in your
export FZF_DEFAULT_COMMAND='rg --files --follow --hidden'
# Fish syntax
# set -gx FZF_DEFAULT_COMMAND 'rg --files --follow --hidden'
Additonally, Fzf provides the
:History commands for searching open buffers and your buffer history. I have mapped these to
nnoremap <C-p> :Files<CR>
nnoremap <Leader>b :Buffers<CR>
nnoremap <Leader>h :History<CR>
Similarly to CtrlP, once Fzf is open, you can hit the Enter key to open the selected file in the current window, or use Ctrl-T, Ctrl-X or Ctrl-V to open selected files in a in new tab, horizontal split, or vertical split respectively.
Fzf provides two main commands for searching tags in a project. The first one
:BTags allows you to search for tags in the current buffer. It doesn’t require
a tags file, and is great for jumping between methods quickly.
The second one,
:Tags, allows you to perform project wide search for tags, but it does
require a tags file. You can use Universal Ctags to generate a tags file for your project and combine it with Gutentags to automate the creation and updating of tags in the background.
I have mapped both commands mapped to
nnoremap <Leader>t :BTags<CR>
nnoremap <Leader>T :Tags<CR>
:Rg command provided by Fzf uses Ripgrep to find all occurrences of a pattern across an entire project, so you can search for a specific string, select the matches and navigate the results using the quickfix list. I often use it to check for where a method is used in my codebase, and I found it incredibly helpful in a recent project I was refactoring.
:Rg, you can narrow down the results and hit Enter on
the selected result to open the file in the current window. This will skip the
quickfix list altogether. To select multiple results, just use the
Tab key on each file you want to select or Alt-A to select
all results and then Enter to populate the quickfix list which you
can navigate with
There is so much more that can be done with Fzf. For example you can navigate Vim’s
:help documentation with
:Helptags, search for Snippets (
:Snippets), Git Commits (
:Commits), Command history (
:History:), and more. Use
:h fzf-vim-commands to find out all the options available to you.
For most people, having a good code completion experience is pivotal to having a modern development setup. Vim supports some basic functionality out of the box through
omnicomplete, but we’re going to replace that with something much more powerful.
I discovered Coc.nvim recently and it’s been great! It brings several IDE-like features to Vim and is easy to set up. It’s built upon the concept of language servers, which power features like auto-completion, go-to-definition, hover tooltips, and more in modern editors.
:CocInstall coc-tsserver coc-json
I hope you’ve found this article useful. If you have any questions, or experience any troubles while configuring a plugin, do leave a comment below and I’ll get back to you. If you’re curious about my personal configuration, you can check out my dotfiles or send me a message on Twitter.
Thanks for reading!