How to config ESLint for React on Atom Editor

Question

In Atom Editor I installed the following plugins

1. linter
2. linter-eslint

It seems they don't recognize the JSX syntaxis.

I have it working on the command line but had to use other plugins like esprima-fb and eslint-plugin-react. Looks like there are no such plugins for Atom Editor and would like to know if anyone of you knows a way to hack around this.

Answer 1

To get Eslint working nicely with React.js:

1. Install linter & linter-eslint plugins
2. Run npm install eslint-plugin-react
3. Add "plugins": ["react"] to your .eslintrc config file
4. Add "ecmaFeatures": {"jsx": true} to your .eslintrc config file

Here is an example of a .eslintrc config file:

{
    "env": {
        "browser": true,
        "node": true
    },

    "globals": {
        "React": true
    },

    "ecmaFeatures": {
        "jsx": true
    },

    "plugins": [
        "react"
    ]
}

I am using Eslint v1.1.0 at the moment.

Side note: I had to install both eslint and eslint-plugin-react as project dependencies (e.g., npm install eslint eslint-plugin-react --save-dev). Hopefully this helps.

Answer 2

Updated answer for 2016: just install the react package in Atom and add a .eslintrc file in your project root (or in your home dir) containing the following:

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true
  }
}

And re-open any files containing JSX and it should work.

Answer 3

You need to edit a project local .eslintrc file that will get picked up by ESLint. If you want integration with Atom, you can install the plugins linter and linter-eslint.

To quickly setup ESLint for React best practices, current best option is installing the npm package eslint-plugin-react and extending their recommended configuration instead of toggling many rules manually:

{
  "extends": [ "eslint:recommended", "plugin:react/recommended" ],
  "plugins": [ "react" ]
}

This will enable eslint-plugin-react and recommended rules from ESLint & React presets. There is more valuable information in the latest ESLint user-guide itself.

Here is an example of parser options optimized for ES6 and webpack:

{
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "impliedStrict": true,
      "experimentalObjectRestSpread": true,
      "jsx": true
    }
  }
}