Formatador de codigo passo a passo: JavaScript, CSS, HTML e JSON
O formatador de codigo gratuito neste site reindenta JavaScript, CSS e HTML, e formata JSON de forma legivel, tudo no navegador. Este guia mostra o que esperar de cada tipo de input, o que fazer quando o resultado parece errado, e quando usar outra ferramenta.
Last reviewed: 2026-07-02
freetoolonline.com Editorial TeamFormatar JavaScript
Cole um trecho de JavaScript - uma linha minificada, uma funcao copiada, ou um ficheiro completo - e clique em Format. A ferramenta carrega uma copia auto-hospedada da biblioteca de codigo aberto js-beautify e chama o seu formatador de JavaScript, que reindenta chavetas e parenteses aninhados e coloca cada instrucao na sua propria linha. Colar function add(a,b){return a+b;} devolve a mesma funcao dividida em varias linhas com o corpo indentado dentro das chavetas. O formatador altera apenas o espaco em branco - nao renomeia variaveis, nao reordena instrucoes, e nao altera o comportamento do codigo.
Formatar CSS
Formatar CSS no Code Formatter Beautifier: cole a folha de estilo para detectar blocos selector { property: value; }, depois Format para indentar regras aninhadas sem tratar o texto como JavaScript.
Formatar HTML
Input que comeca com < e tratado como HTML. Um trecho numa linha como <div><p>hi</p></div> volta com cada tag na sua propria linha e os filhos indentados um nivel mais profundo que o pai. Isto e util para HTML copiado do comando "Copy outerHTML" do navegador, que normalmente chega numa unica linha ilegivel. O formatador de HTML depende dos formatadores de JavaScript e CSS do mesmo motor carregarem primeiro (para qualquer bloco <script> ou <style> dentro do markup), que a ferramenta carrega automaticamente antes de correr.
Formatar JSON
JSON e verificado antes de qualquer um dos anteriores: se o input comeca com {, [, uma aspa, um digito, ou um de true, false, null, a ferramenta analisa-o e imprime-o de volta com JSON.stringify(value, null, 2) - dois espacos de indentacao, uma propriedade por linha. Isto e uma analise real, nao uma deteccao baseada em texto, por isso um payload invalido e detetado: colar {"a":1, (uma virgula final sem nada depois) devolve uma mensagem que comeca com Invalid JSON: em vez de um resultado formatado. Corrija o erro reportado e cole novamente.
Quando o resultado parece errado
Duas coisas podem correr mal. Primeiro, a deteccao de linguagem pode errar - e uma heuristica baseada na forma do texto, nao um analisador completo para cada linguagem, por isso uma linguagem para a qual a ferramenta nao foi construida (Python, Java, Go, e assim por diante) ainda passa pelo formatador de JavaScript, e o resultado pode nao parecer correto. Segundo, para JSON especificamente, um erro de analise significa que a ferramenta nao consegue formatar nada ate o JSON ser valido - cole novamente depois de corrigir o erro que a mensagem reporta. Nenhum dos casos danifica o seu input: o painel esquerdo mantem exatamente o que colou, por isso pode sempre tentar de novo.
Formatador de codigo vs JSON Parser
Ambas as ferramentas conseguem formatar JSON de forma legivel, por isso ajuda saber quando usar cada uma. O formatador de codigo e a escolha certa para JavaScript, CSS ou HTML, e formata JSON tambem como efeito secundario. O JSON Parser e a escolha certa quando precisa especificamente de validar um payload com deteccao de erros, explorar o resultado como uma arvore expansivel, ou verificar o tipo e o indice de array de um campo especifico - e construido apenas para JSON e mostra mais sobre a estrutura do que uma impressao indentada simples.
Referencia rapida
Referencia rapida do Code Formatter Beautifier: escolha ou auto-detecte JavaScript, CSS, HTML ou JSON, cole, rode Format e copie a saida indentada - toda formatacao fica na aba do navegador.
| Input comeca com | Detetado como | Motor usado |
|---|---|---|
{, [, uma aspa, um digito, ou true/false/null | JSON | JSON.stringify(value, null, 2) |
< | HTML | html_beautify (js-beautify) |
Blocos de regras, ex. seletor { prop: valor; } | CSS | css_beautify (js-beautify) |
| Todo o resto | JavaScript | js_beautify (js-beautify) |
Privacidade
Privacidade no Code Formatter Beautifier significa que a formatacao roda so na sua aba: o codigo colado nao e enviado, nao vai para analytics nem e gravado em servidor.
Guias relacionados
Guias relacionados do Code Formatter Beautifier apontam ao tool ao vivo, ao JSON Parser quando voce so precisa de arvores JSON, e ao Word Counter quando quer estatisticas de texto puro em vez de indentacao.
- JSON parser: validar vs formatar vs vista em arvore - o guia de decisao equivalente para a ferramenta apenas de JSON.
- Minificador CSS vs compressor - o trabalho inverso: reduzir uma folha de estilo em vez de a formatar.
- Ferramenta de formatacao de codigo - a ferramenta em si.
- Hub de ferramentas para desenvolvedores - o conjunto completo, todas a correr no navegador sem upload.
Perguntas frequentes
O formatador altera o que o meu codigo faz?
Nao. Altera apenas o espaco em branco e a indentacao. A logica, os valores e a estrutura do JavaScript, CSS ou HTML que colou permanecem os mesmos.
Porque e que o meu CSS foi formatado como JavaScript?
A deteccao de linguagem e uma heuristica sobre a forma do texto, nao um analisador completo. Se o seu trecho de CSS incluir um token que o detetor associa a JavaScript, pode ser classificado como JavaScript. Cole a regra CSS sozinha para manter a deteccao fiavel.
Posso formatar Python, Java, ou outra linguagem?
Nao de forma fiavel. A ferramenta reconhece JavaScript, CSS, HTML e JSON. Qualquer outra linguagem ainda passa pelo formatador de JavaScript e o resultado pode nao parecer correto - verifique o resultado antes de confiar nele.
O meu codigo e enviado para algum lugar?
Nao. A formatacao corre inteiramente neste separador do navegador; nada do que cola e enviado para um servidor ou servico de analitica.