Configuring ESLint and Prettier for Vim with ALE
Asynchronous Lint Engine (ALE) for Vim
First, we are going to need a Vim plugin to help us integrate ESLint and Prettier into Vim. Asynchronous Lint Engine(ALE) is a Vim/NeoVim plugin providing on-the-fly syntax checking and automatic file formatting. It integrates with various linters and is easy to customize.
I'm not going to go into depth on all the different ways of installing VIM plugins. For the sake of this post, we're going to use vim-plug as our plugin manager. I will assume you already have it installed according to the installation instructions.
call plug#begin('$HOME/.vim/plugged') Plug 'dense-analysis/ale' call plug#end()
:PlugInstall in Vim will install ALE for us and we can move on.
ESLint & Prettier from NPM
Generally, I like to install all of my programs from the official repository of my Linux distribution or build them from source. In this case, we need to use
prettier-eslint we need
npm. Then we can run:
npm install -D --save-dev prettier-eslint-cli
Vim configuration for ALE and prettier-eslint
Most of the heavy lifting is automatically done by
prettier-eslint so our VIM configuration is pretty simple. To have ALE use
prettier-eslint, we need to define it as a "fixer" in our
Now we can run
Personally, I like to have a few other configuration options for ALE. These include fixing and formatting code on save, remove code highlighting on errors, and show error and warning sings in the Vim sign column (on the left).
let g:ale_fix_on_save = 1 let g:ale_sign_error = '>>' let g:ale_sign_warning = '--' let g:ale_echo_msg_error_str = 'E' let g:ale_echo_msg_warning_str = 'W' let g:ale_echo_msg_format = '[%linter%] %s [%severity%]' let g:ale_python_flake8_options = '--max-line-length 88 --extend-ignore=E203'
I felt the need to write this post as most solutions I could find on search engines were outdated or unnecessarily complicated.