O que o formatador de JavaScript faz
O Prettier lê o seu código, entende a estrutura e o reescreve do zero com um estilo consistente. Não importa se o original estava em uma linha só ou com indentação misturada: o resultado segue sempre as mesmas regras. Esta ferramenta usa o Prettier com o analisador Babel, que aceita JavaScript moderno, JSX (componentes React) e também JSON.
Você controla as escolhas de estilo mais discutidas: indentação (2 espaços, 4 espaços ou tabulação), largura da linha (80, 100 ou 120), ponto e vírgula no final das instruções ou não, aspas simples ou duplas e vírgulas finais em listas e objetos. Assim dá para combinar o resultado com o padrão do seu projeto sem configurar nada localmente.
Também serve para embelezar JavaScript minificado: o código ganha quebras de linha e indentação e volta a ser navegável. O que não volta são os nomes originais: se um minificador encurtou variáveis para a, b e c, o formatador não tem como saber como elas se chamavam. Se o código tiver um erro de sintaxe, a mensagem do analisador mostra a linha e a coluna.
Tudo roda no navegador, sem upload. O teste grátis cobre um arquivo ou um texto colado, que você pode reformatar com outras opções; novos conteúdos exigem o ToolStudio Pro, com uso ilimitado, vários arquivos de uma vez em um ZIP e sem anúncios.
Como formatar JavaScript
- Cole o código JavaScript, JSX ou JSON, ou arraste um arquivo.
- Escolha a indentação e a largura da linha.
- Defina ponto e vírgula, aspas simples ou duplas e vírgulas finais.
- Clique no botão para formatar.
- Copie o código formatado ou baixe o arquivo.
Quando formatar JavaScript
- Ler um script minificado para depurar ou entender o que ele faz.
- Organizar um JSON de API ou de configuração em uma linha só.
- Formatar componentes React (JSX) colados de exemplos ou de outro projeto.
- Padronizar aspas e ponto e vírgula antes de um commit.
- Preparar trechos de código para documentação, slides ou posts.
Escolhas de estilo do Prettier, explicadas
- Ponto e vírgula: sem eles, o Prettier adiciona um ; defensivo no início das linhas que começam com ( ou [, para evitar erros de inserção automática.
- Aspas: a opção escolhida vale para strings comuns; se a string contém a aspa escolhida, o Prettier usa a outra para evitar escapes.
- Vírgulas finais: facilitam diffs, pois adicionar um item novo muda só uma linha.
- Largura da linha: é um alvo, não um limite rígido; strings longas não são quebradas.
- JSON: a formatação respeita o formato JSON, sem adicionar vírgulas finais.
Perguntas Frequentes
Formata TypeScript?
Não. O analisador usado é o Babel, para JavaScript, JSX e JSON.
Consigo recuperar os nomes originais de um JS minificado?
Não. O formatador restaura a indentação e as quebras de linha, mas nomes encurtados pelo minificador não podem ser recuperados.
Posso usar como formatador de JSON?
Sim. Cole o JSON e ele será indentado com as opções que você escolher.
Meu código é enviado a um servidor?
Não. O Prettier roda no seu navegador.
É grátis?
Você pode testar com um arquivo ou um texto colado e reformatá-lo com outras opções. Para novos conteúdos, o ToolStudio Pro dá uso ilimitado, vários arquivos de uma vez em ZIP e nenhum anúncio.