Anúncios incomodam? Ir Sem anúncios Hoje 

Formatação de Código JavaScript

DesenvolvedorTexto

ANUNCIADO Remover?

ENTRADA

Processo Automático

Código JavaScript

Opções de estilo

Recuo

Citações

Ponto e vírgula

Estilo de Chaves

Vírgulas Finais

Largura de Impressão

Alvo flexível para o comprimento da linha. Literal de objetos e arrays longos serão quebrados para se adaptar.

Reduzir 2+ linhas em branco em uma única linha em branco

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Formatação de Código JavaScript

Cole seu JavaScript minificado, desorganizado ou comprimido e obtenha de volta uma versão limpa e consistentemente formatada que você realmente pode ler. O formatação é consciente de tokens — entende literais de string, literais de template, expressões regulares e comentários, portanto, nunca reformata acidentalmente o interior de uma expressão regular ou reorganiza seu ${...} interpolações. Tudo é executado no seu navegador, então o código que você colar nunca sai do seu computador.

Como usar

Cole seu JavaScript no campo de entrada.
Escolha sua indentação, estilo de citação e política de ponto-e-vírgula.
Escolha um estilo de chaves (1TBS ou Allman) e uma política de vírgula no final.
Defina uma largura de impressão alvo — literais longos de objetos e arrays serão quebrados para se adaptar.
Copie a saída formatada ou baixe-a como um .js arquivo.

Características

Saída determinística – a mesma entrada sempre produz o mesmo resultado.
Indentação configurável – 2 espaços, 4 espaços ou tabs.
Conversão de citações – alternar entre única, dupla ou manter o estilo original com tratamento seguro de escape.
Política de ponto-e-vírgula – sempre inserir, remover todos ou manter o que já está lá.
Estilos de chaves – 1TBS (mesma linha) ou Allman (próxima linha).
Vírgulas no final – nenhum, ES5 (apenas objetos e arrays) ou todos (incluindo argumentos de função).
Quebra de largura de impressão – literais longos são quebrados em múltiplas linhas indentadas.
Sintaxe moderna – funções de seta, async/await, espalhamento/rest, desestruturação, classes, literais de template, BigInt e literais de regex são todos reconhecidos.
Preservação de comentários – comentários inline e de bloco sobrevivem ao passo de formatação.
Executa localmente – seu código nunca sai do navegador.

Quando usar esta ferramenta

Use este formatação quando estiver lendo pacotes minificados no mundo real, inspecionando um trecho de terceiro, copiando código de uma conversa ou e-mail para um projeto real ou normalizando o estilo de um colega antes de revisar um pedido de pull. Diferente de um linter completo, ele se concentra apenas no espaço em branco e na pontuação — sua lógica permanece inalterada.

ANUNCIADO Remover?

 Perguntas frequentes

Qual a diferença entre um minificador e um formatação de JavaScript?

Um minificador remove espaços desnecessários, curta identificadores e remove comentários para produzir o código mais pequeno possível para entrega aos navegadores. Um formatação ou formatação de código faz o oposto: expande o código com indentação consistente, quebras de linha e espaçamento para que um humano possa ler. Os dois são geralmente usados em extremos opostos de um fluxo de trabalho — formatação durante o desenvolvimento, minificação antes da implantação.
Por que a formatação determinística é melhor do que pedir a um IA para reformatar o código?

Formatações determinísticas aplicam as mesmas regras para a mesma entrada sempre, então uma função reformatada hoje e reformatada no mês que vem produz um mesmo diferencial. Modelos de IA, por outro lado, podem introduzir pequenas variações estilísticas entre execuções, ocasionalmente reescreverem lógica ou inventarem opções que não existem. Para código que acaba em controle de versão, saída previsível mantém diffs revisáveis e evita mudanças acidentais de comportamento.
Qual é a diferença entre o estilo de chaves 1TBS e Allman?

1TBS — o único estilo de chave — mantém a chave de abertura na mesma linha da declaração que a introduz, como em function foo() {. O estilo Allman coloca a chave de abertura em uma linha separada diretamente abaixo. Ambos são válidos; o estilo 1TBS é a convenção dominante no JavaScript moderno e é o estilo que Prettier e a maioria dos presets do ESLint exigem.
Quando devo usar vírgulas no final em JavaScript?

Vírgulas no final de arrays e literais de objetos multilinhas são válidas em todos os ambientes modernos de JavaScript e produzem diffs menores e mais limpos quando itens são adicionados — a linha que anteriormente precisava de uma vírgula e um novo item agora muda apenas uma vez. Vírgulas no final de listas de parâmetros e argumentos também são legais desde o ES2017, mas são às vezes desativadas para compatibilidade com ferramentas antigas. Use o modo ES5 se quiser vírgulas em objetos e arrays, mas não em chamadas de função.