Webstorm ignores ESLint indentation for JSX

user_6826164 0
Viewed 162

When I execute "Reformat Code", my multi-line JSX components indent like this:

<SubTabBar clickHandler={subtab => this.setState({ subtab })}
           currentSubtab={subtab}
           sport={sport} />

They then have an ESLint error, such as "ESLint: Expected indentation of 10 spaces but found 19.(indent)"

When I right-click and do ESLint fix, I get this, which ESLint is happy with:

<SubTabBar clickHandler={subtab => this.setState({ subtab })}
  currentSubtab={subtab}
  sport={sport}/>

But this is untenable since "Reformat code" gives the wrong indentation, and especially because I have Reformat Code running on Commit! So it always winds up wrong!

I did do "Apply ESLint Code Style Rules" from .eslintrc but they don't help this case. I can't find anything applicable in the preferences (the oft-recommended unchecking of "Align when multiline" doesn't fix it.)

How can this be fixed?

eslint reactjs webstorm
1 Answers

Whoops, figured it out! I thought it was worth mentioning here because it's very much not where I thought it was. These aren't simply JS settings. They're no section for JSX settings, but what are you doing in JSX? Writing HTML.

In the HTML Code Style section, unchecking "align attributes" fixed my problem.

user_68261640
Related