Limites de uso justos se aplicam a esta ferramenta.

Esta ferramenta ajudou você?

4/5 a partir de 40 classificações

Formate código JavaScript instantaneamente para melhorar a leitura, a depuração e o fluxo de desenvolvimento.

Introdução

Um código JavaScript que foi minificado para produção, ou que foi simplesmente digitado às pressas sem nenhum cuidado com a formatação, pode ser bem difícil de ler: sem recuo consistente, com várias instruções espremidas na mesma linha e blocos que não se distinguem visualmente uns dos outros. Embelezar esse código o reformata — acrescentando recuo, quebras de linha entre as instruções e espaçamento uniforme — sem mudar o que ele faz. A lógica, os nomes das variáveis e o comportamento continuam exatamente os mesmos; muda só a aparência dele na tela. Para quem está aprendendo a ler JavaScript, e não apenas a escrevê-lo, essa diferença conta muito: o mesmo script parece intimidante como uma única linha densa e fica completamente acessível assim que se abre em instruções e blocos bem recuados.

Como esta ferramenta formata o seu código

A ferramenta percorre o código colado pedaço por pedaço e reconhece cadeias de texto, comentários, colchetes e operadores como coisas distintas, em vez de apenas inserir quebras de linha por semelhança de padrões no texto. É isso que permite a ela diferenciar corretamente uma / que abre um comentário, outra que faz parte de uma expressão regular e outra que representa uma divisão — algo que um formatador puramente textual erraria. Ela reconstrói o recuo de forma consistente (três espaços por nível de aninhamento) e insere as próprias quebras de linha conforme a estrutura do código, de modo que cada instrução e cada bloco ficam em uma linha só sua. Os comentários não são removidos: eles são mantidos e reformatados junto com o código, então a explicação de uma função ou um cabeçalho de licença continuam aparecendo no resultado.

Os ponto e vírgula são apenas reposicionados; nada é acrescentado nem retirado. O JavaScript permite que uma instrução termine sem ponto e vírgula em muitos casos — a especificação oficial da linguagem preenche essa lacuna automaticamente por uma regra chamada inserção automática de ponto e vírgula — e há programadores que escrevem assim de propósito. Esta ferramenta não toma partido nessa escolha de estilo: se o seu código original não tem ponto e vírgula, a saída formatada também não vai ter; se tem, eles ficam exatamente onde estavam, apenas reacomodados em torno das novas quebras de linha e do novo recuo. Vale saber disso se você usa a ferramenta para ensinar ou entender como as instruções do JavaScript terminam, já que ela nunca vai "corrigir" um estilo transformando-o no outro.

O que saber antes de usar

Duas coisas que vale conhecer antes de colar código de verdade aqui:

Linhas em branco não são preservadas. O formatador decide onde ficam as quebras de linha pela estrutura do próprio código, e não por onde você tinha deixado linhas em branco ao colar. Se você usava essas linhas para separar visualmente as partes de um script, essa separação não necessariamente sobrevive à formatação — a lógica e todas as instruções continuam lá, só que sem o agrupamento original.
Templates de string (texto entre crases) não são reconhecidos como string. O JavaScript moderno permite montar strings com crases e expressões embutidas, como `Hello, ${name}`. O formatador desta ferramenta não trata o texto delimitado por crases do mesmo jeito que trata o texto entre aspas comuns, então um código que depende de templates de string pode sair mal formatado nesses trechos. Se um script usa esse recurso, confira com atenção essa parte do resultado depois de embelezar, ou formate o restante do script e deixe essas linhas como estavam.

Nenhum dos dois casos muda o que o seu código original faz — você trabalha sempre a partir do que colou, e nada é alterado a menos que você copie o resultado formatado de volta para o seu projeto.

Quando esta é a ferramenta certa

Ler o script minificado de outra pessoa. Abrir o JavaScript de um site público pelas ferramentas de desenvolvedor do navegador quase sempre mostra um arquivo denso e sem formatação; colar esse conteúdo aqui e embelezá-lo torna possível estudar de fato como ele funciona — um uso legítimo de letramento digital, não uma simples faxina de código.
Revisar o código entregue por um aluno. Um script que chega sem formatação consistente é mais lento de ler e de corrigir; embelezá-lo antes deixa o retorno para o aluno bem mais rápido e mais fácil de escrever.
Organizar o próprio código antes de entregar um trabalho. Uma formatação consistente facilita a vida do professor — ou a sua, alguns meses depois — na hora de acompanhar a lógica.
Preparar um exemplo de código para uma aula. Uma função escrita rapidamente durante o planejamento costuma ficar densa e difícil de acompanhar no projetor; embelezada antes, vira um código limpo e uniformemente recuado, que a turma consegue ler até do fundo da sala.

Para um código que depende muito de templates de string, ou para uma base de código moderna e grande em que você precisa de uma saída comprovadamente correta, o formatador embutido de um editor de código é a escolha mais confiável — veja a limitação acima. Esta ferramenta se dá melhor com scripts do tamanho típico de sala de aula.

Exemplo

Um aluno encontra em um site de tutoriais um script interativo curto, minificado em uma única linha densa, e quer entender como ele funciona antes de adaptá-lo ao próprio projeto. Colado nesta ferramenta, o script se abre em instruções e blocos bem recuados, e aí sim dá para ler a lógica — qual função roda em qual evento, onde um laço começa e onde termina — em vez de varrer com os olhos uma linha de código sem nenhuma interrupção.

Perguntas frequentes

Embelezar muda como o meu código é executado?

Não. Muda apenas a formatação — recuo, quebras de linha e espaçamento; a lógica e o comportamento continuam os mesmos.

Meus comentários são mantidos?

Sim. Os comentários, inclusive cabeçalhos de licença, são preservados e reformatados junto com o resto do código.

Ela lida bem com templates de string (texto entre crases)?

Não de forma confiável. Um código que usa `like this ${example}` pode sair mal formatado nesses trechos — confira essa parte do resultado ou deixe essas linhas sem formatar.

Meu código fica salvo em algum lugar?

Não. O código colado é processado para gerar o resultado formatado e não é guardado depois; registra-se apenas que a ferramenta foi usada, nunca o código em si.

Ela acrescenta ou remove ponto e vírgula?

Não. Os ponto e vírgula ficam exatamente como aparecem no seu código original, apenas reacomodados em torno das novas quebras de linha e do novo recuo — se o seu código não tem nenhum, a saída também não vai ter.