Auto-fix and format your JavaScript with ESLint

Eslint
Development

When it comes to analyzing JavaScript program errors, ESLint is one of the best linting tools available. ESLint provides checks for a large set of potential errors and style violations. Its pluggable architecture also enables anyone to write their own rules and custom configurations. One of my favorite features is the ability to auto-fix using the --fix flag. Integrating auto-fix provides constant feedback by cleaning up mistakes and keeping code clean before you check it in to a repository. Th

S.Sivashankar
Blog post cover image
When it comes to analyzing JavaScript program errors, ESLint is one of the best linting tools available. ESLint provides checks for a large set of potential errors and style violations. Its pluggable architecture also enables anyone to write their own rules and custom configurations.
One of my favorite features is the ability to auto-fix using the --fix flag. Integrating auto-fix provides constant feedback by cleaning up mistakes and keeping code clean before you check it in to a repository. This saves time for you and your team when reviewing code by ensuring that the code contributed doesn't require little clean ups.
Check out this article on why and how to use ESLint in your JavaScript project.
I like to do this cleanup right away whenever I save a file in my editor. It provides a quick feedback loop and persists the fixed changes to disk. In this article, I am going to show you how to do that as well for some popular editors.
Image showing JavaScript code that is cleaned up by ESLint. First, it shows code with extra code highlighted. Then, it shows the cleaned code.

Installing ESLint

You can install ESLint locally for a given project (inside node_modules) or globally for all projects. We will use a local ESLint install for this tutorial, but most of these will work for a global install as well.
sh
npm install eslint --dev
Show more

VS Code

For VS Code, install the ESLint package. Then, to format on save, go to global settings and search for ESLint and turn on the ESLint: Auto Fix On Save option.

Atom

For Atom, install the linter-eslint package and any dependencies. Then, go to the plug-in settings and check Fix errors on save.

Sublime Text

For Sublime, using Package Control, install the ESLint-Formatter package. Then, to format on save, add the following to the Preferences -> Package Settings -> ESLint-Formatter -> Settings -- User file:
json
{
  "format_on_save": true
}
Show more

Vim/NeoVim

For Vim users, add the ale package using your preferred packaging tool like vim-plug or Vundle to your $MYVIMRC:
vim
" vim-plug
Plug w0rp/ale
" Vundle
Plugin w0rp/ale
Show more
Then, enable auto-fix on save by setting the following configuration:
vim
let g:ale_fixers = {}
let g:ale_fixers.javascript = ['eslint']
let g:ale_fix_on_save = 1
Show more

Other editors

If your editor is not represented above, there may be an integration already or a way to use the eslint command directly to achieve a similar effect.
For example, the Vim plug-in will run something like the following:
sh
eslint -c <path-to-config> --fix <path-to-current-file>