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 Team

Formatar 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

CSS e detetado quando o input parece um ou mais blocos seletor { propriedade: valor; } sem nenhum dos tokens exclusivos de JavaScript (sem function, sem =>, sem var, let ou const, sem parenteses). Colar uma regra minificada como .card{margin:0;padding:8px;border-radius:4px} devolve a regra com cada propriedade na sua propria linha indentada dentro das chavetas. Se um trecho de CSS misturar um token semelhante a JavaScript, o detetor pode classifica-lo como JavaScript - cole o CSS sozinho, sem tags de script a volta, para manter a deteccao fiavel.

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

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

A formatacao corre inteiramente neste separador do navegador. O codigo colado nunca e enviado para upload, para um servico de analitica, ou escrito em qualquer servidor - existe apenas na memoria da pagina ate fechar o separador ou colar outra coisa.

Guias relacionados

• 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.