Formatador de código

O que faz

O formatador de código pega código apertado, minificado ou com indentação inconsistente e o devolve em um estilo limpo e uniforme. Ele suporta as linguagens que você mais encontra no desenvolvimento web: HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSON, XML, Markdown, YAML e GraphQL.

Por baixo dos panos ele roda o Prettier, o formatador usado por milhões de projetos, então o resultado fica exatamente igual ao código formatado no VS Code ou por um hook de pre-commit. O parser de cada linguagem só é carregado quando você a escolhe, o que mantém a página rápida.

Como usar

1. Escolha a Linguagem do seu código.
2. Cole o código ou abra um arquivo.
3. Escolha um estilo de Indentação (2 espaços, 4 espaços ou tabs) e uma Largura da linha. Linhas maiores que essa largura são quebradas onde a linguagem permite.
4. Em JavaScript e TypeScript, escolha se as instruções terminam com ponto e vírgula. Em scripts e folhas de estilo, escolha aspas simples se o seu projeto as preferir.
5. Copie o resultado ou baixe-o.

Exemplo

O exemplo é uma página HTML de uma linha só, com CSS e JavaScript inline. Depois de formatada, cada elemento fica em sua própria linha, as regras CSS são expandidas com uma declaração por linha e a arrow function do script ganha parênteses e ponto e vírgula:

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

Dicas

• Formatar também serve como uma verificação rápida de sintaxe. Se o Prettier não conseguir interpretar a entrada, a mensagem de erro mostra a linha e a coluna para você ir direto ao problema.
• O XML é formatado tratando espaços em branco como irrelevantes, para que as tags aninhadas fiquem indentadas. Se o seu documento depende de espaços exatos dentro dos elementos, confira o resultado antes de usá-lo.
• Precisa do contrário? Use o minificador de JavaScript e CSS para reduzir o código para produção, ou o formatador de JSON para validar e minificar JSON.