Code Formatter (Prettier) — Formatador de código
Formate JavaScript, TypeScript, CSS, SCSS, Less, HTML, JSON, GraphQL, Markdown e YAML com o Prettier, totalmente no seu navegador.
🔒 Executa completamente no seu navegador — nada é enviadoO que este formatador de código faz
Esta ferramenta executa o Prettier, o formatador de código opinativo usado por grande parte do ecossistema JavaScript, diretamente no seu navegador. O Prettier não se limita a reindentar linhas: ele analisa o seu código-fonte, transforma-o numa árvore sintática e imprime-o de novo do zero seguindo um pequeno conjunto de regras. É por isso que o resultado é consistente, por mais bagunçada que a entrada estivesse: listas longas de argumentos são quebradas, objetos só são divididos em várias linhas quando ultrapassam a largura de impressão, aspas e pontos e vírgulas seguem uma única convenção e os espaços no fim das linhas desaparecem.
Pode formatar JavaScript, JSX, TypeScript e TSX, os três principais dialetos de folhas de estilo (CSS, SCSS e Less), HTML com estilos e scripts incorporados, JSON, esquemas e consultas GraphQL, documentos Markdown e arquivos de configuração YAML. Cada linguagem usa o seu próprio plugin do Prettier, e apenas o plugin necessário é carregado, para que a página continue leve até você realmente formatar alguma coisa.
As opções explicadas
Print width (largura de impressão) é o comprimento de linha abaixo do qual o Prettier tenta ficar; 80 é o padrão, e 100 ou 120 são comuns em equipes com monitores largos. Tab width define quantos espaços ocupa um nível de indentação, e Indent with alterna entre espaços e caracteres de tabulação reais. Semicolons controla se as instruções em JavaScript e TypeScript terminam com ponto e vírgula; quando está desativada, o Prettier só o acrescenta onde é necessário para evitar ambiguidade. Single quotes prefere ' em vez de " nas strings, desde que isso não exija escapes. Estas opções correspondem uma a uma às configurações de um arquivo .prettierrc, para que possa reproduzir a configuração do seu projeto.
Privado e prático
Tudo acontece localmente: o formatador nunca envia o seu código, não o armazena nem o manda para nenhuma API. Por isso é seguro para código proprietário, arquivos de configuração com nomes de host internos ou trechos copiados durante um incidente em produção. Quando o analisador encontra um erro de sintaxe, a mensagem mostra a linha e a coluna e o cursor salta para esse ponto da entrada, o que torna esta uma forma rápida de encontrar um colchete em falta num arquivo JSON ou YAML grande. No dia a dia, mantenha o Prettier no seu editor e na CI; use esta página quando estiver numa máquina sem as suas ferramentas, revisando um trecho recebido pelo chat ou limpando código antes de colá-lo na documentação.
Como usar
- Escolha a linguagemSelecione a linguagem do seu trecho ou abra um arquivo para detectá-la pela extensão.
- Defina as opçõesAjuste a largura de impressão, a largura da tabulação, tabs ou espaços, pontos e vírgulas e o estilo de aspas.
- FormateClique em Format code. Os erros de sintaxe são exibidos com a linha e a coluna.
- Copie ou baixeCopie o código formatado de volta para o seu editor ou baixe-o como arquivo.