Formatador e minificador de código

O que é Formatador e minificador de código?

Um formatador e minificador de código on-line e gratuito que embeleza ou minifica HTML, CSS e JavaScript sem nunca sair do seu navegador. Escolha a linguagem e depois selecione Embelezar para reindentar um código desorganizado ou em uma única linha com indentação de 2 espaços, 4 espaços ou tabulação, ou Minificar para comprimi-lo. O embelezamento é feito pelo js-beautify; a minificação de JavaScript usa o Terser para encurtar nomes e reduzir o tamanho, enquanto CSS e HTML são compactados removendo comentários e colapsando espaços redundantes. Os desenvolvedores web o utilizam para deixar legível um código de terceiros minificado, reduzir folhas de estilo e scripts antes de implantar, e limpar trechos colados da saída do build.

Como usar Formatador e minificador de código

1. Escolha a linguagem da sua fonte: HTML, CSS ou JS.
2. Escolha a ação: Embelezar para formatar ou Minificar para comprimir.
3. Para Embelezar, escolha a indentação: 2 espaços, 4 espaços ou Tabulação.
4. Cole ou digite o seu código na caixa de entrada: a saída é atualizada automaticamente.
5. Use o botão Copiar para pegar o resultado, ou clique em Limpar para esvaziar a entrada e recomeçar.

Exemplos

a{color:red;font-weight:bold}

a {
  color: red;
  font-weight: bold
}

function add(first, second) {
  return first + second;
}

function add(n,d){return n+d}

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

<ul><li>One</li><li>Two</li></ul>

Perguntas frequentes

O meu código é enviado para um servidor?

Não. O embelezamento e a minificação acontecem todos localmente no seu navegador: o js-beautify e o Terser são carregados como scripts e executados no seu dispositivo. O seu código nunca sai da sua máquina, e a ferramenta continua funcionando off-line.

Quais linguagens e ações são suportadas?

Três linguagens - HTML, CSS e JavaScript - cada uma com duas ações: Embelezar (formatar com a indentação escolhida) e Minificar (comprimir). O JavaScript é minificado com o Terser, enquanto CSS e HTML são compactados removendo comentários e colapsando espaços.

Qual indentação posso escolher?

Ao embelezar, você pode reindentar com 2 espaços, 4 espaços ou um caractere de tabulação. A indentação só se aplica ao Embelezar; o Minificar remove os espaços e ignora essa configuração.

Por que ao minificar o meu JavaScript apareceu um erro?

O Terser analisa o seu JavaScript antes de minificar, então um erro de sintaxe o interrompe e a mensagem é mostrada acima da saída. Corrija o ponto indicado - muitas vezes um colchete ou uma string sem fechar, ou um token solto - e o resultado é reconstruído automaticamente.

A saída se atualiza sozinha?

Sim. O resultado é reconstruído sempre que você muda a entrada, a linguagem, a ação ou a indentação, então você nunca precisa apertar um botão para formatar: basta copiar a saída quando ela estiver boa.