Formatador e Minificador de Código
Formate ou minifique HTML, CSS, JavaScript e SQL, com a linguagem detectada automaticamente — tudo no seu navegador.
Formatador de código - formate ou minifique HTML, CSS, JavaScript e SQL
Cole um código que chegou todo em uma linha, ou um código pronto para ir para produção, e transforme-o no que você precisa: indentado e fácil de ler, ou minificado para ocupar o menor número de bytes. O formatador trabalha com HTML, CSS, JavaScript e SQL, reconhece qual deles você colou e faz tudo no seu navegador, então código-fonte, consultas com nomes de tabelas e trechos de um projeto de cliente nunca saem do seu dispositivo.
Formatar é para pessoas: revisar um pull request, ler um bundle minificado, depurar uma consulta que alguém escreveu em uma única linha comprida. Minificar é para máquinas: arquivos menores carregam mais rápido e gastam menos banda. Uma única ferramenta cobre os dois sentidos.
Como usar
- Cole o seu código. Linguagem vem definida como Detectar automaticamente; escolha HTML, CSS, JavaScript ou SQL se o palpite estiver errado.
- Clique em Formatar para indentar ou em Minificar para compactar.
- Ajuste Indentação para 2 espaços, 4 espaços ou tabulações e, no caso de SQL, escolha o Dialeto SQL e como as Palavras-chave são escritas.
- Clique em Copiar ou Baixar. A linha abaixo da ferramenta mostra o tamanho antes e depois e quanto a minificação economizou.
O que cada linguagem usa
| Linguagem | Formatar | Minificar |
|---|---|---|
| HTML | js-beautify: tags aninhadas indentadas, tags inline mantidas na mesma linha | Comentários e espaços entre elementos de bloco removidos; pre, textarea, script e style ficam intactos |
| CSS | js-beautify: uma declaração por linha | Comentários e espaços removidos, strings preservadas, espaços mantidos onde os valores precisam deles, como em 0 auto e calc(100% - 32px) |
| JavaScript | js-beautify: chaves, blocos e chamadas encadeadas indentados | Terser: analisa o código, remove o peso morto e encurta os nomes das variáveis locais |
| SQL | sql-formatter: cada cláusula na sua própria linha, de acordo com o dialeto | Comentários removidos e espaços fora de aspas reduzidos a um único espaço |
As três bibliotecas são de código aberto e só são carregadas na primeira vez que você usa a linguagem correspondente, então a página em si continua leve.
Formatar SQL
Uma consulta longa escrita em uma linha só é difícil de revisar. O formatador de SQL coloca SELECT, FROM, WHERE, GROUP BY e cada JOIN em linhas próprias e indenta as colunas e condições abaixo deles. O dialeto importa porque os bancos de dados não concordam sobre a sintaxe: nomes entre crases são do MySQL, colchetes são do SQL Server, conversões com :: são do PostgreSQL. Escolha o dialeto que você usa entre SQL padrão, MySQL, MariaDB, PostgreSQL, SQLite, SQL Server, Oracle PL/SQL, BigQuery e Snowflake. As Palavras-chave podem ficar em MAIÚSCULAS, minúsculas ou Como estão; os nomes das suas tabelas e colunas nunca são alterados.
Minificar com segurança
O código minificado precisa se comportar exatamente como o original, e a forma segura de garantir isso é entender o código em vez de apagar caracteres às cegas. Por isso o JavaScript é minificado pelo Terser, que primeiro o transforma em uma árvore sintática; se o código tiver um erro de sintaxe, você recebe a linha e a coluna em vez de uma saída quebrada. O minificador de CSS mantém os espaços que têm significado, e o minificador de HTML deixa um espaço entre elementos inline como <span>a</span> <span>b</span>, porque removê-lo juntaria duas palavras na página.
Minificar não substitui a compressão no servidor. Gzip ou Brotli normalmente reduzem arquivos de texto em 70% ou mais além da minificação, e as duas técnicas funcionam bem juntas.
Usos comuns
- Ler um arquivo minificado de uma biblioteca de terceiros ou de um bundle de produção durante a depuração.
- Organizar o HTML exportado por um editor de e-mail ou por um CMS antes de editá-lo à mão.
- Revisar uma consulta copiada de um log, de uma linha de debug do ORM ou de uma mensagem de um colega no chat.
- Encolher um trecho de CSS ou JavaScript antes de embuti-lo em uma página ou em um template de e-mail.
Ferramentas relacionadas
Para JSON, o formatador JSON valida e indenta o conteúdo, e o conversor de JSON o transforma em YAML, CSV ou XML. Para ver exatamente o que a formatação mudou, cole o antes e o depois no Comparador de textos. Para uma tarefa específica, as páginas de tarefa abrem esta ferramenta já configurada: formatador de HTML, formatador de SQL, minificador de CSS, minificador de JavaScript e formatador de JavaScript.