Formatador JavaScript
Indente um script para poder lê-lo, inteiramente no seu navegador. Nenhuma quebra de linha que você escreveu é removida.
Roda inteiramente no seu navegador. Nada é enviado, registrado ou armazenado.
Cole um script minificado ou mal indentado e leia-o direito. A formatação acontece no seu navegador, e nada no código muda além do espaçamento.
Como funciona
O script é dividido em pedaços — comentários, strings, template literals, expressões regulares, números, nomes, operadores, chaves — e depois reescrito. Um bloco ganha linhas próprias e um nível de indentação, uma instrução ganha uma linha, e um literal de objeto espalhado por várias linhas ganha uma entrada por linha.
Nenhuma quebra de linha que você escreveu é removida, e é dessa regra que decorre o resto. Em JavaScript o fim de uma linha pode terminar uma instrução — a inserção automática de ponto e vírgula — então duas linhas juntadas em uma podem mudar o que um programa faz, ou impedir que ele seja analisado. Só se acrescentam quebras: em volta das chaves de um bloco, depois do ponto e vírgula de uma instrução, entre as entradas de um objeto, e entre uma chave de fechamento e a palavra que começa a instrução seguinte. Nenhuma dessas pode mudar um sentido.
Uma linha que o código-fonte quebrou no meio de uma instrução — uma cadeia de chamadas, uma condição longa, os ramos de um condicional — é indentada um nível para dentro em relação à linha de cima, para que continue se lendo como parte dela.
Exemplos
| Caso | Entrada | Resultado |
|---|---|---|
| Uma função escrita em uma linha | function add(a,b){const total=a+b;return total} | function add(a, b) { const total = a + b; return total } |
Perguntas frequentes
O meu código é enviado para algum lugar?
Não. O formatador é JavaScript rodando nesta página. Nada é enviado, nada é registrado e nada é armazenado — você pode desligar a sua conexão de rede e a ferramenta continua funcionando.
Ele acrescenta os pontos e vírgulas que eu deixei de fora?
Não. Um ponto e vírgula que não foi escrito é, às vezes, um ponto e vírgula que não deve ser escrito, e distinguir os casos exige um analisador sintático, e não uma passagem de layout. O formatador deixa a questão de lado: ele nunca acrescenta um ponto e vírgula e nunca remove uma quebra de linha, então um código escrito sem eles continua funcionando exatamente como antes.
Ele também minifica?
Não, e isso é uma decisão, não uma omissão. Minificar significa renomear, reescrever e decidir quais quebras de linha carregam significado — três julgamentos que esta ferramenta existe para não fazer. Errar qualquer um deles quebra um programa de um jeito que você descobre em produção.
Ele entende TypeScript ou JSX?
Em parte, e com honestidade. Os dois são lidos como os tokens que são, então nada se perde e as chaves continuam aninhando, mas uma anotação de tipo e uma tag não são coisas cuja forma o layout conheça. Espere um resultado sensato, não um idiomático.
Ele me diz se o meu script é válido?
Não. Ele não tem gramática, então não pode: ele sabe onde um pedaço de código termina e o próximo começa, o que basta para diagramar um arquivo e não basta para julgá-lo. Um arquivo que ele não consiga ler de jeito nenhum — uma string, um comentário ou um template literal não fechados — é recusado em vez de reformatado em algo plausível.
Bom saber
- A saída contém exatamente os pedaços que a entrada continha. Nada é acrescentado, nada é descartado e nada é reordenado — só o espaço em branco entre eles se move.
- Uma barra é ou uma divisão ou o começo de uma expressão regular, e nenhum tokenizador pode ter certeza de qual sem uma gramática. Este decide pelo token anterior, e lê como divisão um literal que teria de atravessar uma quebra de linha, já que uma expressão regular não pode conter uma. Um palpite errado custa arrumação e nada mais, porque cada pedaço é copiado exatamente como foi escrito.
- Um template literal volta caractere por caractere, de crase a crase. O espaço em branco dele é o texto que a sua página vai mostrar, então não é espaço em branco no qual o formatador possa mexer.
- O layout é determinístico: o mesmo script com a mesma opção sempre produz a mesma saída, e formatar um script já formatado não muda nada.
Fontes
Todas as ferramentas de Código