I cannot figure out how to configure my .eslintrc file to properly "accept" JSX. In other words, it freaks out when JSX is being typed out in Atom.
I added the "parser": "babel-eslint"
, since that seems to be part of what other people have been doing to adjust 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 babel-eslint installed globally and --save-dev
. No luck. Not sure why it complains about an atom package...
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"
]
}
}
Things have changed in ESLint 2 in regards to ecmaFeatures
(and a lot more...)
Instead of
{
ecmaFeatures: {
jsx: true
}
}
try
{
parserOptions: {
ecmaFeatures: {
jsx: true
}
}
}
And I think you can remove parser
, but I don't use Atom myself, so I not going to say it for certain. It's not part of my own .eslintrc. And then you probalby want to to add the react linting rules. https://github.com/yannickcr/eslint-plugin-react
{
"extends": ["eslint:recommended", "plugin:react/recommended"]
}
I like to just add all this junk to rules
so I have quick access when I want to disable something, but maybe that'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
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With