Formatador de JS: Embelezar e Minificar Online

Use o formatador de JS para embelezar ou minificar JavaScript, TypeScript e JSX/TSX com Prettier.

Seu código é formatado localmente no seu navegador com Prettier e Terser, e nada é enviado para um servidor.

Criado e mantido por Udit Agarwal

Precisa formatar estilos também? Experimente o CSS Formatter.

Sobre Formatador de JS / TS

Este formatador de js embeleza ou minifica JavaScript, TypeScript e JSX/TSX diretamente no seu navegador. Como embelezador de JavaScript, ele executa o Prettier com um painel completo de opções, enquanto a minificação usa o Terser para reduzir o código para produção. Escolha o parser Auto para detectar a sintaxe automaticamente, ou force JS/JSX ou TS/TSX quando precisar de um formatador de TypeScript específico. Ajuste ponto e vírgula, estilo de aspas, largura de tabulação, largura de impressão e vírgulas finais para combinar com o estilo do seu projeto. Foi feito para desenvolvedores limpando trechos bagunçados, engenheiros de QA inspecionando saída empacotada e qualquer um que queira uma alternativa rápida ao prettier online. Tudo é processado localmente no seu navegador, então seu código-fonte nunca sai do seu dispositivo e nada é enviado para um servidor.

Recursos

  • Embeleze JavaScript, TypeScript e JSX/TSX com Prettier
  • Minifique com Terser para reduzir o código para produção
  • Detecção automática de parser, além dos modos explícitos JS/JSX e TS/TSX
  • Ative ou desative ponto e vírgula, aspas simples ou duplas, e tabulações vs espaços
  • Largura de tabulação configurável (2 ou 4) e largura de impressão (80, 100, 120)
  • Escolha vírgulas finais: none, es5 ou all
  • Formatação instantânea conforme você ajusta qualquer opção
  • Roda inteiramente no seu navegador

Como usar Formatador de JS / TS

  1. Cole seu JavaScript ou TypeScript na caixa de entrada.
  2. Escolha Embelezar para formatar de forma legível ou Minificar para comprimir.
  3. Escolha o parser: Auto, JS / JSX ou TS / TSX.
  4. Ajuste opções como largura de tabulação, aspas, ponto e vírgula e vírgulas finais.
  5. Copie a saída formatada do painel de resultado.

Exemplo

Entrada

const  greet=(name)=>{return 'oi '+name}

Saída

const greet = (name) => {
  return 'oi ' + name;
};

Embelezado com as opções padrão do Prettier (indentação de 2 espaços, ponto e vírgula).

Erros comuns e solução de problemas

  • A saída fica vazia ou mostra um erro de parsing após colar. — Garanta que o trecho seja JavaScript ou TypeScript válido. Mude o parser para TS / TSX para anotações de tipo, ou JS / JSX para sintaxe React.
  • O modo Auto interpreta mal sintaxe específica de TypeScript. — O Auto tenta o parser de TypeScript primeiro e recorre ao Babel; force TS / TSX explicitamente se seu arquivo usa recursos avançados de tipos.
  • A saída minificada parece ilegível. — Isso é esperado. O Terser remove espaços em branco e encurta o código para produção. Use Embelezar se quiser um resultado legível.
  • As aspas ou o ponto e vírgula não são o que você queria. — Ative ou desative as opções Aspas simples e Ponto e vírgula antes de copiar. O Prettier reformata instantaneamente quando você as altera.

Perguntas frequentes

O que é o formatador de JS e o que ele faz?
É uma ferramenta no navegador que embeleza ou minifica JavaScript, TypeScript e JSX/TSX. O embelezamento executa o Prettier com opções completas de estilo e a minificação executa o Terser para comprimir o código para produção.
Como formato TypeScript ou JSX com o formatador de JS?
Escolha o parser: JS / JSX, TS / TSX ou Auto. O Auto tenta o parser de TypeScript primeiro e recorre ao Babel, então JavaScript puro, JSX e TypeScript são todos formatados corretamente.
O formatador de JS usa Prettier e Terser?
Sim. O embelezamento usa Prettier e a minificação usa Terser, então a saída corresponde às mesmas ferramentas que você usaria em um pipeline de build real.
Quais opções de estilo posso controlar no formatador de JS?
Você pode alternar entre aspas simples e duplas e ponto e vírgula, alternar entre tabulações e espaços, definir a largura de tabulação como 2 ou 4, escolher uma largura de impressão de 80, 100 ou 120, e escolher vírgulas finais none, es5 ou all.
O formatador de JS envia meu código para algum lugar?
Não. Tanto o Prettier quanto o Terser rodam inteiramente no seu navegador, então seu código nunca sai do seu dispositivo e nada é enviado para um servidor.

Ferramentas relacionadas

  • Formatador de CSS / SCSS — Embeleze ou minifique CSS/SCSS/LESS, ordene propriedades e remova duplicatas.
  • Formatador de HTML — Embeleze ou minifique HTML, formate CSS/JS inline e veja a prévia do resultado.
  • Formatador de JSON — Embeleze, minifique e valide JSON com a localização dos erros.
  • JSON para TypeScript — Gere interfaces de TypeScript a partir de uma amostra JSON.
  • Formatador de SQL — Formate SQL para MySQL, PostgreSQL, SQL Server, SQLite, BigQuery e Oracle.
  • Formatador de GraphQL — Formate ou minifique consultas e esquemas GraphQL, valide a sintaxe e extraia operações.
  • Formatador de XML — Embeleze, minifique e valide XML, e converta XML ↔ JSON.
  • cURL para Fetch — Converta um comando curl em uma chamada fetch() de JavaScript.

Mais ferramentas de Formatadores de código

Ver todas as ferramentas de Formatadores de código (32) · Todas as ferramentas