ESLint and Atom

Posted on 29 May, 2017

So I finally decided to try out a linter (a package which checks code against an 'ideal best practice' and flags up any issues). I'm using the Atom text editor, and after a little searching I found this article on FreeCodeCamp's Medium publication which purports to explain how to easily set up ESLint ...

Unfortunately it's only easy if you're working with a clone of FreeCodeCamp's Github repo — which I wasn't. So after a lot of back-and-forth I've now worked out how to set up ESLint from scratch (kind-of).

Setting up ESLint from scratch (kind of)

1. In a terminal, change to the root directory of your project.

2. Make a file .eslintrc

3. Open the .eslintrc file from FreeCodeCamp's Github, copy the contents and paste them into your local file

4. Run the following commands in the terminal (making sure that you're still in the root directory of your project):

npm install --save-dev eslint eslint-plugin-react eslint-plugin-import eslint-plugin-prefer-object-spread babel-eslint

5. And then

npm install language-babel linter linter-eslint linter-ui-default

The first command uses Node Package Manager (npm) and installs both the main eslint package and a number of plugins which are required to be able to use the FreeCodeCamp configuration; the second command uses the Atom Package Manager (apm) to install the necessary packages in Atom.

Now you should be able to open Atom and get messages from the linter.

Note that because this only installs ESLint locally on the project, you'll need to repeat steps 4 and 5 for each project that you want to use the linter for. Because I'm experimenting here I don't (yet) want to install ESLint globally ...

Posted in code, eslint, javascript

You can find me at