by Steven Gilbert
How to set up ESLint in Atom so you can contribute to Open Source
If you want to contribute to open source projects like Free Code Camp, first you’ll need to set up linting.
Let’s set up ESLint to run in Atom, one of the most popular code editors.
Before we begin, here’s a quick heads-up that I make a few assumptions:
- You’ve followed Free Code Camp’s contribution guidelines up to the part that reads Setup Linting.
- And so you have installed the necessary prerequisites (particularly Node.js and npm).
- You have at least a basic understanding of using the command line and git.
- You’re using Atom as a text editor (although this article should be useful even if you’re not—you’d just need to check your text editor’s documentation for instructions regarding ESLint)
What exactly is linting?
“Linting is the process of running a program that will analyze code for potential errors.” — Oded on Stack Overflow
Imagine ESLint as your grandma telling you how to live your life. She points out your errors and tells you to clean them up. You listen to grandma, because grandma knows.
Once you’ve made clear how code should be written for your software project (meaning, you chose a style guide or created one of your own), you’re ready to set up your linting rules for ESLint.
The way ESLint works is you tell it what rules (i.e., you take your style guide rules and convert them to linting rules) it should know about and what it should look out for, so ESLint can tap you on the shoulder and let you know when you write problematic code.
To tell ESLint about your linting rules, you configure them in a config file called
package.json, which ESLint will look for and read automatically. And as you’re developing, ESLint will warn you of trouble code that doesn’t obey these rules so you can make revisions—as you’re coding. Which is like having grandma pair program with you.
Where ESLint shines is it is “designed to be completely configurable, meaning you can turn off every rule and run only with basic syntax validation, or mix and match the bundled rules and your custom rules to make ESLint perfect for your project.” In other words you can mix and match both objective and subjective rules.
Setup Linting for Free Code Camp
There are two ways to install ESLint: globally and locally. We’re going to focus on installing it locally, which means for your local working directory, i.e., your Free Code Camp cloned repository.
1: Open your Free Code Camp clone in your text editor (this assumes you have indeed cloned Free Code Camp to your computer)
2: In Terminal,
cd (change directory) to your Free Code Camp directory
npm install eslint --save-dev into Terminal
4: In your Atom text editor, go to Preferences >;> Install >> and type linter-eslint in the Search Packages search box
Note: You can also install Atom packages from the command line using the
apm command. See these instructions for an example.
5: Install linter-eslint and linter.
6: In your Free Code Camp directory, close out of any
<filename>.js files and and then re-open
Note: I’ve left out an important step: configuring ESLint, that is, the part where you customize ESLint and tell it about your linting rules. I did so because when you clone Free Code Camp’s repository, it already comes with ESLint configuration files, for example, see
package.json. And so you don’t need to do any configuration of your own.
In the event you work on a project where you need to configure ESLint, I point you to the following links:
To wrap up:
- Linting is the process of checking for problematic code.
- ESLint is one such tool that performs linting.
- ESLint can be a great learning tool because it forces you to write clean, consistent code and develop good coding habits.
- Many open source projects ask you to run ESLint.
- You should have ESLint set up in your text editor to contribute to Free Code Camp.
- If you’re not using Atom, check your text editor’s docs for how to install ESLint.
- Stay the course.