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.

Formatador de JS / TS

Embeleze ou minifique JavaScript, TypeScript e JSX/TSX com opções do Prettier.

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

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

Cole seu JavaScript ou TypeScript na caixa de entrada.
Escolha Embelezar para formatar de forma legível ou Minificar para comprimir.
Escolha o parser: Auto, JS / JSX ou TS / TSX.
Ajuste opções como largura de tabulação, aspas, ponto e vírgula e vírgulas finais.
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.