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