Configuring eslint using JSX

Question

I cannot figure out how to configure the .eslintrc file to properly accept JSX. In other words, it worries when JSX is introduced in Atom.

I added "parser": "babel-eslint" , as this seems to be part of what other people did to set up their linters ... but then I get this error in Atom:

Error: cannot find module 'babel-eslint' from '/Users/josetello/.atom/packages/linter-eslint/ node_modules'

I have a babel-eslint, established globally and --save-dev . Bad luck. Not sure why he complains about the atomic packet ...

Is there a better way to configure .eslintrc for JSX?

My .eslintrc file:

 { "settings": { "ecmascript": 6 }, "ecmaFeatures": { "blockBindings": true, "jsx": true }, "parser": "babel-eslint", "env": { "browser": true, "jquery": true, "node": true, "mocha": true, "es6": true }, "rules": { "prefer-arrow-callback": 1, "semi": 1, "strict": 0, "indent": [2, 2], "quotes": [1, "single"], "no-multi-spaces": [1, { "exceptions": { "VariableDeclarator": true, "FunctionExpression": true } }], "key-spacing": [0, {"align": "value"}], "no-underscore-dangle": 0 }, { "plugins": [ "react" ] } } 

Answer 1

ESLint 2 has changed ecmaFeatures values ​​( and much more ... )

Instead

 { ecmaFeatures: { jsx: true } } 

to try

 { parserOptions: { ecmaFeatures: { jsx: true } } } 

And I think you can remove parser , but I do not use Atom myself, so I will not say this for sure. This is not part of my own .eslintrc. And then you probably want to add reactive brute force rules. https://github.com/yannickcr/eslint-plugin-react

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

I like just adding all this garbage to the rules , so I have quick access when I want to disable something, but maybe it's just me.

 { "rules": { "jsx-quotes" : 1, "react/display-name": 0, "react/forbid-prop-types": 0, "react/jsx-boolean-value": 1, "react/jsx-closing-bracket-location": 1, "react/jsx-curly-spacing": 1, "react/jsx-handler-names": 1, "react/jsx-indent-props": 1, "react/jsx-indent": 1, "react/jsx-key": 1, "react/jsx-max-props-per-line": 0, "react/jsx-no-bind": 0, "react/jsx-no-duplicate-props": 1, "react/jsx-no-literals": 0, "react/jsx-no-undef": 1, "react/jsx-pascal-case": 1, "react/jsx-sort-prop-types": 0, "react/jsx-sort-props": 0, "react/jsx-uses-react": 1, "react/jsx-uses-vars": 1, "react/no-danger": 1, "react/no-deprecated": 1, "react/no-did-mount-set-state": 1, "react/no-did-update-set-state": 1, "react/no-direct-mutation-state": 1, "react/no-is-mounted": 1, "react/no-multi-comp": 0, "react/no-set-state": 1, "react/no-string-refs": 0, "react/no-unknown-property": 1, "react/prefer-es6-class": 1, "react/prop-types": 1, "react/react-in-jsx-scope": 1, "react/require-extension": 1, "react/self-closing-comp": 1, "react/sort-comp": 1, "react/wrap-multilines": 1 } }