Formate um script para ler ou minifique para publicar. Os motores — Prettier 3.9.6 para formatar e Terser 5.44.0 para minificar — são servidos por este site e rodam no navegador: o trecho não sai da página.
Funciona localmente no seu navegadorFormat reescreve o trecho para uma pessoa ler; Minify reescreve para o servidor enviar menos bytes. A formatação roda o Prettier 3.9.6 e a minificação roda o Terser 5.44.0, os dois servidos pelo diretório /static/vendor deste site e trabalhando apenas com o texto dentro da aba.
O seletor de indentação pertence só ao Format: tabulação, 2, 4 ou 8 espaços, com 4 como padrão. Formatar deixa o programa igual — muda aspas, espaçamento e quebras de linha. Minificar ainda comprime expressões e encurta nomes locais, então o resultado precisa ser testado como qualquer código reescrito.
O Prettier analisa o script e o imprime de novo em um estilo fixo: as strings voltam com aspas duplas, os pontos e vírgulas que faltavam são acrescentados, a indentação escolhida é aplicada e as linhas com mais de 80 colunas são quebradas. Uma função com 300 comandos voltou comando por comando, comentários incluídos: só o layout mudou.
Como a impressão passa por um analisador, o resultado é previsível fora da página também: o que é formatado aqui é analisado no Node.js ou em um empacotador, e o que falha aqui falha lá pelo mesmo motivo. Os erros são os do analisador, como “Unexpected token (1:8)” com a linha apontada — é o que const x: number = 1 devolve, porque falta o plugin de TypeScript ao analisador babel.
O Terser faz uma passada de compressão e encurta nomes dentro das funções; nomes de nível superior são mantidos, então uma função exportada conserva o nome que outros módulos importam. Comentários são removidos, exceto faixas que começam com /*! ou contêm @license. A dobra de constantes vai mais longe: uma função de 300 linhas que somava 299 constantes voltou como “function longName(n,e){return n+e+299}”, de 11.534 caracteres para 38.
Por isso o código minificado não é mais o que você escreveu. O conteúdo de strings e templates é preservado, campos privados de classe, encadeamento opcional e literais BigInt atravessam a passada, e um template sem substituições pode voltar como string comum. Execute o arquivo minificado uma vez antes de publicar; a linha de tamanho mostra o que a passada rendeu.
A formatação entende JSX, a linha shebang, atributos de importação como import data from "./d.json" with { type: "json" } e await de nível superior. A minificação analisa primeiro como script clássico e tenta de novo como módulo ES se falhar, então import, export e await de nível superior funcionam, enquanto construções como with, que só existem no modo não estrito, seguem pelo caminho de script. Se as duas tentativas falharem, a mensagem exibida é a que avançou mais no arquivo.
Duas limitações vale conhecer antes de colar. Anotações TypeScript ficam fora da análise, então const x: number = 1 termina em erro de sintaxe em vez de uma linha formatada. E o Terser não analisa JSX: um componente JSX é formatado, mas se recusa a ser minificado, com “Unexpected token: operator (<) (line 1, column 19)” apontando a primeira tag — minifique o build já transpilado.
O primeiro clique em Format baixa três arquivos deste site — Prettier standalone e os plugins babel e estree, cerca de 600 KB —, e o primeiro clique em Minify baixa o pacote do Terser, cerca de 1 MB. Depois quem responde é o cache do navegador: os cliques seguintes não fazem requisição alguma e a página continua funcionando com a rede desligada.
Um módulo de 68 KB com 500 funções exportadas foi formatado em cerca de 250 ms e minificado em cerca de 230 ms no Chrome de desktop. Nada do que você cola é enviado: as únicas requisições da ferramenta são os arquivos dos próprios motores, e o texto, a árvore sintática e o resultado ficam na aba.