Alterne entre formatar e minificar a qualquer momento; o resultado se atualiza enquanto você digita. Arrume HTML, CSS e JavaScript bagunçados ou reduza-os para um site mais rápido. Roda no seu navegador, é grátis e privado.
Como formatar ou minificar código
- Escolha Formatar ou Minificar.
- Escolha a linguagem: HTML, CSS ou JavaScript.
- Para formatar, escolha o recuo: 2 espaços, 4 espaços ou Tab.
- Cole seu código na caixa de entrada ou toque em Exemplo para ver como funciona.
- Leia o resultado em Formatado e toque em Copiar.
- Limpar esvazia a entrada.
O que formatar faz
Formatar só muda o espaço em branco. O CSS fica com uma declaração por linha, regras separadas por uma linha em branco e media queries e regras aninhadas com recuo. O JavaScript é re-indentado pelas chaves, com uma instrução por linha, enquanto strings, template literals, expressões regulares e cabeçalhos for (;;) ficam exatamente como foram escritos. O HTML é indentado pelo aninhamento, com elementos em linha mantidos na mesma linha do texto para a página ser exibida igual, e blocos <script> e <style> em linha são formatados com os formatadores de JavaScript e CSS.
O que a minificação faz
Minificar remove comentários e todo espaço de que o navegador não precisa. Comentários que começam com /*! são mantidos, já que costumam conter uma licença. O JavaScript mantém uma quebra de linha sempre que a inserção automática de ponto e vírgula depende dela, então código escrito sem ponto e vírgula continua funcionando. Os nomes não são encurtados e nenhum código é reescrito, então o resultado se comporta exatamente como o original. No HTML, o conteúdo de pre e textarea nunca é tocado, e o espaço entre elementos em linha é mantido como um único espaço para que as palavras não grudem.
Limites que vale conhecer
O formatador lê o código com um tokenizador de verdade, e não com localizar e substituir, mas não faz uma análise completa, então não pega todo erro de sintaxe. Quando encontra um problema, como uma string, um comentário ou um colchete sem fechar, ele informa a linha. TypeScript, JSX e linguagens de template não são aceitos. A minificação de HTML remove os espaços entre elementos de bloco, como itens de lista; se um layout depende desse espaço em branco entre itens inline-block, confira depois de minificar.
Dicas
- Guarde seu arquivo original. Código minificado é difícil de ler e editar, então minifique uma cópia para publicar.
- Teste sua página depois de minificar, principalmente se o layout depender de espaços entre elementos.
- Use a formatação para ler código que você não escreveu, como um trecho copiado ou um arquivo comprimido.
- Escolha o mesmo recuo que a sua equipe usa para que as alterações fiquem pequenas.
- Compare antes e depois com o comparador de diferenças.
Quem usa
Estudantes que estão aprendendo a ler código, freelancers que arrumam o site de um cliente e pequenas empresas que reduzem o peso da página para ganhar velocidade. Para arquivos JSON, use as ferramentas JSON.
Privado por design
Seu código é formatado nesta página, no seu navegador. Nada é enviado, então é seguro para trabalhos privados ou ainda não lançados.
Perguntas
Minificar vai quebrar meu código?
Ele só remove comentários e espaços desnecessários e não reescreve seu código, então o comportamento continua o mesmo. Sempre teste o resultado.
Ele funciona com TypeScript ou JSX?
Não. HTML, CSS e JavaScript são compatíveis.
Por que um comentário foi mantido?
Comentários que começam com /*! são mantidos porque costumam conter uma licença.