What is ESLint? How do I set it up on Atom?

Occasionally, I’d hear about linters, but never gave it much attention. I’d rationalize, I’m coding pretty well without a linter already, why bloat my coding experience?

Linters save time for you, by debugging your code before you even run your application. Additionally it makes sure you and your team are all following clean code practices. ESLint is quick and easy to setup and the benefits are too great to ignore.

Imagine.

You had a misspelled variable named _people_ and you run your code, then your projects breaks, you go on console, console says some arbitrary line number like error on line 43, then you go to line 43, see that you passed a variable named _purple_ instead of _people_. You probably wasted 3 minutes, where your linter would’ve immediately caught it, Error: No variable named purple, you fix it, you move on.

Installing Atom Packages

For you to be able to use ESLint you have to make sure you have two packages installed in Atom.

Let’s go to Atom’s settings, which you can get to by simply pressing ⌘+, or Atom > Preferences on a Mac and by pressing ctrl+, or File > Settings on Windows. Once your at the settings tab, click on Install and you should see a search bar to search for package names.

Type the title of these two packages and install both.

Setup ESLint

All you have to do now is create a new file and name it .eslintrc at the root of your project directory with ESlint rules. These rules can be created yourself or you can also npm install rules that others have created to quickly get started.

For this example, we’ll use a set of rules that Google has created and you can install it through the following command.

$ npm install --save-dev eslint eslint-config-google

Afterwards, you’ll need to add the following to your .erlintrc file.

{“extends”: “eslint-config-google”}

Try It

If everything was done correctly, you can try the following code below and eslint should automatically give you an error. Once you correct it by having a space after the closing parentheses and opening brace, it should disappear on its own.

If you don’t see any errors show up, try quitting Atom and starting it again.

Some Help from ESLint to Create Your Own Rules

The guys from ESLint let me know, they can also help you get started quickly with your own rules.

The following line will install ESLint globally.

$ npm i -g eslint

Then this line will prompt you with some questions about your coding preferences so that you can use your own set of rules.

$ eslint --init

Thanks for reading! Please share and recommend to other interested readers!

Check out my portfolio http://mohammedchisti.com