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

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de EditorConfig

Gere um arquivo .editorconfig com suas regras de estilo e tamanho de indentação, fim de linha, charset e espaços em branco para formatação consistente entre IDEs e editores.

Validador de Email

Valide um endereço de email: verificação de sintaxe RFC 5322, consulta de registro MX em tempo real, além de detalhes de parte local, domínio e comprimento. Nenhum email é enviado.

Formatador de HTML

Formate HTML localmente no navegador com indentação de dois ou quatro espaços. O HTML não é enviado nem validado.

Ferramenta disponível em outros idiomas