không thụt lề html / jsx trong chế độ jsx

Vì một số lý do, html / jsx trong các tệp nguồn phản ứng của tôi luôn muốn thụt lề như sau, tức là gần như không có thụt lề:

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

Những gì tôi thực sự thích là một cái gì đó như sau:

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

Đây là vết lõm mà tôi nhận được khi sao chép html / jsx vào bộ đệm đầu với chế độ html hoặc chế độ web được bật. Như bạn có thể thấy, phần thụt đầu dòng dễ đọc hơn nhiều và nó hoạt động như thế này cho dù tôi sử dụng chế độ html hay chế độ web.

Làm cách nào tôi có thể làm cho các tệp nguồn phản ứng của mình thụt vào html / jsx như thế này?

Đây là một vấn đề được biết đến và cho đến nay, nó vẫn chưa được khắc phục. Tôi đã quyết định từ bỏ jsx-modevì lý do này và chỉ sử dụng web-mode. Nó có hỗ trợ cho JSX và phù hợp hơn cho các tệp nội dung hỗn hợp.

Kể từ khi tôi làm việc trong một số dự án mà không phải tất cả có ước cùng của việc sử dụng các .jsxkết thúc cho các tập tin JSX (một số chỉ đơn giản là sử dụng .jskết thúc), tôi cũng đã thực hiện việc hack sau để thiết lập web-mode-content-typeđể jsx, khi nó "javascript". Điều này có hậu quả là tất cả các tệp javascript đều được coi là JSX, nhưng hy vọng điều này sẽ không có bất kỳ hậu quả tiêu cực nào.

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

FYI cho bất kỳ ai khác gặp phải vấn đề này, điều này là do dự án chế độ jsx này không được thực hiện để chỉnh sửa các mẫu React JSX của Facebook mà thay vào đó là ngôn ngữ javascript được biên dịch khác cũng được gọi là JSX .

Việc có cùng tên với các mẫu React là hoàn toàn ngẫu nhiên.

Đây là lý do tại sao lần đầu tiên cam kết với repo này là 4 năm (trước khi hẹn hò với Facebook của JSX và React theo năm) và lần cam kết cuối cùng trong repo này đã trở lại vào năm 2013 (cũng là React trước khi hẹn hò).