Formatador e embelezador de código
Cole o código ou abra um arquivo, clique em Formatar e pronto. A linguagem é detectada automaticamente — JavaScript, TypeScript, CSS, HTML, JSON, XML, SQL, YAML, Markdown e GraphQL, tudo no navegador.
Tudo roda no seu navegador — seu código nunca é enviado a nenhum servidor.
A largura da linha vale para JavaScript, TypeScript, CSS, SCSS, LESS, HTML, YAML, Markdown e GraphQL. A formatação nunca verifica lógica, tipos nem regras de estilo.
A linguagem é detectada assim que você adiciona código.
Solte aqui um arquivo de código (até 5 MB), cole o código ou carregue um exemplo. Pressione Ctrl+Enter para formatar.
Formate e organize código no navegador
Código copiado de um bundle minificado, de um log, de uma mensagem de chat ou de um projeto antigo é difícil de ler e mais ainda de revisar. Este formatador de código devolve a ele um texto limpo e com indentação consistente em um clique. Cole o código, clique em Formatar (ou pressione Ctrl+Enter) e o resultado aparece ao lado do original, com números de linha nos dois lados para você comparar num relance.
A ferramenta cobre os formatos que os desenvolvedores mais encontram: JavaScript com JSX, TypeScript com TSX, CSS, SCSS e LESS, HTML com scripts e estilos embutidos, JSON, XML, SQL em treze dialetos, YAML, Markdown e GraphQL. Por padrão a linguagem é detectada para você, pelo nome do arquivo quando você o abre e pelo próprio texto quando você cola. Se o texto puder ser de mais de uma linguagem, a ferramenta avisa e mostra os candidatos prováveis, em vez de escolher em silêncio o parser errado.
O estilo fica sob seu controle. Escolha dois espaços, quatro espaços ou tabs e uma largura de linha de 80, 100 ou 120 caracteres para as linguagens formatadas com o Prettier. Para SQL, você escolhe o dialeto, como PostgreSQL, MySQL, SQL Server ou BigQuery. Para JSON há também um botão Minificar, que remove todo o espaço em branco sem mexer em números, strings nem na ordem das chaves. As configurações ficam salvas no navegador, e você pode ativar a formatação automática se preferir ver o resultado enquanto digita.
Quando algo está errado, a mensagem é curta e exata: a linguagem, o que o parser esperava, a linha e a coluna. Sua entrada nunca é sobrescrita, e um botão leva o cursor até o problema. O botão Desfazer traz de volta o que você limpou ou substituiu sem querer. Você pode baixar o resultado com a extensão certa para a linguagem ou abrir as duas versões lado a lado no Comparador de Texto para ver exatamente o que mudou.
Tudo acontece no seu dispositivo. Os mecanismos pesados de formatação só são baixados para a linguagem que você realmente formata e rodam em um worker em segundo plano, então um arquivo grande não trava a página. Fique atento aos limites: arquivos de até 5 MB podem ser abertos, entradas acima de 300.000 caracteres podem levar alguns segundos e entradas acima de dois milhões de caracteres são recusadas. Formatar não é lint nem compilação, então erros de lógica não serão encontrados, e algumas sintaxes exóticas podem ser rejeitadas.
Perguntas frequentes
Meu código é enviado para algum lugar?
Não. O código é formatado por bibliotecas que rodam dentro do seu navegador, em uma thread em segundo plano. Nada é enviado a um servidor. Apenas suas configurações e um rascunho opcional ficam guardados no armazenamento local deste navegador, e você pode limpar a caixa quando quiser.
A formatação muda o que meu código faz?
O formatador altera só o layout: indentação, quebras de linha e espaçamento. Ele também pode padronizar aspas, adicionar ou remover parênteses opcionais e uniformizar o uso de ponto e vírgula, mas o significado continua o mesmo. Ele não verifica lógica, tipos nem regras de lint: código correto continua correto e código errado continua errado.
Como a linguagem é detectada?
Se você abre um arquivo, a extensão decide. Caso contrário, a ferramenta analisa o próprio texto: tags, chaves, palavras-chave e pontuação típica. Quando duas linguagens se parecem, como CSS e SCSS ou JavaScript e TypeScript, ela pergunta em vez de adivinhar. Você sempre pode escolher a linguagem manualmente na lista Linguagem.
O que acontece se meu código tiver um erro de sintaxe?
A saída fica vazia, sua entrada permanece exatamente como estava e você recebe uma mensagem curta com a linha e a coluna. Use o botão Mostrar na entrada para ir até o ponto, corrija e clique em Formatar de novo.
Posso minificar código aqui?
Somente JSON, em que remover espaços em branco é sempre seguro. Minificar JavaScript ou CSS direito exige um minificador próprio, porque renomear variáveis ou juntar regras pode mudar o comportamento; por isso esta ferramenta não tenta. Para uma verificação mais profunda da sintaxe SQL, use o Formatador e validador de SQL.