7

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?

  • What is the file extension of your file ? – fxbois Feb 3 '16 at 9:25
  • I've tested it with the extensions .js and .jsx – flooose Feb 3 '16 at 15:08
  • with .jsx, it should be ok. Are you sure you have associated .jsx files with web-mode (as shown on web-mode.org) ? – fxbois Feb 4 '16 at 7:25
  • the question is about jsx-mode not web mode. – flooose Feb 4 '16 at 12:07
10

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))))
  • 1
    Thank you so much, this was a huge pain point in emacs that you helped me with. – Drew Aug 27 '16 at 15:43
8

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.