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

Answer 1

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
    }
  }
}