Como funciona o embelecimento de JavaScript
O embelezador lê o seu código carácter a carácter, regista o nível de aninhamento de cada instrução e re-emite-o com espaçamento consistente. Nunca altera o que o código faz — apenas a forma como parece.
- Tokenizar. A biblioteca analisa a sua entrada numa sequência de tokens: palavras-chave, identificadores, strings, operadores e pontuação. Strings, literais de template e literais de expressão regular são reconhecidos como unidades individuais, pelo que uma chave dentro de uma string nunca é confundida com um delimitador de bloco.
- Acompanhar o aninhamento. À medida que percorre a sequência de tokens, o embelezador mantém um nível de recuo corrente. Cada chave de abertura, colchete ou parêntese empurra o nível para mais fundo; cada fecho retira-o. Essa profundidade decide quantas unidades de recuo precedem cada linha devolvida.
- Aplicar as suas opções. A sua escolha de recuo (2 espaços, 4 espaços ou uma tabulação) define a largura de um nível. A definição do estilo de chaves decide se uma chave de abertura se mantém na instrução que a precede ou cai para a sua própria linha. O limite de linhas em branco colapsa longas sequências de linhas vazias até ao limite que escolher.
- Re-emitir. Por fim, o formatador imprime os tokens com o recuo e as quebras de linha calculados, adicionando opcionalmente os ponto e vírgula que a inserção automática teria fornecido em tempo de execução. O resultado é o mesmo programa, apresentado de forma que um ser humano o possa ler.
Por que embelezar JavaScript
- Ler código minificado. Os bundles de produção são enviados numa linha com nomes de variáveis de uma só letra. Embelezar restaura as quebras de linha e o recuo para que possa rastrear um erro até à instrução que o causou, mesmo sem um source map.
- Organizar ficheiros inconsistentes. O código que várias pessoas tocaram deriva para recuos e estilos de chaves misturados. Uma passagem pelo embelezador normaliza o ficheiro inteiro para um único layout, o que faz com que o próximo diff mostre mudanças de lógica reais em vez de ruído de espaços em branco.
- Esta ferramenta não prejudica a sua página. A maioria dos formatadores online carrega a sua biblioteca completa no momento em que abre a página. Este carrega js-beautify de forma lazy apenas quando clica em Embelezar ou ativa o Modo ao vivo, por isso abrir a página custa alguns kilobytes em vez de algumas centenas, e a renderização inicial mantém-se rápida.
- Nada sai do seu navegador. O embelezador corre completamente no seu dispositivo. O seu código nunca é carregado para um servidor, o que importa quando o script que está a inspecionar pertence a um cliente, contém caminhos de API internos ou está sujeito a um acordo de confidencialidade.
Aplicações comuns
Embelezar JavaScript surge sempre que alguém precisa de ler código que não foi escrito para ser lido.
- Depuração em produção: cole um bundle minificado extraído do separador Rede para encontrar a função por detrás de um rastreamento de erros que não consegue descodificar de outra forma.
- Preparação de revisão de código: reformate o ficheiro com recuo inconsistente de um colaborador antes de abrir o pull request para que os revisores vejam a lógica, não a confusão de layout.
- Auditorias de segurança e conformidade: expanda um snippet de análise ou publicidade de um terceiro para confirmar exatamente o que faz antes de entrar em produção.
Um exemplo prático
Pegue num one-liner minificado: function f(a){if(a){return a*2}else{return 0}}. Cole-o acima com recuo de 2 espaços e estilo de chaves Colapsar, depois clique em Embelezar. Obtém de volta um bloco legível: function f(a) {, depois um if (a) { com recuo, a instrução return a * 2; aninhada um nível mais fundo, e as chaves correspondentes alinhadas por baixo. Mude o estilo de chaves para Expandir e cada chave de abertura cai para a sua própria linha. Mude o recuo para Tabulações e cada nível muda de dois espaços para um carácter de tabulação. A estrutura é idêntica; apenas o layout muda.
FAQ
Isto corre no meu navegador?
Sim. A biblioteca js-beautify é carregada de forma lazy na primeira vez que clica em Embelezar ou ativa o Modo ao vivo, depois fica em cache. O seu código nunca sai da página — não há chamada ao servidor nem upload.
Embelezar é o mesmo que desminificar?
Restaura a formatação legível — recuo, quebras de linha e espaçamento — mas não consegue recuperar os nomes de variáveis originais nem os comentários que a minificação removeu. Se existir um source map, as DevTools do seu navegador conseguem recuperar os nomes originais; um embelezador só funciona com o que está no ficheiro.
Embelezar vai mudar o comportamento do meu código?
Não. O embelecimento apenas adiciona e remove espaços em branco e quebras de linha; o programa corre de forma idêntica. A única opção que toca nos tokens é "Adicionar ponto e vírgula em falta", que insere os terminadores de instrução que a inserção automática de ponto e vírgula teria adicionado em tempo de execução de qualquer forma, tornando o código seguro para minificar depois.
O que significam as opções de estilo de chaves?
Colapsar mantém uma chave de abertura na mesma linha da instrução (if (x) {), que é a convenção habitual de JavaScript. Expandir coloca cada chave de abertura na sua própria linha (o estilo Allman). Expandir no final mantém a chave de abertura anexada mas coloca else e catch numa nova linha após a chave de fecho.
O embelecimento de JavaScript no lado do navegador dá-lhe código legível sem um passo de compilação nem um upload. Cole um script minificado ou desorganizado, escolha o seu recuo e estilo de chaves, depois copie ou faça download do resultado. Nada sai do seu dispositivo, não há conta e a biblioteca só carrega quando a pede — por isso abrir esta página custa-lhe alguns kilobytes, não um megabyte.