Indent option for JSX component props/attributes

As suggested in #8425, I’m opening a new issue in hopes to address an indent rule collision when writing JSX components, as its props/attributes are forced to be indented as if they were children, rather than with an option to align with the first one, not unlike functions, variables, arrays, etc.

It’d be great if we could format props like this, yet naturally, the regular indent does not like it.

<RandomComponent className="stuff"
                 prop1={moreStuff} />

While I do realise the guidelines for requesting new rules specify avoiding requests for specific libraries or frameworks, the current implementation of indent conflicts with JSX, and ignoring JSX altogether --if I understand correctly-- implies disabling the regular indent rule, which would lead to missing out on other several other features.

This change I believe applies to most JSX environments, thought I’m currently using it with React. All modules in their current version as of this issue’s creation.

• ESLint Version: 4.0.0
• Node Version: 8.1.0
• npm Version: 5.0.3
• Webpack + Babel-loader, extending eslint: recommended and react-plugin.

Thanks!

[carlgieringer]

Is this what a rule using the new indent option to ignore indent for React attributes should look like?

{ "rules": { "indent": [ "warn", 2, { "SwitchCase": 1, "ignoredNodes": [ "JSXAttribute", "JSXSpreadAttribute", ], } ], } }

[not-an-aardvark]

That’s great. but what exactly will be ignored in it? I’m afraid it would ignore more than just the indentation of the component’s definition (or whatever this is called) and also ignore indentation for other pieces of JavaScript inlined therein.

It will ignore only the indentation of the properties, but it won’t ignore inlined javascript (the indentation of inlined code will still be checked relative to itself).

Considering the relatively widespread usage of JSX wouldn’t it be easier to add the same “first” option for these? (I honestly cannot possibly fathom the difficulty of such an addition). I can try to help contributing if someone can guide me.

I’ll copy a comment from https://github.com/eslint/eslint/issues/8709#issuecomment-307961485:

Maybe. The problem is that people have a wide variety of different indentation preferences, and the indent rule can’t realistically support all of them. Instead, the rule has a limited set of options and will allow you to turn off checks for JSX. The idea is that you can use the rule even if you disagree with a particular part of what it enforces, and potentially use a custom rule to enforce your own preferences for JSX indentation.

This isn’t to say that we’re never accepting any more options, but there’s a possibility that this won’t be accepted, simply because we can’t support everything.

---

As far as implementation is concerned, I think this would actually be pretty simple – it would just require replacing the 1 in this line with the user-provided option (e.g. a number or "first").