Press "Enter" to skip to content

Setup ESLint for a React Native project using Atom

Well, that’s a mouthful, but it covers what we are going to do in this blog post. Setting up ESLint varies quite a lot across different editors and there is a lot of conflicting information out there on how to properly set it up. I found that this works well for me so I thought I’d share it.

Set up our editor: Atom

For ESLint to work with our Atom editor we are going to need to install two packages. Open the Preferences tab (on Mac : CMD + , ) and click on Install. Here you can search for packages, we are going to install two:

  • Linter – Which is a base linter provider.
  • Eslint – A plugin for Linter that provides an interface for ESLint.

When installed properly they should show up in the Packages pane.Screenshot of packages pane of ATOM editor showing linter and eslint packages

Hop on over to the Terminal

With the editor side set up for ESLint, we now hop over to the terminal and set up the ESLint node package thru npm.

    1. In the root folder of your React Native project:
      npm install --save-dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint
    2. Open your package.json file and add
      "scripts": {
      "eslint": "eslint"
      }

      The execute it by running npm run eslint -- --init
    3. You are now offered a bunch of options, choose the following:
      • Select ‘Use a popular style guide’
      • Choose Airbnb – I know that Airbnb dropped React Native but for now, it is still the option I believe
      • Pick ‘Use React’
      • Choose JSON type for the config file
      • Allow it to update or downgrade to different versions and/or install packages if it asks
    4.  If all went well you should see the following message: Successfully created .eslintrc.json
    5. Paste this into .eslintrc.json:
      {
        "rules": {
          "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
        },
        "env": {
          "browser": false,
          "es6": true
        },
        "parser": "babel-eslint",
        "extends": "airbnb"
      }
      
    6. Restart Atom for the changes to take effect

Wrap up

That’s it, ESLint is set up and ready to use. We have added a ruleset it can apply – the one from Airbnb, you can check the style guide for information on all the rules. If you want to disable a rule you can do this globally in the .eslintrc.json like we did here:

"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
}   // This disables the rule that specifies that all file extensions should be jsx

If you want to disable a rule locally, you can do that like this:
/* eslint-disable padded-blocks */
...your code...
/* eslint-enable blocks */

Summary

We now have setup ESLint integrations for our editor, ATOM, so it warns us whenever we violate an ESLint rule. We know how to set up ESLint in a React environment and extend the rules from open source projects like Airbnb or Google. If you want to add or disable a rule, you know how to do this as well. I hope this article was helpful and happy coding!

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *