Formatador de código
Formate ou minifique JSON, JavaScript, HTML e CSS no seu navegador, com detecção automática de linguagem ao colar ou soltar um arquivo.
Resultado da formatação
Status
Pronto
- Caracteres
- -
- Linhas
- -
Como funciona
Um formatador de código reindenta códigos desorganizados ou minificados com quebras de linha e espaçamento adequados, enquanto um minificador remove esses espaços em branco para reduzir o tamanho do arquivo para produção, sem alterar a funcionalidade do código.
- Cole, solte ou digite o código
Colar ou soltar um arquivo também tenta detectar a linguagem automaticamente.
- Confirme a linguagem
JSON, JavaScript, HTML ou CSS. Altere manualmente se a detecção estiver incorreta.
- Formatar ou minificar
Formatar reindenta no local; Minificar comprime para o mínimo de espaços em branco. Copie ou baixe o resultado.
Formatar versus minificar
Formatar adiciona espaços em branco e quebras de linha para facilitar a leitura e depuração por uma pessoa. Minificar remove espaços desnecessários, novas linhas e comentários para gerar um arquivo menor, que é o que um site normalmente entrega aos visitantes para reduzir o tempo de carregamento. Ambos mantêm a mesma lógica; apenas os espaços em branco e comentários mudam.
O que o formatador JavaScript processa com segurança
O formatador e minificador de JavaScript trata strings entre aspas simples, aspas duplas e template literals com crase como texto opaco, de modo que chaves, ponto e vírgula ou caracteres de comentário escritos dentro de uma string, inclusive dentro de uma expressão de template ${...}, são mantidos exatamente como você digitou, em vez de serem reformatados como se fossem código. Ele não analisa completamente o JavaScript, portanto aplica indentação estrutural em vez de seguir um guia de estilo como Prettier ou ESLint.
Tudo permanece no seu dispositivo
A formatação e a minificação são executadas inteiramente no seu navegador, inclusive para um arquivo que você arrastar ou escolher. Seu código, incluindo quaisquer segredos embutidos, endpoints de API ou lógica de negócios, nunca sai do seu dispositivo, o que torna a ferramenta segura para uso com código proprietário, configuração interna ou um pacote de produção minificado que você esteja tentando inspecionar.
Perguntas frequentes
Como formatar e embelezar código JavaScript ou HTML desorganizado online?
Cole ou arraste seu código, confirme o idioma detectado ou escolha um na lista suspensa e clique em Formatar. A ferramenta aplica a indentação adequada ao idioma selecionado: aninhamento de tags para HTML, indentação de blocos para JavaScript e agrupamento de propriedades para CSS. As contagens de Caracteres e Linhas são atualizadas para mostrar o resultado.
Meu código-fonte é enviado a um servidor ao usar este formatador de código?
Não. Toda a lógica de formatação e minificação é executada inteiramente no seu navegador, incluindo para um arquivo que você arrasta ou escolhe. Seu código nunca sai do seu dispositivo, o que torna a ferramenta segura para uso com código proprietário, configuração interna ou um pacote de produção minificado que você está tentando inspecionar.
Esta ferramenta lida corretamente com template literals de JavaScript com crases?
Sim. Um template literal delimitado por crase, incluindo uma interpolação `${...}` dentro dele, é tratado como uma única string opaca. Uma chave ou ponto e vírgula escrito dentro do texto do template é mantido exatamente como digitado, em vez de ser reformatado como código, o que anteriormente poderia corromper o valor real da string.
Posso usar esta ferramenta para minificar JavaScript ou CSS para produção?
A ferramenta oferece minificação básica removendo espaços em branco, quebras de linha e comentários, o que reduz o tamanho do arquivo. Ela não realiza tree-shaking, eliminação de código morto, renomeação de variáveis ou outras otimizações avançadas. Para minificação de nível de produção, use uma ferramenta específica como Terser para JavaScript, cssnano para CSS ou um bundler como webpack ou Vite.
Qual é a diferença entre este Formatador de Código e a ferramenta separada Formatador JSON?
O formatador de JSON é especializado apenas em JSON e fornece uma mensagem de erro de validação precisa com a posição do caractere. Este embelezador de código trata o JSON como uma das quatro linguagens, juntamente com JavaScript, HTML e CSS. Se você estiver trabalhando exclusivamente com JSON e quiser a validação mais detalhada, use o formatador de JSON dedicado.