Auto-fix and format your JavaScript with ESLint

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.

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.

Note: This is not a tutorial on how to use ESLint, I assume you already are familiar with the tool. If you need help getting started with ESLint, check out the Getting Started guide first before continuing.

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.

npm install eslint --dev

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:

{
  "format_on_save": true
}

Vim/NeoVim

For Vim users, add the ale package using your preferred packaging tool like vim-plug or Vundle to your $MYVIMRc:

" vim-plug
Plug w0rp/ale
" Vundle
Plugin w0rp/ale

Then, enable auto-fix on save by setting the following configuration:

let g:ale_fixers = {}
let g:ale_fixers.javascript = ['eslint']
let g:ale_fix_on_save = 1

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:

eslint -c <path-to-config> --fix <path-to-current-file>

Then, reload the file in the buffer.

Summary and next steps

congratulations! Happy auto-formatting!

Next, check out this article on how to validate your GraphQL queries with ESLint.