Playground do Prettier

Formate JavaScript, TypeScript, CSS, JSON, HTML e Markdown com o Prettier direto no navegador e ajuste as opções do Prettier ao vivo.


    

  

  

    
    
    
  

  


    

    

      
O Playground do Prettier é uma versão gratuita e no navegador do Prettier — o popular formatador de código opinativo. Cole JavaScript, TypeScript, CSS, SCSS, LESS, JSON, HTML ou Markdown, escolha a linguagem e obtenha na hora o código formatado pelo Prettier. Ajuste opções do Prettier como largura da linha, tamanho da tabulação, ponto e vírgula, aspas simples, vírgulas finais e espaço entre chaves e veja o resultado atualizar ao vivo. Ele executa o motor real do Prettier inteiramente no seu dispositivo, então o seu código nunca sai do navegador.

      

        
O que é o Playground do Prettier?

        
O Prettier é um formatador de código opinativo que reescreve o seu código em um estilo único e consistente, para você parar de discutir sobre formatação. Este playground empacota o formatador oficial do Prettier e seus analisadores de linguagem e os executa no navegador. Diferente de um embelezador genérico, ele produz exatamente a saída reconhecível do Prettier e expõe as próprias opções de configuração do Prettier, espelhando o playground oficial do prettier.io sem nenhuma configuração.

        
      

      

        
Como usar o Playground do Prettier

        
Formatar código com o Prettier no navegador leva segundos:

        
  1. Escolha a linguagem que corresponde ao seu código (JavaScript, TypeScript, JSON, CSS, SCSS, LESS, HTML ou Markdown).
  2. Cole ou digite o seu código na caixa de entrada.
  3. Ajuste as opções do Prettier — largura da linha, tamanho da tabulação, ponto e vírgula, aspas, vírgulas finais e espaço entre chaves.
  4. Leia o resultado formatado à direita e copie com um clique.

      

      

        
Quais opções do Prettier eu posso mudar?

        
Você controla as opções que os desenvolvedores mais usam: printWidth (o comprimento de linha que o Prettier tenta respeitar), tabWidth, useTabs (tabulações ou espaços), semi (adicionar ou não ponto e vírgula), singleQuote (aspas simples ou duplas), trailingComma (todas, es5 ou nenhuma) e bracketSpacing (espaços dentro das chaves de objetos). A saída é reformatada automaticamente sempre que você muda uma opção.

        
      

      

        
Como isso é diferente de um formatador comum?

        
Embelezadores genéricos apenas reindentam o código, mas o Prettier o reimprime do zero usando suas próprias regras, então o resultado é consistente independentemente de como a entrada foi escrita. Isso significa que ele normaliza aspas, quebra linhas longas na largura definida e aplica os padrões específicos do Prettier que outros formatadores não aplicam. Se a sua equipe usa o Prettier, este playground mostra exatamente o que o Prettier produziria.

        
      

      

        
Meu código é enviado para algum lugar?

        
Não. Todo o motor do Prettier roda localmente no seu navegador em JavaScript, então o seu código-fonte nunca é enviado nem armazenado em nenhum servidor. Você pode formatar código proprietário ou sensível com segurança.

        
      

      

        
Por que usar este Playground do Prettier?

        
  • 100% gratuito, sem anúncios, cadastro ou limites de uso.
  • Executa o formatador real do Prettier inteiramente no navegador — o código nunca é enviado.
  • Suporta JavaScript, TypeScript, JSON, CSS, SCSS, LESS, HTML e Markdown.
  • Opções do Prettier editáveis ao vivo: largura da linha, tamanho da tabulação, ponto e vírgula, aspas, vírgulas finais e espaço entre chaves.
  • Produz exatamente a saída opinativa do Prettier — a mesma de rodar o Prettier localmente.
  • Mensagens de erro amigáveis quando o seu código tem um erro de sintaxe.

      

      

        
Perguntas frequentes

        

          
O Playground do Prettier é gratuito?

          
Sim. Todas as ferramentas da ToolsSoup são totalmente gratuitas, sem conta, cadastro ou limites ocultos.

        

        

          
Ele usa o Prettier de verdade?

          
Sim. Ele carrega a build standalone oficial do Prettier e seus plugins de linguagem e os executa no seu navegador, então a saída corresponde ao que o Prettier produziria localmente.

        

        

          
Meu código está seguro?

          
Com certeza. Toda a formatação acontece localmente no seu navegador, então o seu código nunca é enviado nem armazenado em nenhum servidor.

        

        

          
Quais linguagens são suportadas?

          
JavaScript, TypeScript, JSON, CSS, SCSS, LESS, HTML e Markdown. Escolha a linguagem no seletor e o Prettier usa o analisador correto.

        

        

          
O que acontece se o meu código tiver um erro de sintaxe?

          
O Prettier não consegue formatar código inválido, então o playground mostra uma mensagem amigável descrevendo o problema em vez de gerar a saída.