How to config ESLint for React on Atom Editor
In Atom Editor I installed the following plugins
- linter
- 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.
To get Eslint working nicely with React.js:
- Install linter & linter-eslint plugins
- Run
npm install eslint-plugin-react
- Add
"plugins": ["react"]
to your .eslintrc config file - 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.
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.
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
}
}
}