How to configure ESLint to respond to Atom Editor

Question

In the Atom editor, I installed the following plugins

• linter
• Linter-eslint

They do not seem to recognize the JSX syntax.

I am working on the command line, but I need to use other plugins like esprima-fb and eslint-plugin-react . It seems that there are no such plugins for Atom Editor and would like to know if any of you know a way to hack this.

Answer 1

To get Eslint to work well with React.js:

• Install linter and linter-eslint plugins
• Run npm install eslint-plugin-react
• Add "plugins": ["react"] to the .eslintrc configuration file
• Add "ecmaFeatures": {"jsx": true} to the .eslintrc configuration file

Here is an example .eslintrc configuration 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 ). Hope this helps.

Answer 2

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

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

And reopen all files containing JSX, and it should work.

Answer 3

You need to edit the local .eslintrc project that .eslintrc will load. If you want to integrate with Atom, you can install the linter and linter-eslint plugins .

To quickly configure ESLint best practices for React, the best option is to install the npm eslint-plugin-react and expand their recommended configuration to manually switch many rules:

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

This will allow you to use eslint-plugin-react and the recommended rules from the ESLint and React presets. There is more valuable information in the latest version of the ESLint user-guide .

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

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

Answer 4

I use Atom and it works fine. You just need .eslintrc in the root of your project, which tells ESLint that you are using eslint-plugin-react .

Answer 5

• For Mac user: go to Atom -> settings -> Install -> linter-eslint search package -> click on install

• For Ubuntu user: select Edit → preferences → Install → search package linter-eslint → click on install

• go to command line ---> npm install --save-dev eslint-config-rallycoding

• Come to the atom, create a new .eslintrc file and expand the rally code.