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 and you run your code, then your projects breaks, you go on console, console says some arbitrary line number like , then you go to , see that you passed a variable named instead of . You probably wasted 3 minutes, where your linter would’ve immediately caught it, , you fix it, you move on. _people_ error on line 43 line 43 _purple_ _people_ Error: No variable named purple 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 , which you can get to by simply pressing + or on a Mac and by pressing + or on Windows. Once your at the tab, click on and you should see a search bar to search for package names. settings ⌘ , Atom > Preferences ctrl , File > Settings settings Install 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 at the root of your project directory with ESlint rules. These rules can be created yourself or you can also rules that others have created to quickly get started. .eslintrc npm install 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 file. .erlintrc {“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

Google

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Too Long; Didn't Read

Company Mentioned

Mohammed Chisti

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Company Mentioned

Mohammed Chisti

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES