jsx-modeではhtml / jsxインデントなし

何らかの理由で、私の反応ソースファイル内のhtml / jsxは、常に次のようにインデントしたい、つまりほとんどインデントがありません。

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

私が本当に欲しいのは次のようなものです：

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

これは、htmlモードまたはwebモードを有効にしてhtml / jsxをスクラッチバッファーにコピーするときに取得するインデントです。ご覧のとおり、インデントははるかに読みやすく、HTMLモードでもWebモードでも、このように機能します。

このようにhtml / jsxの反応ソースファイルをインデントするにはどうすればよいですか？

これは既知の問題であり、現時点では修正されていません。私はjsx-modeこの理由から先送りして、そのまま使用することにしましたweb-mode。JSXをサポートしており、混合コンテンツファイルに適しています。

私はいくつかのプロジェクトで作業している.jsxため、JSXファイルの末尾を使用するすべての規則が同じではない（一部は単に末尾を使用する.js）ため、次のハックを実装して、「javascript」のときにをに設定しweb-mode-content-typeましたjsx。これにより、すべてのjavascriptファイルがJSXと見なされるという結果になりますが、うまくいけば、これが悪影響を与えることはありません。

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

この問題に遭遇した他の人のための参考までに、これはこのjsx-modeプロジェクトがFacebookのReact JSXテンプレートを編集するためではなく、JSXとも呼ばれるこの他のコンパイルされたJavaScript言語を編集するためです。

Reactテンプレートと同じ名前を持つのは完全に偶然です。

これが、このリポジトリへの最初のコミットが4年であった（FacebookのJSXとReactの日付が数年前）と、このリポジトリの最後のコミットが2013年に戻った（これもReactの日付でした）。