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.

Answer 1

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!