Set up ESLint in Atom

Written by jballin | Published 2018/11/15
Tech Story Tags: javascript | web-development | programming | coding | eslint

TLDRvia the TL;DR App

So you set up ESLint, either globally or in specific projects, but you can’t get the warnings to show up directly in Atom? You’ve come to the right place.

Install linter-eslint + peer dependencies

$ apm i linter-eslint linter linter-ui-default intentions busy-signal

Customize ESLint Settings

Open Atom’s Preferences to see your Packages. Under Community Packages, open linter-eslint’s settings and make the below changes.

Don’t Point to Global (do the opposite if you want global)

  • Check “Disable when no ESLint config is found” (Disabling)
  • Uncheck “Use global ESLint installation” (Global ESLint)

Silence Some Rules While Typing (optional)

  • Check “Ignore fixable rules while typing” (Automatic Fixes)

Fix on save (optional)

  • Check “Fix errors on save” (Automatic Fixes)

NOTE: you must disable/uninstall any other linter packages

Try saving a file that has some linter issues, and you should see some warnings. Reload Atom if you ever have issues.

🔥 TIP 1: Turn off your linter when it’s too noisy! Open the “Command Palette” (can be found in “View” OR use cmd + shift + P) and type “enable” or “disable” and press Enter twice.

⌨️ TIP 2: I like to keep “Fix errors on save” off, so I added a keyboard shortcut (⌘+⌃+s) that auto-fixes them. To do so, add the following to Atom’s keymap.cson (click on “Atom” in the menubar and select “Keymap”):

'atom-text-editor:not([mini])':'cmd-ctrl-s': 'linter-eslint:fix-file'


Written by jballin | sup world
Published by HackerNoon on 2018/11/15