Formatador de Código Gratuito: Embelezar JavaScript, Python, HTML e Mais

O que é um formatador de código?

Um formatador de código é uma ferramenta que reescreve o código-fonte com indentação, quebras de linha e espaçamento consistentes, sem alterar o que o código faz. Este formatador de código é executado em um navegador da web. Ele oferece suporte a 12 linguagens de programação, incluindo JavaScript, Python, HTML e CSS.

Como este formatador de código funciona

A ferramenta usa um conjunto diferente de regras para cada linguagem. Nenhuma delas cria uma árvore sintática completa do código, exceto o JSON.

JSON é analisado com o parser de JSON nativo do navegador e depois impresso de volta com recuo de dois espaços. Se o JSON for inválido, a ferramenta informa um erro e não mostra nenhuma saída.
JavaScript, TypeScript, Java, C, C++ e C# compartilham um único formatador. Ele examina o código caractere por caractere, acompanhando chaves, parênteses e ponto e vírgula. Cada { inicia um novo bloco indentado, e cada } ou ; encerra uma linha. Comentários e strings entre aspas são copiados sem alterações. Este formatador não adiciona espaços ao redor de operadores nem depois de vírgulas que não existiam no código original; ele apenas reconstrói as quebras de linha e a indentação.
Python lê o recuo existente de cada linha e o reconstrói usando quatro espaços por nível, seguindo as mesmas regras de aninhamento que a própria linguagem Python usa. Ela não divide linhas longas, não adiciona linhas em branco nem espaços ao redor de operadores; apenas normaliza a profundidade do recuo de cada linha.
CSS remove quebras de linha e espaços em branco extras e depois adiciona uma quebra de linha após cada { e ;, e antes de cada }.
HTML e XML adicionam uma quebra de linha e dois espaços de indentação para cada nível de tags aninhadas, reconhecendo tags padrão de autofechamento, como <br>, <img> e <input>.
SQL converte um conjunto fixo de palavras-chave, como SELECT, FROM, WHERE, JOIN e ORDER BY, para letras maiúsculas e inicia uma nova linha antes de cada cláusula principal.

Como somente o fluxo do JSON realmente analisa a entrada, os demais formatadores não detectam erros de sintaxe, como a ausência de um colchete ou uma string não fechada. Eles reformatam qualquer texto fornecido, mesmo que ele não pudesse ser executado.

Linguagens compatíveis

Linguagem	Extensão de arquivo típica	Largura da indentação
JavaScript	.js	2 espaços
TypeScript	.ts	2 espaços
HTML	.html	2 espaços
CSS	.css	2 espaços
Python	.py	4 espaços
Java	.java	4 espaços
C	.c	4 espaços
C++	.cpp	4 espaços
C#	.cs	4 espaços
SQL	.sql	quebras de linha por cláusula
JSON	.json	2 espaços
XML	.xml	2 espaços

Como formatar código

Selecione uma linguagem de programação no menu suspenso.
Cole o código não formatado na caixa de entrada.
Selecione "Formatar código".
Copie o resultado formatado da caixa de saída.

A formatação acontece inteiramente dentro do navegador. O código nunca é enviado a um servidor.

Exemplo de formatação de JavaScript

Antes da formatação:

1function add(a, b) {
2    if (a > 0) { return a + b; }
3    return 0;
4}
5

Depois da formatação:

1function add(a, b) {
2  if (a > 0) {
3    return a + b;
4  }
5  return 0;
6}
7

O formatador colocou o código dentro de { } em uma linha indentada própria e normalizou a indentação para dois espaços por nível. Ele manteve exatamente como encontrou o espaçamento ao redor de a > 0 e a + b, pois esse espaçamento já existia.

Exemplo de formatação de Python

Antes da formatação:

1def calculate_average(numbers):
2  if len(numbers) == 0:
3    return 0
4  total = sum(numbers)
5  return total / len(numbers)
6

Depois da formatação:

1def calculate_average(numbers):
2    if len(numbers) == 0:
3        return 0
4    total = sum(numbers)
5    return total / len(numbers)
6

O código original usava dois espaços por nível de recuo. O formatador reconstruiu o recuo de cada linha usando quatro espaços por nível, de acordo com os quatro espaços por nível de recuo da PEP 8, o guia de estilo oficial do Python. Ele manteve todas as linhas na mesma ordem e não mexeu no espaçamento dentro das linhas.

Por que a formatação do código é importante

A indentação inconsistente dificulta visualizar onde termina uma função, um laço ou uma condição. O código editado por várias pessoas geralmente acaba com uma mistura de indentação por tabulações e espaços, ou com linhas que não se alinham ao bloco ao qual pertencem. Executá-lo em um formatador dá a cada arquivo a mesma estrutura visual, o que torna mais rápida a leitura e facilita identificar um colchete fora do lugar.

Limitações

Tamanho da entrada: A ferramenta aceita até 50.000 caracteres de código. Entradas maiores são rejeitadas com uma mensagem de erro antes do início da formatação.
Sem verificação de sintaxe para a maioria das linguagens: somente a entrada JSON é analisada e validada. O código nas outras 11 linguagens é reformatado como está, mesmo que tenha um colchete ausente ou uma string não fechada. Nesse caso, a saída pode ficar com a indentação incorreta em vez de ser sinalizada como erro.
Sem alterações no espaçamento dos operadores: os formatadores de JavaScript, TypeScript e das linguagens da família C apenas reorganizam as quebras de linha e a indentação. Eles não inserem um espaço ao redor de +, =, !== nem depois de uma vírgula se ele já não existia.
PHP não é compatível: selecionar uma linguagem incompatível retorna o código sem alterações.

Perguntas frequentes

Esta ferramenta verifica erros de sintaxe no meu código? Somente para JSON. A entrada JSON é analisada, então um JSON inválido gera uma mensagem de erro. O código nas outras linguagens compatíveis é reformatado sem que a validade da sintaxe seja verificada.

Ela envia meu código para um servidor? Não. A formatação roda inteiramente no navegador, usando JavaScript. O código não é enviado nem armazenado em lugar nenhum.

Qual é a quantidade máxima de código que ela consegue formatar? 50.000 caracteres. Colar mais do que isso gera um erro antes de a formatação começar.

Ela adiciona os espaços que faltam ao redor dos operadores ou depois das vírgulas? Não, para JavaScript, TypeScript, Java, C, C++ e C#. Esses formatadores apenas reconstroem o recuo e as quebras de linha ao redor de chaves e pontos e vírgulas; o restante de cada linha é copiado como foi escrito.

Que recuo ela usa? Dois espaços para JavaScript, TypeScript, HTML, CSS, JSON e XML. Quatro espaços para Python, Java, C, C++ e C#.

Por que meu código fica quase igual depois da formatação? Se a entrada já usava um espaçamento consistente e um único estilo de chaves, o formatador reconstrói principalmente o recuo, então a mudança pode ser pequena. Ele é mais útil em códigos com recuo misto ou minificados em pouquíssimas linhas.

Referências

MDN Web Docs (Mozilla). JSON.stringify(). Referência de JSON.stringify() — um argumento numérico space define o número de espaços usados em cada nível de recuo.
Python Software Foundation. The Python Language Reference: Lexical analysis. Análise léxica do Python: recuo — o espaço em branco inicial define o nível de recuo de cada linha, que agrupa as instruções.
Python Software Foundation. PEP 8: Style Guide for Python Code. PEP 8 — "Use 4 spaces per indentation level."

Formatador de Código Gratuito: Embelezar JavaScript, Python, HTML e Mais