Um embelezador de código que segue as regras do Prettier
Cole uma folha de estilo minificada, a resposta de uma API em uma linha só ou um script que alguém indentou misturando tabulações e espaços, e leia-o de volta em um único layout consistente. Este embelezador de código roda o Prettier 3 na página. Ele trata JavaScript (inclusive JSX), JSON, CSS, SCSS, LESS e HTML.
O Prettier não copia o seu layout. Ele interpreta o código e o imprime de novo do zero, com as suas próprias regras de quebra de linha. É por isso que duas pessoas que colam o mesmo código com espaçamentos diferentes recebem a mesma saída.
Colar, escolher, copiar: quatro passos
- Cole o código na caixa da esquerda, ou aperte Código de exemplo para carregar um exemplo da linguagem selecionada.
- Deixe Linguagem em Detectar automaticamente, ou escolha uma você mesmo. A ferramenta mostra qual linguagem detectou.
- Defina a Indentação (2 espaços, 4 espaços ou tabulação) e a Largura de impressão (80, 100 ou 120). Acrescente aspas, ponto e vírgula, vírgulas finais e espaço nas chaves para JavaScript.
- Leia o resultado à direita, compare as contagens de linhas e aperte Copiar ou Baixar. O arquivo se chama
formatted.js,.json,.css,.scss,.lessou.html.
Quais opções ainda valem para JSON, CSS e script em linha
Opções que não fazem sentido para uma linguagem são desligadas, e uma linha sob as configurações diz quais. O JSON ignora aspas e vírgulas finais. CSS, SCSS e LESS ignoram ponto e vírgula, vírgulas finais e espaço nas chaves, porque as regras de estilo já os fixam.
O HTML é o caso à parte. A marcação em si não tem configuração de aspas ou ponto e vírgula, mas os blocos de script e style dentro da página são formatados com as suas escolhas.
Por que a saída pode diferir da entrada em mais que espaços
O Prettier tem opinião própria. Com as configurações padrão, ele troca aspas simples por aspas duplas, acrescenta ponto e vírgula que faltam e põe uma vírgula depois do último item de uma lista de várias linhas. Você pode inverter cada um desses comportamentos nas opções. Ele mantém os comentários. Não renomeia, não reordena e não conserta nada, então um bug na entrada continua sendo um bug na saída.
Um hábito surpreende as pessoas em objetos JSON e JavaScript: se a primeira chave está na mesma linha da chave de abertura e o objeto cabe na largura de impressão, o Prettier o mantém em uma linha. Coloque a primeira chave na própria linha e o objeto permanece expandido.
Detecção automática, erros de sintaxe e o limite de 2.000.000 de caracteres
A detecção automática é um palpite curto, não um analisador. Código que começa com < é HTML. Texto que começa com chave ou colchete e é interpretado como JSON é JSON. Texto com regras como a { color: red; } e sem function, const ou => é uma folha de estilo, e variáveis SCSS ou LESS escolhem esses dois. Todo o resto é JavaScript. Escolha a linguagem à mão quando o palpite estiver errado.
Quando o código não é interpretado, você vê a linha, a coluna e a primeira linha da mensagem do Prettier. Entradas acima de 2.000.000 de caracteres são recusadas. TypeScript, Vue e Markdown não fazem parte desta ferramenta.
O que acontece com o código que você cola
Na primeira vez que você formata uma linguagem, a página carrega deste site os arquivos do Prettier de que precisa. Depois disso, a formatação roda localmente, e o seu código não é enviado a lugar nenhum. Você pode olhar o painel de rede do navegador enquanto aperta um botão. A ferramenta apenas interpreta e imprime o texto. Nunca o executa. Copiar usa a área de transferência, e Baixar salva um arquivo a partir da página.