Formatador JSX

Enviar

0 caracteres

Ferramenta de formatação JSX do GeekFormat, baseada no motor Prettier v3 Standalone para formatação profissional de código de componentes React JSX/TSX. Suporta 12 configurações de formatação (tamanho da indentação, ponto e vírgula, estilo de aspas, vírgula final, espaçamento de colchetes, parênteses de função de seta, largura de impressão, aspas simples JSX, colchete JSX na mesma linha, estratégia de aspas de propriedade, etc.), com motor de compactação Terser integrado. Oferece troca entre sete linguagens: JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON. Editor com destaque de sintaxe CodeMirror 6, comparação em tempo real em colunas duplas, suporte a upload e download de arquivos, histórico, compartilhamento por URL, cópia com um clique. Processamento puramente no lado do navegador, código não é enviado ao servidor.

Sugestões Relacionadas

Compressor de JSX

Formatador de TSX

Formatar JavaScript

Formatador de CSS

Formatador JSON

Sobre formatação JSX

JSX é a sigla para JavaScript XML, uma extensão de sintaxe JavaScript introduzida pelo framework React que permite escrever estruturas de tags semelhantes a HTML diretamente no código JavaScript. O JSX é convertido em chamadas de função React.createElement() comuns por ferramentas como Babel ou TypeScript durante a compilação. O JSX torna a estrutura do código de componentes mais intuitiva — os desenvolvedores podem descrever a estrutura da UI como se estivessem escrevendo HTML, ao mesmo tempo em que obtêm todo o poder de expressão do JavaScript. No entanto, se o código JSX carecer de formatação padronizada — níveis de aninhamento de tags bagunçados, atributos desordenados, indentação inconsistente — isso afetará seriamente a legibilidade e a eficiência da manutenção, que é exatamente o valor das ferramentas de formatação JSX.

O Prettier é atualmente a ferramenta de formatação de código mais dominante no ecossistema JavaScript/JSX, criada por James Long em 2017 e agora se tornou o padrão de fato. A filosofia central do Prettier é o 'formatador opinativo' (opinionated formatter) — ele oferece apenas poucos itens configuráveis, com as demais regras embutidas e não modificáveis. A vantagem disso é eliminar intermináveis debates sobre estilo de código entre as equipes. O Prettier suporta várias linguagens e formatos como JSX/TSX/JavaScript/TypeScript/JSON/CSS/HTML/Markdown, sendo amplamente adotado por comunidades de frameworks principais como React, Vue, Angular. A maioria dos projetos front-end modernos integra o Prettier nos pipelines de CI/CD para garantir estilo de código consistente.

As regras centrais da formatação JSX incluem: Primeiro, níveis de indentação — cada tag JSX aninhada e expressão aumentam um nível de indentação, refletindo a estrutura em árvore do DOM; Segundo, organização de atributos — quando uma tag tem vários atributos e excede a largura da linha, cada atributo ocupa uma linha e fica alinhado; Terceiro, tratamento de parênteses — expressões JSX multilinha geralmente são envolvidas em parênteses para evitar problemas de inserção automática de ponto e vírgula (ASI); Quarto, tags auto-fecháveis — componentes sem elementos filhos usam a forma <Component />; Quinto, aspas de strings — atributos JSX usam aspas duplas por padrão (consistente com HTML), strings JavaScript usam aspas simples por padrão; Sexto, tratamento de espaços — se adiciona espaços em ambos os lados das chaves {} dentro das tags é configurável.

A compactação JSX (Minification) é a operação inversa da formatação, com o objetivo de converter JSX em código executável de volume mínimo, para implantação em ambiente de produção, reduzindo o volume de transmissão de rede e acelerando a velocidade de carregamento. A compactação JSX geralmente inclui as seguintes etapas: primeiro, compilar JSX para chamadas React.createElement (ou seja, JavaScript comum) usando Babel, depois usar um compactador (como Terser, UglifyJS) para: remover comentários e caracteres de espaço em branco, encurtar nomes de variáveis e funções (mangling), eliminar código morto (dead code elimination), simplificar expressões e instruções condicionais, mesclar declarações, funções inline, etc. Ferramentas de construção modernas (Webpack, Vite, Rollup) executam automaticamente a compactação de código no modo production.

Por que a formatação de código é importante? No trabalho em equipe, um estilo de código unificado pode melhorar significativamente a legibilidade e a eficiência da revisão. Se cada desenvolvedor formatar o código de acordo com suas próprias preferências, o Git diff estará repleto de alterações de formato sem sentido, dificultando para os revisores encontrarem as verdadeiras mudanças lógicas. Estudos mostram que os desenvolvedores gastam muito mais tempo lendo código do que escrevendo código, e um estilo de formatação consistente pode reduzir significativamente a carga cognitiva de leitura. Grandes empresas como Google, Meta e Airbnb têm normas rigorosas de estilo de código e cadeias de ferramentas de formatação automatizada, o que também reflete a maturidade da engenharia de software.

A divisão de trabalho entre Prettier e Linters (como ESLint, TSLint) é uma das melhores práticas da engenharia front-end moderna: o Prettier cuida exclusivamente do formato (formatting) — quebras de linha, indentação, espaços, ponto e vírgula, aspas, vírgulas e outros problemas puramente de estilo; o ESLint cuida exclusivamente da qualidade (code quality) — variáveis não utilizadas, bugs potenciais, problemas de segurança, melhores práticas e outros problemas lógicos. Ao usar ambos juntos, é necessário desativar as regras de formato no ESLint que se sobrepõem ao Prettier por meio do eslint-config-prettier, para evitar conflitos. Muitas equipes também configuram ganchos pre-commit (via husky + lint-staged) para executar automaticamente Prettier e ESLint antes de enviar o código, garantindo que todo código enviado ao repositório esteja em conformidade com as normas.

Ao escolher uma ferramenta de formatação JSX, vários fatores precisam ser considerados: Primeiro, escolha do motor — priorize o Prettier como motor, pois é o padrão da comunidade, com resultados previsíveis e consistência com extensões de IDE; Segundo, configurabilidade — escolha a quantidade de parâmetros ajustáveis de acordo com as necessidades da equipe; muitas opções, ao contrário, aumentam o custo de decisão; Terceiro, segurança — certifique-se de que a ferramenta processe o código localmente, não enviando para servidores, evitando riscos de vazamento de código-fonte; Quarto, funções adicionais — compactação, destaque de sintaxe, histórico, compartilhamento e outras funções podem melhorar a eficiência de uso; Quinto, suporte multilíngue — uma ferramenta que cobre várias linguagens como JS/TS/JSX/TSX/CSS/HTML/JSON pode reduzir o custo de troca de ferramentas.

Precauções de segurança ao usar ferramentas online de formatação de código: Primeiro, priorize ferramentas de processamento puramente no lado do navegador — essas ferramentas não precisam de servidor, o código roda apenas localmente, com máxima segurança; Segundo, não cole código contendo informações sensíveis — como senhas de banco de dados, chaves de API, lógica de negócios interna, algoritmos proprietários, etc. Mesmo que a ferramenta alegue não enviar, mantenha a consciência de segurança; Terceiro, verifique se a ferramenta usa HTTPS — evita espionagem durante a transmissão (embora ferramentas de processamento local não precisem de transmissão, a página em si também precisa de carregamento seguro); Quarto, use ferramentas locais para código importante — para código de negócios central, recomenda-se usar Prettier CLI instalado localmente ou extensões de IDE, não dependendo de serviços online; Quinto, revise regularmente a credibilidade da ferramenta — verifique se é open source, qual é a avaliação da comunidade, se possui política de privacidade, etc.

Casos de uso

Código de componente React copiado da internet com formatação bagunçada, formatação rápida para facilitar a leitura e o aprendizado
Organizar arquivos de componentes JSX ao assumir projetos antigos, unificar o estilo de código antes do desenvolvimento secundário
Formatar antes da revisão de código, eliminar diffs sem sentido causados por diferenças de formato, focar na revisão lógica
Reformatar código JSX de produção compactado, ler código ofuscado ao diagnosticar problemas em produção
Embelezar código de exemplo JSX antes de escrever blogs técnicos ou documentação, melhorar o profissionalismo do conteúdo
Comparar efeitos de diferentes configurações de formatação, servir como referência para seleção de configuração Prettier da equipe
Demonstrar o processo de formatação de código JSX de bagunçado para padronizado em apresentações de ensino
Ao depurar trechos de código React online, formatar primeiro antes de analisar a estrutura e localizar bugs
Na documentação de bibliotecas de componentes que geram código JSX, garantir estilo uniforme e bonito do código de exemplo
Organizar código de projetos React antes de entrevistas, garantir que as amostras de código enviadas tenham estilo padronizado
Formatar código JSX gerado por IA antes de colocá-lo no projeto, eliminar problemas de inconsistência de formato na saída da IA
Ao desenvolver projetos React Native ou Next.js, formatar rapidamente trechos de código de componente online

Como Usar

Cole o código JSX/TSX no editor esquerdo, ou clique no botão de upload para importar arquivos .jsx/.tsx, ou carregue diretamente de exemplos
Clique no botão de configurações para ajustar parâmetros de formatação: tamanho da indentação, ponto e vírgula, aspas, vírgula final, largura de impressão, opções JSX, etc., ou mantenha a configuração padrão
Clique no botão de formatação (ou use o atalho) para executar a formatação. O painel direito exibe o resultado instantaneamente. Você pode arrastar para ajustar a largura dos painéis
Se precisar compactar, clique no botão de compactação para alternar para o modo de compactação. O motor Terser produzirá código JSX minimizado
Clique no botão de cópia para copiar o resultado para a área de transferência, ou clique em download para salvar como arquivo, ou envie para outras pessoas via link de compartilhamento

Recursos

Motor Prettier v3: Baseado no Prettier v3 Standalone, o mais popular do setor, como mecanismo de formatação, combinado com o analisador Babel. Resultados consistentes com a extensão Prettier no VS Code, garantindo uniformidade no estilo de código da equipe
12 configurações de formatação: Ajuste o tamanho da indentação (2/4/8 espaços ou Tab), ponto e vírgula, aspas simples/duplas, vírgula final (none/es5/all), espaçamento de colchetes, parênteses de função de seta, largura de impressão, aspas simples JSX, colchete JSX na mesma linha, estratégia de aspas de propriedade e outros 12 parâmetros
Editor com destaque de sintaxe JSX: Editor de código profissional baseado em CodeMirror 6, suporta destaque de sintaxe JSX/TSX, números de linha, correspondência de colchetes, entrada à esquerda e resultado à direita em tempo real
Função de compactação JSX: Motor de compactação Terser integrado, compacta código de componentes JSX para volume mínimo com um clique. Suporta ofuscação de nomes de variáveis (mangle), remoção de código morto, limpeza de console/debugger e outras opções avançadas de compactação
Troca entre 7 idiomas: Suporta JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON — sete linguagens comuns de front-end. Uma ferramenta cobre todas as necessidades de formatação full-stack
Upload e download de arquivos: Suporta upload direto de arquivos .jsx/.tsx/.js/.ts/.css/.html/.json para formatação, podendo ser baixados e salvos localmente após o processamento
Painel de histórico: Salva automaticamente os registros de formatação recentes, suporta retrocesso de versões históricas e comparação de efeitos de formatação sob diferentes configurações
Copiar resultado com um clique: Código formatado ou compactado copiado para a área de transferência com um clique, diretamente colado no IDE ou projeto
Função de compartilhamento por URL: Codifica código e configuração no hash da URL via compactação LZ-String. Copie o link para compartilhar o código completo e os parâmetros de formatação
Dicas amigáveis de erro de sintaxe: Diferencia erros de sintaxe de outros erros quando a formatação falha, fornecendo dicas de localização para ajudar a corrigir rapidamente problemas de código
Colunas arrastáveis: Largura dos painéis esquerdo e direito pode ser ajustada livremente por arrasto, adaptando-se a diferentes tamanhos de tela e hábitos de leitura
Processamento local no navegador: Toda formatação, compactação e análise é feita em JavaScript no navegador. O código não é enviado a nenhum servidor, garantindo a segurança do código-fonte

Perguntas frequentes

Qual é o princípio da formatação JSX? Qual é a relação com o Prettier?

Esta ferramenta usa a versão Prettier v3 Standalone como mecanismo de formatação na camada inferior. Analisa a sintaxe JSX por meio do analisador Babel e depois reexporta o código com formatação organizada de acordo com as regras configuradas. O Prettier é atualmente a ferramenta de formatação de código mais popular no ecossistema front-end, amplamente utilizada em projetos React/Vue/Angular. Os resultados de formatação desta ferramenta são basicamente consistentes com os obtidos ao instalar a extensão Prettier no VS Code para formatar arquivos JSX. É adequado para formatação rápida online sem precisar abrir o IDE local.

Quais opções de formatação são suportadas? Posso personalizar a indentação e o estilo das aspas?

Suporta 12 configurações de formatação: 1) Tamanho da indentação: 2 espaços/4 espaços/8 espaços ou uso de Tab; 2) Uso de ponto e vírgula; 3) Aspas simples ou duplas; 4) Estratégia de vírgula final: none (sem)/es5 (arrays e objetos)/all (também em parâmetros de função); 5) Espaços dentro das chaves de objetos; 6) Parênteses em parâmetro único de função de seta; 7) Largura de impressão (número máximo de caracteres por linha); 8) Aspas simples ou duplas para atributos JSX; 9) Se o colchete direito de JSX multilinha fica na mesma linha do conteúdo; 10) Estratégia de aspas para propriedades de objetos: as-needed/preserve/consistent; 11) Sensibilidade a espaços em branco HTML; 12) Uso de Tab para indentação. Ajustes livres no painel de configurações.

A formatação altera a lógica do código JSX? É segura?

A formatação apenas ajusta caracteres de espaço em branco (quebras de linha, indentação, espaços) e formas de açúcar sintático como aspas e ponto e vírgula, não alterando nenhuma lógica de código. O Prettier é uma ferramenta madura validada por milhões de desenvolvedores em todo o mundo. O código formatado é semanticamente equivalente ao código original. No entanto, note que: se o código original tiver erros de sintaxe (como colchetes não correspondentes, tags não fechadas), a formatação falhará e indicará um erro de sintaxe. Nesse caso, é necessário corrigir o problema do código antes de formatar.

Como funciona a função de compactação JSX? Quais opções de compactação são suportadas?

A compactação JSX usa o motor Terser (um dos compactadores JavaScript mais populares do setor) executado localmente no navegador. A compactação inclui: remoção de comentários e espaços em branco excessivos, encurtamento e ofuscação de nomes de variáveis (mangle), eliminação de código morto (dead_code), remoção de variáveis não utilizadas (unused), otimização de elevação de funções/variáveis, simplificação de expressões condicionais, otimização de loops, etc. A compactação primeiro compila JSX para JavaScript comum via Babel e depois realiza a compactação e otimização. Observação: o código compactado tem legibilidade drasticamente reduzida, adequado para implantação em ambiente de produção, não para desenvolvimento e depuração.

Suporta TypeScript (TSX)? Qual é a diferença do JSX?

Suporta. A ferramenta usa linguagem JSX por padrão. Você pode alternar para o modo TSX pelo menu de troca de idioma no canto superior esquerdo. O modo TSX usa o analisador TypeScript, que reconhece corretamente anotações de tipo TypeScript (interface, type, generics, asserção de tipo, etc.), não reportando erros por sintaxe de tipo. O modo JSX usa o analisador Babel, adequado para componentes React em JavaScript puro. Na compactação TSX, as anotações de tipo são removidas automaticamente antes da compactação Terser.

O código JSX inserido é enviado para o servidor? A privacidade é segura?

Totalmente seguro. Todas as funções desta ferramenta (formatação, compactação, detecção de sintaxe, histórico) são executadas localmente no seu navegador via JavaScript. O conteúdo do código não é enviado pela rede a nenhum servidor externo. Prettier e Terser são bibliotecas implementadas puramente em JavaScript, que podem ser executadas diretamente no lado do navegador. Você pode usar esta ferramenta offline — todas as funções continuam funcionando normalmente. O histórico é salvo no localStorage do navegador, visível apenas no seu dispositivo atual.

Onde o histórico é salvo? Ele pode ser perdido?

O histórico é salvo no localStorage (armazenamento local) do navegador, vinculado ao navegador e dispositivo específicos. Se você limpar os dados do navegador, trocar de navegador ou usar o modo incógnito, o histórico será perdido. O histórico serve para retroceder rapidamente trechos de código formatados recentemente, facilitando a comparação de efeitos de diferentes configurações. É recomendado salvar códigos importantes como arquivos por conta própria, não dependendo apenas da função de histórico.

A função de compartilhamento por URL envia o código para o servidor?

Não. A função de compartilhamento por URL compacta o código e a configuração usando LZ-String e os codifica na parte hash da URL (conteúdo após o #). O hash da URL tem uma característica importante: ele não é enviado ao servidor com a solicitação HTTP, sendo lido e analisado apenas localmente no navegador pelo JavaScript. Quando o destinatário abre o link de compartilhamento, o navegador analisa diretamente o hash e descompacta para exibir o código — todo o processo não requer participação do servidor. No entanto, note que o link de compartilhamento contém o conteúdo completo do código. Se o código for sensível, não compartilhe em canais públicos.

O que fazer se a formatação falhar e indicar erro de sintaxe?

A causa mais comum de falha na formatação é que o código em si tem erros de sintaxe: 1) Tags JSX não fechadas — verifique se todas as tags têm par correspondente, se as tags auto-fecháveis estão corretas (<img /> em vez de <img>); 2) Colchetes não correspondentes — verifique se chaves {}, parênteses (), colchetes [] estão pareados; 3) Aspas não fechadas — se as aspas das strings estão completas; 4) Sintaxe escrita incorretamente — por exemplo, uso de sintaxe não permitida em JSX. Você pode primeiro verificar o número da linha e a mensagem de erro na dica para localizar o problema, ou simplificar o código e investigar passo a passo.

O que significa largura de impressão (printWidth)? Qual valor devo definir?

A largura de impressão (printWidth) é um dos parâmetros centrais do Prettier, indicando o número máximo de caracteres por linha de código. Quando uma linha de código excede essa largura, o Prettier automaticamente a quebra. O valor padrão é 80 caracteres, uma convenção de programação de longa data (originada de cartões perfurados e largura de terminal). Valores comuns: 80 (clássico conservador), 100 (mais comum), 120 (amigável para telas largas). Definir muito pequeno causa quebras frequentes que dificultam a leitura; definir muito grande torna a linha muito longa para ler em telas estreitas. Recomenda-se escolher um valor entre 80-120 de acordo com as normas da equipe e a largura do monitor.

Para que serve a vírgula final (trailing comma)? Qual modo devo escolher?

A vírgula final refere-se a adicionar uma vírgula também após o último item em estruturas multilinha como arrays, objetos e parâmetros de função. Os benefícios incluem: 1) Adicionar/remover itens altera apenas uma linha, Git diff mais limpo; 2) Evita erros de sintaxe por esquecer de adicionar vírgula; 3) Em alguns casos, análise mais estável. O Prettier oferece três modos: none (sem vírgula final, mais conciso), es5 (apenas onde suportado pelo ES5, ou seja, arrays e objetos, mais compatível), all (em todos os lugares possíveis, incluindo parâmetros de função, requer ES2017+ ou suporte Babel/TS). Para projetos modernos, recomenda-se o modo 'all', que funciona perfeitamente com compilação Babel ou TypeScript.

Quais são os efeitos de jsxSingleQuote e jsxBracketSameLine?

jsxSingleQuote (aspas simples JSX): Controla se os valores de atributos JSX usam aspas simples ou duplas. Por padrão, desativado (aspas duplas), o que está alinhado com a convenção de atributos HTML. Quando ativado, as strings de atributos em JSX usam aspas simples. jsxBracketSameLine (colchete JSX na mesma linha): Controla se o colchete direito de fechamento (/> ou >) de elementos JSX multilinha fica no final da última linha (mesma linha) ou em uma nova linha (linha diferente). Por padrão, desativado (nova linha). Quando ativado, o colchete direito fica na mesma linha que o último atributo. Diferentes equipes têm preferências diferentes — escolha o estilo consistente com o projeto.

Suporta formatação em lote de vários arquivos?

Atualmente, a ferramenta web é projetada principalmente para cenários de formatação rápida de arquivo único, suportando upload de arquivo individual. Se você tiver muitos arquivos JSX/TSX para formatar em lote, recomenda-se instalar a ferramenta Prettier CLI no projeto e processar em lote via linha de comando (por exemplo, npx prettier --write "src/**/*.jsx"). O mecanismo subjacente desta ferramenta é exatamente o mesmo do Prettier, com resultados de formatação idênticos. Versões futuras podem considerar a adição de função de processamento em lote.

Pode ser usado em conjunto com o ESLint?

Sim. Em projetos reais, recomenda-se usar o Prettier para formato de código (quebras de linha, indentação, espaços, aspas, etc.) e o ESLint para qualidade de código (variáveis não utilizadas, bugs potenciais, melhores práticas, etc.). A prática recomendada para usar ambos juntos é: 1) Instalar eslint-config-prettier para desativar regras de formato no ESLint que entram em conflito com o Prettier; 2) Executar primeiro a formatação Prettier e depois a verificação ESLint. Esta ferramenta foca na formatação (o que o Prettier faz bem) e não inclui a função de verificação de código do ESLint.

Pode ser usado no celular? Como é a experiência móvel?

Pode ser usado no navegador do celular. A ferramenta adota design responsivo, ajustando automaticamente o layout em dispositivos de tela pequena — as colunas esquerda-direita tornam-se colunas cima-baixo, e os botões da barra de ferramentas são otimizados para tamanhos adequados ao toque. No entanto, a edição de código no celular tem experiência inferior à do desktop. Recomenda-se usar principalmente no computador. Se você precisa frequentemente processar código em dispositivos móveis, recomenda-se usar aplicativos de edição de código móvel que suportam Prettier.

Solução de Problemas

O que fazer se a formatação falhar e indicar erro de sintaxe?

Primeiro confira se o código está completo: componentes JSX geralmente precisam de export ou pelo menos conter uma função que retorne JSX. Erros de sintaxe comuns incluem: 1) Tags JSX não fechadas — verifique se cada tag de abertura tem uma tag de fechamento correspondente ou marcação auto-fechável; 2) Chaves não correspondentes — se os parênteses das expressões {} em JSX estão pareados; 3) Aspas de strings não fechadas — verifique todas as aspas simples/aspas duplas/aspas invertidas; 4) Uso de palavras reservadas em JSX — como class deve ser escrito como className, for deve ser escrito como htmlFor; 5) Múltiplos elementos raiz — JSX permite apenas um elemento raiz, múltiplos elementos precisam ser envolvidos por <>...</> ou <div>. As mensagens de erro geralmente indicam o número da linha e o motivo, que podem ser usados para localização.

Nenhuma reação ou formato incorreto após upload do arquivo?

Primeiro confira se a extensão do arquivo está correta — arquivos .jsx/.tsx/.js/.ts/.css/.html/.json podem ser enviados. Se a extensão do arquivo não for padrão, a ferramenta pode não reconhecer corretamente o formato do idioma, resultando em formatação que não atende às expectativas. Soluções: 1) Garanta que a extensão do arquivo esteja em formato padrão; 2) Após o upload, verifique se a seleção de idioma no canto superior esquerdo está correta, podendo ser alternada manualmente se incorreta; 3) Confira se o conteúdo do arquivo é texto puro e não arquivo binário; 4) Arquivos muito grandes (acima de 1MB) podem causar travamento no navegador, recomenda-se usar ferramentas de desktop para processamento.

O código formatado é diferente do resultado do meu Prettier local?

Possíveis causas: 1) Diferença de versão — esta ferramenta usa Prettier v3, se seu projeto usa a versão v2, alguns detalhes podem ser diferentes (como alteração no valor padrão da vírgula final); 2) Configurações diferentes — verifique se parâmetros como largura de impressão, indentação, aspas, vírgula final estão consistentes com a configuração do projeto; 3) Analisadores diferentes — JSX usa analisador Babel, TSX usa analisador TypeScript, confira se selecionou o correto; 4) Diferença de plugins — se o Prettier local tem plugins adicionais instalados (como prettier-plugin-tailwindcss), esta ferramenta não inclui esses plugins. Recomenda-se ajustar a configuração desta ferramenta para ficar consistente com o .prettierrc do projeto.

O código não funciona corretamente após compactar JSX?

A compactação JSX usa o motor Terser, que primeiro compila JSX para JavaScript comum antes de compactar. Se o código compactado não funcionar, verifique: 1) Se a configuração de compactação é muito agressiva — como habilitar toplevel pode alterar o comportamento do módulo; 2) Se o código usa eval ou acesso dinâmico a propriedades — a ofuscação de variáveis pode causar incompatibilidade de nomes; 3) Se depende de nomes de funções ou classes específicos — se sim, precisa habilitar as opções keep_fnames ou keep_classnames. Para compactação em ambiente de produção, recomenda-se usar ferramentas de construção de projeto (Vite/Webpack), que possuem configurações e ecossistema de plugins mais completos.

Glossário

JSX: Sigla para JavaScript XML, extensão de sintaxe JavaScript introduzida pelo React que permite escrever estruturas de tags semelhantes a HTML em JS. Após a compilação, é convertida em chamadas React.createElement().
Prettier: A ferramenta de formatação de código opinativa mais popular atualmente, suporta JS/TS/JSX/TSX/JSON/CSS/HTML/Markdown, etc., tornou-se o padrão de fato para formatação de código front-end.
Babel: Compilador JavaScript que pode converter novas sintaxes como ES6+/JSX/TS para código ES5 compatível com navegadores antigos, servindo também como motor subjacente do Prettier para analisar JSX.
Terser: Um dos compactadores (minifier) JavaScript/JSX mais populares do setor, suporta ofuscação de variáveis, eliminação de código morto, compactação de código, etc. É o compactador padrão de ferramentas de construção como Webpack/Vite.
Print Width: Um dos parâmetros centrais do Prettier, indica o número máximo de caracteres por linha de código, com quebra automática ao exceder essa largura. Padrão de 80 caracteres, configurações comuns de 80/100/120.
Trailing Comma: Adicionar vírgula também após o último item em estruturas multilinha como arrays, objetos e parâmetros de função. Pode deixar o Git diff mais limpo e evitar erros de sintaxe. O Prettier suporta três modos: none/es5/all.
Mangle: Técnica de encurtamento de nomes de variáveis/funções na compactação de código, substituindo nomes longos com significado por nomes curtos como a/b/c, reduzindo o volume do código e também aumentando a dificuldade de leitura.
Dead Code Elimination: Técnica de otimização de compactadores que remove código que nunca será executado (como código sob condição false, variáveis e funções não utilizadas), reduzindo o volume do produto.
CodeMirror: Componente de editor de código para navegador usado por esta ferramenta (versão 6), fornece funções de edição profissional como destaque de sintaxe, números de linha, correspondência de colchetes, amplamente utilizado em vários IDEs online.
LZ-String: Algoritmo de compactação LZ implementado em JavaScript, usado para compactar e armazenar eficientemente conteúdo de código no hash da URL. Alta taxa de compactação e velocidade de decodificação rápida, adequado para cenários de links de compartilhamento.
localStorage: API de armazenamento local de chave-valor fornecida pelo navegador, capacidade de cerca de 5-10MB, dados persistentes (a menos que sejam limpos ativamente). Esta ferramenta o usa para armazenar histórico de formatação.
ESLint: Ferramenta de verificação estática de código JavaScript/TypeScript (Linter), responsável principalmente por qualidade de código e melhores práticas, geralmente usada em conjunto com o Prettier (Prettier cuida do formato, ESLint cuida da qualidade).

Idiomas e formatos de arquivo suportados

A ferramenta suporta 7 linguagens comuns de front-end, que podem ser trocadas livremente pelo menu no canto superior esquerdo:

Idioma	Extensão do arquivo	Motor de formatação	Motor de compactação
JavaScript	`.js, .mjs, .cjs`	Prettier (Babel)	Terser
TypeScript	`.ts, .mts, .cts`	Prettier (TypeScript)	Terser (remove tipos primeiro)
JSX	`.jsx`	Prettier (Babel)	Terser
TSX	`.tsx`	Prettier (TypeScript)	Terser (remove tipos primeiro)
CSS	`.css`	Prettier (PostCSS)	CSSO
HTML	`.html, .htm`	Prettier (HTML)	Implementação personalizada
JSON	`.json`	Prettier (JSON)	JSON.stringify

Visão geral das configurações de formatação

12 parâmetros de formatação configuráveis e suas funções:

Item de configuração	Valores opcionais	Valor padrão	Descrição
tabWidth Tamanho da indentação	`2 / 4 / 8 / Tab`	`2 espaços`	Número de espaços usados por nível de indentação, ou uso de caractere Tab
semi Ponto e vírgula	`true / false`	`true`	Se adiciona ponto e vírgula no final das instruções
singleQuote Aspas simples	`true / false`	`false (aspas duplas)`	Se strings JS usam aspas simples ou duplas
trailingComma Vírgula final	`none / es5 / all`	`es5`	Se adiciona vírgula final após o último item em estruturas multilinha
bracketSpacing Espaço de colchetes	`true / false`	`true`	Se adiciona espaço dentro das chaves de objetos
arrowParens Parênteses de seta	`always / avoid`	`always`	Se adiciona parênteses em parâmetro único de função de seta
printWidth Largura de impressão	`Número (recomendado 80-120)`	`80`	Número máximo de caracteres por linha, com quebra automática ao exceder
jsxSingleQuote Aspas simples JSX	`true / false`	`false`	Valores de atributos JSX usam aspas simples (padrão: aspas duplas)
jsxBracketSameLine Colchete JSX na mesma linha	`true / false`	`false`	Se o colchete direito de JSX multilinha fica na mesma linha que o último atributo
quoteProps Aspas de propriedade	`as-needed / preserve / consistent`	`as-needed`	Quando adicionar aspas aos nomes de propriedades de objetos

Comparação de efeitos antes e depois da compactação JSX

Usando um componente React típico como exemplo, mostramos a variação de volume antes e depois da compactação:

Item de comparação	Formatado (desenvolvimento)	Compactado (produção)	Taxa de compactação
Volume do código	Aprox. 2.5 KB	Aprox. 0.8 KB	`~68%`
Número de linhas	Aprox. 80 linhas	1 linha	`~99%`
Nomes de variáveis	Nomes com significado	Letras únicas a/b/c/d	`—`
Comentários	Todos os comentários preservados	Todos removidos	`—`
Legibilidade	Alta (depuração e leitura)	Muito baixa (apenas legível por máquina)	`—`
Cenários aplicáveis	Desenvolvimento, depuração, revisão	Implantação em produção, distribuição CDN	`—`

Privacy & Security

Todas as operações desta ferramenta de formatação JSX são executadas completamente localmente no navegador: o código que você insere ou envia é formatado e compactado apenas em JavaScript no navegador, não sendo enviado pela rede a nenhum servidor externo. Prettier e Terser são bibliotecas puramente em JavaScript, que podem ser executadas diretamente no lado do navegador. O histórico é salvo no localStorage (armazenamento local) do navegador, visível apenas no dispositivo e navegador atuais. A função de compartilhamento por URL compacta o código via LZ-String e o codifica na parte hash da URL (conteúdo após # não é enviado ao servidor). A página não usa rastreamento de Cookie, não coleta o conteúdo do código inserido pelo usuário. Você pode usar esta ferramenta offline, com as funções centrais funcionando normalmente.

Authoritative References

prettier.ioDocumentação oficial do Prettier
terser.orgTerser - Compactador JavaScript
react.devDocumentação oficial do React - Introdução ao JSX