Softonic

Formatador JavaScript

Etapa 1 / 3
Próximo

Cole um bloco de JavaScript minificado ou mal indentado e receba de volta um código limpo e legível formatado com as mesmas regras que os editores usam. Escolha entre tabs ou espaços, aspas simples ou duplas, ponto e vírgula ou não, vírgulas finais em ES5 ou todas. Lida com sintaxe moderna, encadeamento opcional, coalescência nula, JSX, TypeScript, await de nível superior.

Como formatar JavaScript

  1. 1

    Cole a fonte

    Qualquer JS, JSX ou TypeScript válido. O parser escolhe o dialeto a partir da sintaxe.

  2. 2

    Defina suas preferências

    Tamanho da indentação, tabs vs espaços, estilo de aspas, ponto e vírgula, largura de impressão, vírgulas finais.

  3. 3

    Formatar

    A ferramenta executa uma passagem compatível com Prettier e gera o resultado formatado.

  4. 4

    Copie a saída

    Cópia com um clique ou baixe como um arquivo. A indentação original é descartada, não sobreposta.

Opções de estilo

Opção Valores Padrão
Indentação tab, 2, 4 2 espaços
Estilo de aspas simples, dupla dupla
Ponto e vírgula sempre, nunca sempre
Largura de impressão 60 - 120 80
Vírgulas finais nenhuma, es5, todas es5
Parênteses de seta sempre, evitar sempre
Espaçamento de colchetes true, false true
Aspas simples em JSX true, false false

Por que a formatação é importante

A formatação não é apenas estética, trata-se de reduzir a carga cognitiva. Um código formatado de forma consistente permite que os revisores se concentrem na mudança lógica, e não na busca por uma chave fora do lugar.

  • Discussões desnecessárias terminam assim que um projeto adota um formatador. git diff mostra a mudança real, não debates sobre indentação.
  • Ganchos pré-compromisso (com ferramentas como Husky + lint-staged) formatam automaticamente arquivos em estágio antes de serem comprometidos.
  • Integração com editores (VS Code, WebStorm) aplica as mesmas regras ao salvar.

O que a formatação não faz

  • Não faz linting. Regras de estilo (no-unused-vars, eqeqeq) são território do ESLint. Um formatador apenas remodela espaços em branco e pontuação, não rejeita código por problemas lógicos.
  • Não corrige erros de sintaxe. Se a entrada for um JS inválido, o formatador irá falhar. Use-o como um verificador de sanidade para garantir que seu código pelo menos seja analisável.
  • Não impõe convenções de nomenclatura. camelCase vs snake_case é uma regra de lint, não de formatador.

Erros comuns

  • Lutando contra o formatador. Se você continuar reformatando após a execução, estará desperdiçando tempo. Ou configure as opções, ou aceite a escolha do projeto.
  • Executando formatação em um arquivo gerado. Saída de empacotadores, código transpilado, .min.js, nenhum deles se beneficia. Formate fontes, não artefatos.
  • Formatando sem analisar. Um regex “pretty-print” corromperá literais de template, literais de regex e JSX. Sempre use um formatador baseado em AST (como este).

Perguntas frequentes

Sim. O parser detecta a sintaxe TypeScript (tipos, interfaces, generics, decorators) e formata de acordo. JSX também é suportado em arquivos .tsx / .jsx.

Segue as mesmas regras que os padrões do Prettier, configuráveis através das opções habituais (largura de impressão, aspas, ponto e vírgula, vírgulas finais). Um arquivo formatado aqui deve corresponder a um formatado pelo Prettier com a mesma configuração.

O formatador requer JavaScript válido e analisável. Se você receber um erro, o código provavelmente tem um problema de sintaxe (chave não fechada, JSX inválido, erro de digitação). Execute-o primeiro através de um linter se a mensagem não estiver clara.

Sim. Comentários de linha única (//) e de bloco (/* */) são mantidos na saída, posicionados próximos de onde estavam na fonte.

Ferramentas relacionadas

Gerador de cards CSS

Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.

Gerador de textura de ruído

Gere uma textura de ruído em SVG que se repete sem emendas, com opacidade, frequência do grão, tipo de ruído e cor de fundo ajustáveis, e copie o CSS já pronto.

Gerador de Configuração Webpack

Crie um webpack.config.js para webpack 5 a partir de um formulário curto: defina o entry, a pasta de saída e o modo, e ative TypeScript, Babel, um loader CSS, HtmlWebpackPlugin e um servidor de desenvolvimento.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Ferramenta disponível em outros idiomas