Formatador JSX
Formatar e embelezar JSX com destaque de sintaxe
Entrada
Saída formatada
O que é o Formatador JSX?
JSX é JavaScript com sintaxe semelhante a XML para componentes React. O Formatador JSX adiciona indentação e quebras de linha ao código JSX/React. A documentação JSX do React define a sintaxe. Formatadores padrão de JavaScript podem não tratar JSX corretamente.
Esta ferramenta é executada inteiramente no seu navegador. Nada é enviado a um servidor. Cole JSX ou envie um arquivo .jsx ou .js; obtenha saída formatada. Para JavaScript puro, use o Formatador JavaScript. Para validação, use o Validador JavaScript. Para conversão TypeScript, use JavaScript para TypeScript.
Como usar esta ferramenta
Colar ou enviar
Cole código JSX ou React no painel esquerdo ou envie um arquivo .jsx ou .js. Use Amostra para carregar código de exemplo. Use Limpar para redefinir.
Verificar a saída
O painel direito mostra JSX formatado com indentação adequada. JSX inválido mostrará um erro.
Copiar ou baixar
Use Copiar ou Baixar para obter o resultado. Para executar código, use o Console JavaScript. Para minificar, use o Minificador JavaScript.
Exemplos do Formatador JSX
Aqui está um exemplo de formatação de código JSX/React minificado.
Exemplo: Componente de cartão de assinante
Entrada JSX minificada:
Saída formatada:
Quando o Formatador JSX ajuda
Ao trabalhar com React, Next.js e outros frameworks baseados em JSX, este formatador lida com a mistura de JavaScript e XML. Ideal para componentes, hooks e templates JSX. Ferramentas de build como webpack e Vite frequentemente transformam JSX com Babel. Para JS puro, use o Formatador JavaScript.
Perguntas frequentes
Meus dados são privados?
Sim. A formatação é executada inteiramente no seu navegador. Nenhum dado é enviado a um servidor.
Formatador JSX vs Formatador JS?
O formatador JSX entende a sintaxe JSX (tags, props). O formatador JS é para JavaScript puro. Use o formatador JSX para código React.
Suporta TypeScript/TSX?
Pode processar TSX em alguns casos. Para formatação TypeScript, verifique a saída.
E os templates Vue?
Vue usa sintaxe de template diferente. Esta ferramenta é para JSX/React.