Abre CSS minificado como .btn{color:#fff;padding:4px 8px} em uma declaração por linha com espaçamento uniforme e indenta blocos @media e @supports. Entende sintaxe SCSS e LESS, com aninhamento e variáveis, então dá para arrumar um arquivo de tema antes do commit.
Como usar
- Escolha a linguagem (ela é detectada ao colar ou soltar um arquivo) e cole o código ou abra um arquivo.
- Formatar reorganiza o código com Prettier, ou com sql-formatter no caso de SQL. Escolha indentação e largura da linha; em JavaScript também aspas e ponto e vírgula, em SQL o dialeto e a caixa das palavras-chave.
- Minificar remove comentários e espaços em HTML, CSS, JSON, XML, SQL e GraphQL. Em JavaScript e TypeScript apenas compacta espaços e comentários.
- Erros de sintaxe mostram linha e coluna exatas com uma marca. Toque no erro para ir até ele.
- Copie ou baixe o resultado, ou use-o como nova entrada.
- A formatação roda em um worker em segundo plano no seu navegador: arquivos grandes não travam a página e seu código nunca é enviado.
- Os plugins de cada linguagem só são carregados na primeira vez que você a usa.
- JSON com comentários ou vírgulas finais (JSONC) é aceito para formatar; para minificar é preciso JSON estrito.
- YAML e Markdown não podem ser minificados com segurança, por isso só há Formatar.
Por que usar um formatador
Uma formatação consistente faz as revisões de código tratarem da lógica e não de espaços, e mantém os diffs pequenos. O Prettier é opinativo: reimprime o arquivo inteiro a partir da árvore sintática, então o resultado é o mesmo não importa como estava a indentação. Você escolhe só algumas opções: largura da indentação ou tabs, largura de linha (80 caracteres por padrão) e, no JavaScript, aspas simples ou duplas e se usa ponto e vírgula.
Como o código é analisado antes, o formatador também serve de checagem rápida de sintaxe. Um colchete faltando ou uma tag sem fechar interrompem a formatação e mostram uma marca na posição exata, o que costuma ser mais rápido que ler um stack trace.
Embelezar ou minificar
Embelezar adiciona quebras de linha e indentação para pessoas. Minificar remove comentários e espaços para máquinas: no HTML junta espaços mas preserva o conteúdo de pre e textarea, no CSS tira comentários exceto blocos /*! licença */, e em SQL, JSON, XML e GraphQL gera uma linha compacta. Em JavaScript e TypeScript só compacta espaços e comentários; não renomeia variáveis como um bundler. YAML e Markdown dependem de espaços, então só há a opção de embelezar.
Formatação de SQL
SQL não tem um estilo padrão. Aqui as palavras-chave podem ficar em MAIÚSCULAS ou minúsculas, e o dialeto ensina ao formatador a sintaxe do MySQL, PostgreSQL, SQL Server (T-SQL), Oracle PL/SQL, SQLite, BigQuery, Snowflake e outros, como identificadores com crase, conversões :: ou parâmetros $1.
Perguntas frequentes
Meu código é enviado para um servidor?
Não. A formatação roda num web worker dentro do navegador. O código não sai do seu aparelho, o que importa para código proprietário e arquivos com credenciais.
Quais linguagens são suportadas?
HTML, CSS, SCSS, LESS, JavaScript, JSX, TypeScript, TSX, JSON, SQL em 20 dialetos, XML, YAML, GraphQL e Markdown. A linguagem é detectada quando você cola ou solta um arquivo.
O resultado bate com o Prettier do meu projeto?
Sim, com as mesmas opções. O formatador é o próprio Prettier, então com a mesma indentação, largura de linha, aspas e ponto e vírgula o resultado é igual ao do prettier --write.
Por que a formatação falha com erro de sintaxe?
O formatador analisa o código antes de reimprimir, então código inválido não pode ser formatado. A mensagem mostra linha e coluna; corrija ali e o código volta a ser formatado.
Minificar JavaScript aqui renomeia variáveis?
Não. Só remove comentários e espaços desnecessários. Para bundles de produção com renomeação e remoção de código morto, use uma ferramenta de build como esbuild ou Terser.
Posso formatar JSON com comentários?
Para embelezar, sim: JSON com comentários e vírgulas finais (JSONC, como no tsconfig.json) é aceito. Para minificar, o JSON precisa ser estrito.