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 analisador JSON integrado ao navegador e depois impresso novamente com indentação de dois espaços. Se o JSON for inválido, a ferramenta informa um erro e não exibe 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ê a indentação existente de cada linha e a reconstrói usando quatro espaços por nível, seguindo as mesmas regras de aninhamento usadas pela própria linguagem Python. Ele não divide linhas longas, adiciona linhas em branco nem insere espaços ao redor de operadores; apenas normaliza o nível de indentação 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 autoc fechamento, 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 indentação. O formatador reconstruiu a indentação de cada linha usando quatro espaços por nível, de acordo com o estilo descrito na PEP 8, o guia oficial de estilo do Python. Ele manteve todas as linhas na mesma ordem e não alterou o espaçamento dentro delas.

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 se há erros de sintaxe no meu código? Somente no JSON. A entrada JSON é analisada, portanto um JSON inválido produz uma mensagem de erro. O código nas outras linguagens compatíveis é reformatado sem verificar se a sintaxe é válida.

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

Qual é a quantidade máxima de código que ela consegue formatar? 50.000 caracteres. Colar uma quantidade maior produz um erro antes do início da formatação.

Ela adicionará espaços ausentes ao redor dos meus operadores ou depois das vírgulas? Não, no caso de JavaScript, TypeScript, Java, C, C++ e C#. Esses formatadores apenas reconstroem a indentação e as quebras de linha ao redor de chaves e pontos e vírgulas; o restante de cada linha é copiado como foi escrito.

Que indentação 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 parece quase igual depois da formatação? Se a entrada já usava espaçamento consistente e um único estilo de chaves, o formatador principalmente reconstrói a indentação, portanto a mudança pode ser pequena. Ele é mais útil em código com indentação mista ou que foi minimizado em pouquíssimas linhas.

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