Eslint-plugin-react: jsx-indent is not enforced on text

[astorije]

Consider the following, minimal configuration of ESLint + eslint-plugin-react:

parserOptions:
  ecmaVersion: 2017
  sourceType: module
  ecmaFeatures:
    jsx: true

plugins:
  - react

rules:
  react/jsx-indent: error

and the following JSX file:

import React from 'react';

export default function () {
    return (
        <div>
                    Test1

              <p>Test2</p>
        </div>
    );
}

The Test2 line gets flagged correctly:

8:15  error  Expected indentation of 12 space characters but found 14  react/jsx-indent

But the Test1 line passes the linter just fine. I looked at the jsx-indent doc and it didn't say that indentation only applies to actual JSX elements and not to text.
Is that expected behavior, or a bug / false positive? If expected behavior, should the doc mention it?

Apologies if there is already an issue about this, there are maaany opened issues about indentation and I might have skipped it if so.

[ljharb]

Hmm. I’d say it’s intended but unexpected behavior. Maybe we could add an option that would enable checking text indentation?

[astorije]

I could see why that would be the intent in some cases. Why would you say it's intended?

Naively, I would say because of elements like pre or textarea. It might get tricky with such elements. Though there could be an exclusion mechanism for them, there are legitimate cases when one would want to not care about text indentation.

Maybe apply this rule only when there are other elements, not only text? That would solve the cases above, I think. But also it's really late here, so I might be overseeing a lot of things 😅 Can you think of any?

Option sounds good. If the option is uncompromising, enabled by default would be nice, but if there are tricky cases, it would be reasonable to have it disabled by default.

[ljharb]

Disabled by default would be necessary to avoid a breaking change.

You raise a good point that inside pre or textarea (possibly others), the whitespace might be significant.

[astorije]

Yes, absolutely, I should have specified "enabled by default at next major release" or something.

Re: whitespace, if we're thinking about use cases, when I see:

    <div>
        <p>Foo</p>
                 Bar
    </div>

Clearly that seems like an indentation issue to me.

However, seeing:

    <pre>
Foo
    Bar
    </pre>

It's likely intentional.

There can be HTML elements in pre/textarea, but as far as I know they are treated as plain text by HTML renderers. Does the AST make a difference between, say a <em> within a rando <div> and between things like <pre> or <textarea>?

That might be a bit of a headache, but I'm thinking there must be a logical way to look at this. I'm too new to the JSX world to be knowledgeable, but could the JSX-specific rules around whitespace help with this?

[VladislavAnkudinov]

Hey guys, any news? Maybe there are workaround?

[damianobarbati]

@VladislavAnkudinov @astorije did you find solution for this?

[astorije]

@damianobarbati, we switched to Prettier when it comes to code style, and we are very happy with it :)

[golopot]

There is actually no problem with textarea and pre, react does not have special treatment for them, therefore the jsx trimming spaces thing still applies. In other words:

<pre>
        foo      
</pre> 

will render as <pre>foo</pre>. So the jsx-indent can indent them freely.