01
Selecionar a sintaxe
Use TS para anotações de tipo e TSX quando também houver JSX. Os sinais angulares podem ser interpretados de outro jeito no modo errado.
- O exemplo carregado corresponde ao modo atual.
HTML / CSS Dev Tools
Formatador de JavaScript
Escolha a sintaxe e o estilo antes de comparar original e resultado.
Formatador de JavaScript
Código-fonte
Seu código permanece nesta aba; não é enviado.
Resultado formatado
Cole código ou carregue um exemplo.
Um trecho copiado de uma issue pode chegar com recuo irregular e dificultar a revisão. O Formatador de JavaScript mantém a entrada à esquerda e mostra a versão organizada de JS, JSX, TS ou TSX à direita.
O Formatador de JavaScript analisa a sintaxe antes de imprimir o código. Templates, JSX e anotações de tipo não são tratados como simples espaços para substituir. Você pode formatar JavaScript sem apagar a fonte.
Por que usar este Formatador de JavaScript?
Modos explícitos e o original intacto facilitam a revisão do resultado.
Quatro linguagens de entrada
Escolha JS, JSX, TS ou TSX. Um componente TSX conserva tipos e marcação e não é confundido com JS pronto para minificação.
Estilo sem apagar a fonte
Altere recuo, aspas, ponto e vírgula, largura ou vírgulas finais sem sobrescrever a entrada. O Formatador de JavaScript bloqueia a cópia de resultados antigos até recalcular.
Três cuidados antes de copiar
02
Definir o estilo
A formatação automática espera 350 ms depois da última edição e roda novamente ao mudar opções. Ao desligá-la, o botão manual aparece.
- No modo manual, Ctrl/Cmd+Enter também executa.
03
Conferir o estado
Uma mudança na entrada ou nas opções desativa copiar e baixar até surgir um resultado atualizado. Erros indicam linha e coluna.
- Checar sintaxe não é verificar os tipos do TypeScript.
Análise e opções de saída
JS até TSX
Os analisadores do Prettier entendem JavaScript, JSX, tipos TypeScript e componentes TSX. Como embelezador de JavaScript, a saída permanece separada da entrada.
Estilo configurável
Escolha dois ou quatro espaços, Tab, aspas, ponto e vírgula, largura de linha e vírgulas finais.
Checagem e minificação
Confira a sintaxe separadamente; somente JS comum pode ser minificado pelo Terser e salvo como .min.js.
Limites reais da ferramenta
- Não valida tipos
- Sintaxe aceita não significa tipos corretos. Dependências do projeto e tsconfig.json não são carregados.
- Minificação só para JS
- JSX, TS e TSX precisam ser transpilados no seu projeto antes. O botão de minificar fica desativado nesses modos.
- Não conserta código incompleto
- Aspas ou chaves abertas geram erro com linha e coluna. O Formatador de JavaScript não inventa partes ausentes nem executa o trecho.
- Não importa a configuração do repositório
- Apenas as opções visíveis valem aqui; .prettierrc, plugins e regras ESLint não são lidos automaticamente.
Dúvidas sobre o Formatador de JavaScript
Como formato TypeScript ou JSX com o formatador de JS?
Escolha TS ou TSX para código com tipos e JSX para marcação sem tipos. A ferramenta formata, mas não transforma esses modos em JS.
Quais opções de estilo posso controlar no formatador de JS?
É possível escolher recuo, aspas, ponto e vírgula, largura de linha e vírgulas finais. A minificação JS é uma ação separada.
O formatador de JS envia meu código para algum lugar?
Não. A entrada é processada nesta aba do navegador e não é enviada por esta ferramenta.
Mantém os comentários?
A formatação procura manter comentários, mas a posição pode mudar com o código impresso. A minificação pode removê-los.
Por que a formatação falhou?
O analisador encontrou sintaxe inválida ou incompleta. Confira linha, coluna e modo antes de tentar novamente.
Não encontrou a resposta?
Experimente o Formatador de JavaScript
Volte ao editor, selecione a sintaxe e compare o resultado atual com a entrada antes de copiar.
Processado localmente no navegador.