no html/jsx indentation in jsx-mode

Question

For some reason the html/jsx in my react source files always wants to indent as follows, i.e. there is almost no indentation:

return (
  <DateRangePicker ranges={this.state.ranges} startDate={this.state.startDate} endDate={this.state.endDate}
  onApply={this.applyEvent}>
    <Button className="selected-date-range-btn" style={{width : '250px'}}>
    <div className="pull-left">
    <Glyphicon glyph="calendar"/>
    </div>
    <div className="pull-right"><span>{label}</span></div>
    </Button>
  </DateRangePicker>
)

What I'd really like is something like the following:

<DateRangePicker ranges={this.state.ranges} startDate={this.state.startDate} endDate={this.state.endDate}
             onApply={this.applyEvent}>
    <Button className="selected-date-range-btn" style={{width : '250px'}}>
        <div className="pull-left">
            <Glyphicon glyph="calendar"/>
        </div>
        <div className="pull-right"><span>{label}</span></div>
    </Button>
</DateRangePicker>

This is the indentation I get when I copy the html/jsx to the scratch buffer with html-mode or web-mode enabled. As you can see, the indentation is much more readable and it works like this whether I use html-mode or web-mode.

How can I make my react source files indent the html/jsx like this?

Answer 1

This is a known issue and as of now, it has not been fixed. I've decided to forego jsx-mode for this reason and just use web-mode. It has support for JSX and is better suited for mixed content files.

Since I do work in several projects that don't all have the same convention of using the .jsx ending for JSX files (some simply use .js endings), I've also implemented the following hack to set the web-mode-content-type to jsx, when it's "javascript". This has the consequence that all javascript files are considerd JSX, but hopefully this will not have any negative consequences.

(add-hook 'web-mode-hook
      (lambda ()
        ;; short circuit js mode and just do everything in jsx-mode
        (if (equal web-mode-content-type "javascript")
            (web-mode-set-content-type "jsx")
          (message "now set to: %s" web-mode-content-type))))

Answer 2

FYI for anyone else who comes across this issue, this is because this jsx-mode project is not made to edit Facebook's React JSX templates but rather this other compiled javascript language also called JSX.

That having the same name as the React templates is entirely coincidental.

This is why the first commits to this repo were 4 years (pre-dating Facebook's JSX and React by years) and the last commit in this repo was back in 2013 (also pre-dating React).