Eslint (Airbnb) indentation issues with React code(JSX)

Question

I'm fighting with a minor issue with my eslint, it seems to work fine most of the time, but there are some cases that it doesn't work weel with React code.

Let take as example this code:

const cellPLay = (name, src) => (
  <Table.Cell>
    <Modal trigger={<Button icon><Icon name="video play" size="large" /></Button>}>
      <Modal.Header>
        {name}
      </Modal.Header>
      <Modal.Content image>
        <Modal.Description>
          <video src={src} controls style={{ width: 910 }} />
        </Modal.Description>
      </Modal.Content>
    </Modal>
  </Table.Cell>
);

Gives errors like that:

/my-path/MyFile.js:18:7: Expected indentation of 8 space characters but found 6. [Error/react/jsx-indent]

For some reason, eslint thinks Modal.Content should be indented in after Modal.Header, but even if I fix all indentation it asks it says the indentation of some closing tag is wrong:

Expected closing tag to match indentation of opening

My eslint config file:

{
  "extends": "./my-eslint/index.js"
}

The actual eslint code:

module.exports = {
  extends: require.resolve('eslint-config-airbnb'),
  env: {
    browser: true,
    jest: true,
    es6: true,
  },
  parserOptions: {
    ecmaVersion: 8,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    strict: 'error',
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
    'no-plusplus': 'off',
    'jsx-a11y/media-has-caption': 'off',
    'jsx-a11y/anchor-is-valid': [
      'error',
      {
        components: ['Link'],
        specialLink: ['to'],
      },
    ],
  },
};

I have tried adding manually the rule for jsx indent

'react/jsx-indent': [2, 2],

Didn't solve it.

Any other idea?

On a side note, VSCode was doing it correctly regarding the indentation, but when I run eslint manually it fails, and I need to fix it because there is code style automation running. I followed some answers and installed prettier on VSCode, it seems that now they got to the same page, but I need to fix the indentation issue.

UPDATE 1 As suggested by @a-jar-of-clay I tried to upgrade my packages, eslint to 5.4.0, airbnb to 17.1.0 and airbnb-base to 13.1.0

Now I got new error messages, probably due to some incompatibility:

Error: config-airbnb/rules/react.js: Configuration for rule "react/jsx-no-bind" is invalid: Value {"ignoreRefs":true,"allowArrowFunctions":true,"allowFunctions":false,"allowBind":false,"ignoreDOMComponents":true} should NOT have additional properties.

UPDATE 2 As asked by @matt-dell, the command that I'm using to run manually is:

./node_modules/.bin/eslint --fix --format unix  --config my-eslint/index.js

It's definitely picking up my config, as it reacts when I change some rule.

Can you give a more precise example of the code? const cellPLay = (name, src) => ( }> {name} ); isn't valid JavaScript. — Matt Dell
Oh, I'm sorry, the code was not corrected marked in the editor.. fixed it! — dfranca
Just curious, Does it work correctly when you change the file extension from js to jsx? — Hardik Modha
I've been unable to reproduce this with the code given. Are all the eslint and airbnb packages up to date? — A Jar of Clay
I also cannot reproduce it. Is the eslint config definitely getting picked up? I also wonder if prettier is causing a conflict somewhere. — Matt Dell

Stephan Hovius Stephan Hovius · Accepted Answer · 2018-09-26T13:13:21

I had the same problem and I fixed it with some packages: By using the eslint plugins and extending the react-app eslint it was fixed.

package.json

    "babel-eslint": "^7.2.3",

    "eslint": "^4.19.1",
    "eslint-config-react-app": "^2.1.0",
    "eslint-plugin-flowtype": "^2.50.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.11.1",

.eslintrc.js

 "env": {
    "browser": true,
    "es6": true
},
"extends": ["react-app", "eslint:recommended"],
"parserOptions": {
    "ecmaFeatures": {
        "experimentalObjectRestSpread": true,
        "jsx": true
    },
    "sourceType": "module"
},
"globals": {
    "React": true
},
"plugins": [
    "react"
],
"rules": {/* define your rules here...*/}

Good luck!

Eslint (Airbnb) indentation issues with React code(JSX)

1 Answers