Eslint-plugin-react: jsx-indent behaving badly

[SirCameron]

The jsx-indent rule is misbehaving when functional component arguments are not on one line.

working correctly:

const Component = ({one, two, three}) => (
  <Foo>
    <Bar/>
  </Foo>
)

Not correct (adding additional indent in JSX):

const Component = ({
  one,
  two,
  three
}) => (
    <Foo>
      <Bar/>
    </Foo>
)

The above needs to happen when the arguments are many and extend over 120 characters.

.eslintrc

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": [
    "react",
    "react-hooks"
  ],
  "env": {
    "node": true,
    "es6": true,
    "browser": true,
    "jest": true
  },
  "rules": {
    "max-len": ["error", 120],
    "consistent-return": 0,
    "class-methods-use-this": 0,
    "import/prefer-default-export": 0,
    "no-unused-expressions": ["error", { "allowShortCircuit": true }],
    "no-param-reassign": ["error", { "props": false }],
    "camelcase": "warn",
    "no-underscore-dangle": "warn",
    "newline-before-return": "warn",
    "object-curly-newline": 0,
    "no-bitwise": 0,
    "no-restricted-syntax": 0,
    "arrow-parens": ["error", "as-needed", { "requireForBlockBody": true }],

    "react/jsx-filename-extension": 0,
    "react/jsx-sort-props": "warn",
    "react/no-unescaped-entities": 0,
    "react/prefer-stateless-function": "warn",
    "react/forbid-prop-types": 0,
    "react/destructuring-assignment": 0,
    "react/jsx-one-expression-per-line": 0,
    "react/state-in-constructor": ["warn", "never"],
    "jsx-a11y/no-static-element-interactions": 0,
    "jsx-a11y/anchor-is-valid": 0,
    "jsx-a11y/mouse-events-have-key-events": 0,

    "jsx-a11y/label-has-associated-control": [ "error", {
      "required": {
        "some": [ "nesting", "id"  ]
      }
    }],
    "jsx-a11y/label-has-for": [ "error", {
      "required": {
        "some": [ "nesting", "id"  ]
      }
    }],
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": true,
      }
    ],
    "import/no-unresolved": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Could be that my eslint config is incorrect. Any help would be muchly appreciated.

[SirCameron]

Also potentially a bug.

[SirCameron]

Any updates?

[ljharb]

nope, it has "help wanted" which means it's awaiting a PR.

[Zarina2311]

I tried to replicate the same piece of code and it worked for me. @SirCameron do you have Prettier installed by chance? I wonder if that what was causing the indent to move. I removed Prettier and it seemed fine.

[ljharb]

When using prettier, you also need to use eslint-config-prettier (and their /react config) to disable conflicting rules, including jsx-indent.

Closing until the OP confirms the problem still exists.

[Moong0122]

May I try to solve this bug?

[ljharb]

@Moong0122 it's not clear this is a bug, but if you can provide failing test cases, that'd be great.