Setup ESLint for React Native in Atom Editor
This tutorial will cover simple steps on how to install and configure linting utility ESLint for JavaScript in Atom Editor for MAC.
If you are developing for Windows and is using Visual Studio Code, here’s how to install and use ESLint in VSC.
Step 1. Install the necessary prerequisites
You will need Node.js and npm. Here is a good Get Started Guide on installing node and updating npm.
You would need to do it in a command line on MAC. You can find the Terminal window on your MAC by opening the following directory: Finder -> Applications -> Utilities -> Terminal.
Step 2. Install linter plugins in Atom
Linting is a process of analyzing code and showing syntax errors in the code. These are very useful plugins that save a lot of time during software development.
In Atom go to Atom -> Preferences. My version of Atom is 1.14.2.
In Preferences go to Packages and install linter and linter-eslint plugins.
Step 3. Install a set of rules.
One good set of rules from a very good React Native teacher Stephen Grider is RallyCoding.
Install it as a project dependency by running:
npm install eslint-config-rallycoding --save-dev
This will install ESLint as a project dependency as well. So you don’t need to install other packages as of the current version of eslint-config-rallycoding 3.2.0.
Step 4. Create a config file
Create a new file within your project directory called .eslintrc.
Add some set of rules that you would like to use. Here is an example of a simple rule set:
{
"extends": "rallycoding",
"rules": {
"arrow-body-style": 0
}
}
In your Atom Editor it will look like this:
You are good to go!
To check whether ESLint is working open up any of your .js files and try removing a semicolon.
The red curly underline will signal that there are problems with your code.
Linter ESLint is not working
There may appear some problems where your linter-eslint won’t be working. There may be different reasons for the error. Here’s what you can try to fix ESLint in Atom:
- Provide path to config file
If your Atom editor can’t find the config file per default, you’ll need to set it manually.
Set the path to the new .eslintrc file by opening the Settings menu of the linter-eslint plugin:
Fill inn the right path to your new file in the .eslintrc Path field:
- ESLint install globally or locally
Depending on your installation process some packages maybe install in different places: some globally and some locally.
Check your project dependencies if you have all required packages installed in one place. For example, we have everything installed locally in the project directory.
Go to Your Project in Finder -> node_modules and check for ESLint packages:
Check out this post for more ESLint errors that you may encounter under installation.
