nenhum recuo html / jsx no modo jsx

8

Por alguma razão, o html / jsx nos meus arquivos de origem de reação sempre quer recuar da seguinte maneira, ou seja, quase não há recuo:

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

O que eu realmente gostaria é algo como o seguinte:

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

Esse é o recuo que recebo quando copio o html / jsx no buffer de rascunho com o modo html ou o modo web ativado. Como você pode ver, o recuo é muito mais legível e funciona assim, se eu uso o modo html ou o modo web.

Como posso fazer com que meus arquivos de origem de reação indentem o html / jsx assim?

indentation web-mode html

— flooose
fonte

Qual é a extensão do seu arquivo?

— Fxbois

Eu testei-o com os js extensões e .jsx

— flooose

com .jsx, deve estar tudo bem. Tem certeza de que você associou arquivos .jsx ao modo web (como mostrado em web-mode.org )?

— Fxbois

a questão é sobre o modo jsx e não o modo web.

— Flooose

10

Esse é um problema conhecido e, a partir de agora, não foi corrigido. Eu decidi renunciar jsx-modepor esse motivo e apenas usar web-mode. Ele suporta JSX e é mais adequado para arquivos de conteúdo misto.

Desde que eu fazer o trabalho em vários projetos que não têm todos a mesma convenção de usar o .jsxfim para arquivos JSX (alguns simplesmente usar .jsterminações), eu também tenho implementado o seguinte truque para definir o web-mode-content-typeque jsx, quando é "javascript". Isso tem a conseqüência de que todos os arquivos javascript são considerados JSX, mas espero que isso não tenha consequências negativas.

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

— flooose
fonte

11

Muito obrigado, esse foi um grande problema no emacs com o qual você me ajudou.

— Tirou

8

Para sua informação, para qualquer pessoa que se depare com esse problema, isso ocorre porque este projeto no modo jsx não foi feito para editar os modelos React JSX do Facebook, mas sim nessa outra linguagem javascript compilada também chamada JSX .

Ter o mesmo nome que os modelos React é inteiramente coincidência.

É por isso que o primeiro commit desse repo foi de 4 anos (pré-datando o JSX do Facebook e o React por anos) e o último commit desse repo foi em 2013 (também pré-datado do React).

— Victor Quinn
fonte