Formatador e minificador de JavaScript

O que é um formatador de JavaScript?#

Um formatador de JavaScript pega em código difícil de ler — saída minificada de um bundler, um excerto colapsado copiado de um chat, ou apenas um arquivo que foi editado por cinco pessoas com cinco hábitos diferentes de indentação — e reescreve-o de modo a que a estrutura fique visível. A indentação corresponde ao aninhamento, os operadores têm espaçamento consistente, e as instruções terminam onde se espera. Um bom formatador também faz o inverso: retirar tudo o que não é essencial quando se precisa do payload mais pequeno possível.

Esta página faz ambos os trabalhos, e é honesta sobre como cada um funciona. Formatar é movido pela build standalone do Prettier usando o analisador Babel — o mesmo motor que muitas equipas correm no editor ao guardar, pelo que a saída aqui corresponde ao que o seu projeto produziria. Minificar é deliberadamente conservador: retira comentários e colapsa espaços em branco mantendo todas as mudanças de linha, de modo a que a inserção automática de pontos e vírgulas (ASI) nunca se parta. Não é um minificador ao nível de tokens como o esbuild ou o terser — não renomeia variáveis, não remove código morto, nem mangling de nomes de propriedades. Isso torna seguro alimentar o resultado de volta direto a um motor JS, mas é a ferramenta errada para encolher um bundle de produção. Conhecer a diferença é todo o ponto de usá-la bem.

Como usar#

1. Cole o seu JavaScript no painel da esquerda, ou clique em Exemplo para carregar um pequeno exemplo.
2. Escolha um estilo de Recuo na barra de ferramentas: 2, 4 ou tabulação. Dois espaços é a predefinição quase universal em projetos modernos; escolha tabulação apenas se vai colar num editor configurado para tabulações.
3. Clique numa ação:
   • Formatar — reimprime o código através do Prettier com a indentação escolhida. Os pontos e vírgula são emitidos por padrão, correspondendo ao comportamento padrão do Prettier.
   • Minificar — remove comentários de linha // e de bloco /* */, colapsa sequências de espaços e tabulações, e descarta espaços em branco finais em cada linha. As mudanças de linha são mantidas de propósito.
4. Leia o resultado no painel Saída à direita. Use Copiar no cabeçalho da saída para o recolher. Limpar esvazia ambos os painéis.

Se Formatar não consegue analisar a sua entrada (um parêntesis perdido, um template literal não terminado), a barra de estado mostra a mensagem de erro do Prettier em vez de produzir saída partida — para que se corrija o problema real em vez de perseguir uma reformatação enganosa.

Principais funcionalidades#

• Motor Prettier real. Formatar corre a build standalone do Prettier com os plugins Babel + estree, não um embelezador feito à mão. O que se obtém aqui é o que prettier --write produz.
• Minificar seguro para ASI. As mudanças de linha são preservadas durante a minificação, pelo que uma linha que dependia da inserção automática de pontos e vírgula continua a funcionar. Remover mudanças de linha cegamente é exatamente como “minificadores” casuais introduzem bugs.
• Conhecedor de strings, regex e templates. O removedor de comentários sabe a diferença entre // dentro de uma string e um comentário de linha real, e entre / como divisão e como início de um literal regex — pelo que nunca morde o seu código.
• Dois painéis, pronto a copiar. Entrada e saída lado a lado; a saída é só de leitura com uma cópia de um clique.
• Corre inteiramente no seu navegador. Não há backend nem envio. O Prettier está empacotado na página e carregado a pedido, pelo que o script ainda satisfaz uma política de segurança de conteúdos estrita de apenas self.

Exemplo prático#

Uma função copiada de um gist antigo, com comentários e indentação inconsistente incluídos:

Entrada:

function fetchUser(id){/*legacy: returns null when missing*/
  const url="https://example.com/users/"+id
    const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

Clique em Formatar com 2 espaços:

function fetchUser(id) {
  /*legacy: returns null when missing*/
  const url = "https://example.com/users/" + id;
  const opts = { method: "GET", cache: "no-store" };
  return fetch(url, opts).then((r) => r.json());
}

O Prettier corrige a indentação torta, espaça os operadores de forma consistente, e adiciona pontos e vírgula — mas deixa o comentário de bloco exatamente onde estava. Agora clique em Minificar na entrada original em vez disso:

function fetchUser(id){
const url="https://example.com/users/"+id
const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

O comentário desapareceu, a indentação perdida desapareceu, mas cada instrução continua na sua própria linha. Repare no que não aconteceu: fetchUser não foi encurtado, "GET" não foi transformado, a arrow function manteve a sua lista de parâmetros. Isto é compressão legível, segura para colar de volta numa tag script — não o mangl agressivo que um bundler faria em tempo de build.

FAQ#

Porque é que Minificar não renomeia variáveis nem encolhe o meu bundle?#

Porque fazer isso corretamente exige uma passagem completa de analisador-e-geração-de-código (análise de âmbito, seguimento de propriedades, deteção de efeitos secundários). O minificar desta ferramenta é intencionalmente um scanner: é rápido, leve em dependências, e provavelmente não consegue alterar o comportamento em tempo de execução. Para um bundle de produção, corra um bundler real offline; use esta página para limpezas rápidas, colar num documento, ou preparar um excerto que outra pessoa vai ler.

O minificador remove comentários dentro de strings?#

Não. O scanner percorre a fonte carácter a carácter e acompanha se está atualmente dentro de uma string de aspas simples, de aspas, de um template literal, ou de um literal regex. Um // que apareça dentro de qualquer um desses é tratado como texto e deixado em paz; só os comentários reais são removidos.

Lida com TypeScript ou JSX?#

O caminho Formatar usa o analisador Babel, que aceita JSX. As anotações de tipo TypeScript e a sintaxe específica de .ts/.tsx não estão ativadas aqui — se precisar delas, esta ferramenta reportará um erro de análise em vez de produzir silenciosamente saída errada. Mantenha esta página para JavaScript simples.

O meu código é enviado para algum lado?#

Não. Tudo corre no separador que está olhando. O Prettier está empacotado com a página e importado a pedido; o seu texto fonte é analisado em memória e nunca enviado pela rede.