Formatador de JSX

Primeiro, ele analisa o código como um módulo JavaScript com JSX habilitado e o imprime em um estilo consistente. Os elementos JSX são então organizados usando as mesmas regras do formatador HTML, de modo que as tags de bloco aninhadas fiquem em linhas próprias, com indentação.

Quando um elemento contém filhos de nível de bloco, como div, section, p, ul ou h1, cada filho fica em uma linha própria e o elemento inteiro é envolvido por parênteses. Elementos que cabem em uma linha, como uma única tag de componente, permanecem em linha.

Sim, fragments escritos como <> e </> e componentes autocontidos, como <Item key={1}/>, são analisados e preservados. Seus atributos e expressões entre chaves são copiados como foram escritos.

O analisador para e a ferramenta exibe a mensagem, por exemplo, indicando um token inesperado, em vez de retornar código parcialmente formatado. Corrija o local informado e formate novamente.

Os blocos usam indentação de dois espaços, uma instrução por linha, espaços ao redor dos operadores e ponto e vírgula no fim das instruções. Não há opções para alterar o estilo.

Sim, comentários de linha e de bloco em JavaScript são preservados. Comentários dentro de expressões JSX permanecem entre as chaves.

Não. Anotações de tipo não fazem parte da gramática JSX que esta ferramenta analisa, então TSX com tipos é rejeitado como erro de sintaxe. Use o formatador TypeScript para código tipado.

O JavaScript é apenas reimpresso, e a organização de JSX altera os espaços em branco entre elementos de bloco, que React ignora quando eles ficam em linhas separadas. Confira o texto em linha junto às tags se o espaçamento exato for importante.

JSX é uma extensão de JavaScript, então o resultado é retornado como um bloco de código Markdown identificado como javascript. Copie as linhas entre as cercas para o seu arquivo .jsx.

Até 5 MB de código por execução; entradas maiores são rejeitadas com uma mensagem. A saída é igual à opção JSX do Code Formatter.