Formatar JavaScript

Enviar

0 caracteres

Ferramenta de formatação de código JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON no navegador, com configuração detalhada estilo Prettier, compressão e ofuscação Terser, editor CodeMirror integrado, preview em tempo real, atalhos de teclado, upload e download de arquivos.

Sugestões Relacionadas

Compressor de JS

CSS Formatter

Formatador JSX

Gerador de código QR/código de barras

Gerador de código cURL

Ofuscador JS

Casos de uso

Colar código JS de terceiros comprimido durante o desenvolvimento frontend para embelezar rapidamente e facilitar leitura e debug
Unificar a formatação do código JavaScript/TypeScript antes de code reviews em equipe, eliminar diferenças de estilo em indentação, aspas, ponto e vírgula, e focar na revisão de lógica
Ao herdar projetos legados, formatar com um clique o código JS antigo com formatação desorganizada para compreender rapidamente a estrutura e hierarquia lógica
Antes do deploy em produção, usar Terser para comprimir e ofuscar código JavaScript, reduzir o tamanho do arquivo e melhorar a velocidade de carregamento da página
Ao escrever demos JS/JSX online, manter o código organizado com formatação em tempo real para compartilhar facilmente com colegas ou a comunidade
Ao aprender os efeitos de cada opção do Prettier, visualizar resultados de formatação ajustando opções, entender parâmetros como tabWidth, trailingComma, etc.
Processar snippets de código copiados de plataformas como Stack Overflow, GitHub, reparar automaticamente problemas de indentação e quebras de linha
Ao escrever arquivos de configuração JSON, formatar automaticamente indentação e quebras de linha para evitar falhas de parse por erros de vírgulas ou parênteses
Ao desenvolver páginas CSS/HTML, formatar código JS+CSS+HTML do mesmo projeto em um só lugar para manter um estilo unificado
Organizar rapidamente código JS de problemas de algoritmos antes de entrevistas, uma formatação padrão melhora a apresentação do código

Como Usar

Abra a página da ferramenta de formatação JavaScript, você pode colar código diretamente na área de edição esquerda, ou clicar no botão de upload para selecionar arquivos locais (suporta formatos .js/.ts/.jsx/.tsx/.css/.html/.json)
Selecione o tipo de linguagem correspondente: a ferramenta normalmente detecta automaticamente, se a detecção não for precisa selecione manualmente JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON no dropdown de linguagens
Configure as opções de formatação: você pode escolher presets rápidos (default/modern/classic), ou ajustar manualmente opções do Prettier (largura de indentação, tabulações/espaços, largura de linha, ponto e vírgula, aspas, vírgula final, parênteses em arrows)
Se precisar comprimir código, mude para o modo de compressão, configure opções do Terser (se habilitar compress, se mangle nomes de variáveis, se comprimir variáveis de nível superior), nível de otimização CSS, opções de compressão HTML
A ferramenta processa o código em tempo real, a área de edição direita mostra imediatamente o resultado formatado ou comprimido, a barra de status inferior mostra estatísticas de caracteres, bytes e taxa de compressão em tempo real
Use atalhos de teclado para melhorar a eficiência: Ctrl+Shift+B ativa formatação, Ctrl+Shift+M alterna modo de compressão, Ctrl+Shift+O abre arquivo, Ctrl+Shift+D baixa resultado, Ctrl+Shift+K limpa editor
Quando estiver satisfeito clique no botão de copiar para copiar o resultado para a área de transferência, ou clique em baixar para salvar como arquivo local; você também pode clicar em compartilhar para gerar um link URL com código e configuração para compartilhar com outros

Recursos

Suporte multilíngue: formata 7 linguagens frontend comuns simultaneamente: JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON, processa todo o código frontend em um só lugar
Configuração detalhada estilo Prettier: suporta opções completas como tabWidth (2/4/8 espaços), useTabs (tabulações vs espaços), printWidth (largura de linha), semi (ponto e vírgula), singleQuote (aspas simples vs duplas), trailingComma (vírgula final), arrowParens (parênteses em arrow functions)
Função de minificação de código: integra o motor de compressão Terser, suporta opções de nível produção como compress (compressão), mangle (ofuscação de nomes), toplevel (compressão de variáveis de nível superior)
Otimização específica para CSS: fornece configuração de nível de otimização CSS, suporta compressão CSS, remoção de comentários, remoção de espaços e outros tratamentos específicos
Opções de compressão HTML: suporta configuração HTML minify, pode colapsar espaços em branco, remover comentários, remover aspas de atributos, etc.
Processamento em tempo real: formata e visualiza o código em tempo real ao digitar, não precisa clicar em botões para ver o resultado da formatação
Editor CodeMirror: editor profissional CodeMirror integrado com syntax highlighting, números de linha, correspondência de parênteses, code folding e experiência de edição profissional
Upload e download de arquivos: suporta upload direto de arquivos locais .js/.ts/.jsx/.tsx/.css/.html/.json, após formatar você pode baixar o arquivo processado com um clique
Links de compartilhamento: salva código e configuração através do hash da URL, gera um link para compartilhar com colegas e reproduzir o cenário de formatação atual
Histórico: salva automaticamente o histórico de formatação no localStorage, você pode voltar a versões anteriores de código e configuração a qualquer momento
Atalhos de teclado: suporta atalhos como Ctrl+Shift+B para formatar, Ctrl+Shift+M para minificar, Ctrl+Shift+O para abrir arquivo, Ctrl+Shift+D para baixar, Ctrl+Shift+K para limpar
Presets rápidos: fornece 3 presets de configuração rápida: default (padrão), modern (moderno), classic (clássico), alterna entre estilos comuns com um clique
Estatísticas de caracteres: mostra em tempo real a comparação de caracteres, bytes e taxa de compressão entre o código original e o processado
Código de exemplo: inclui códigos de exemplo para cada linguagem, clique para carregá-los e testar rapidamente as funcionalidades

Perguntas frequentes

A lógica do código JavaScript mudará após a formatação?

Não. A formatação apenas ajusta conteúdo relacionado à «formatação» como espaços em branco, indentação, quebras de linha, posição de parênteses, estilo de aspas, é baseada em transformação AST, a estrutura AST do código antes e depois da formatação é completamente idêntica, a lógica de execução é 100% igual. Desde que o próprio código seja sintaticamente correto e possa ser parseado normalmente, a formatação não mudará nenhum comportamento de execução, você pode usar com confiança. Mas a compressão (mangle), embora também não mude a lógica, requer atenção a cenários especiais como eval e exportações de variáveis globais, evitando configurações inadequadas.

O que fazer se o resultado da ferramenta de formatação for diferente do meu VS Code/Prettier local?

A lógica de formatação desta ferramenta tenta se manter consistente com o comportamento oficial do Prettier. Se os resultados diferirem, verifique as opções de configuração: confira que as opções core tabWidth, useTabs, semi, singleQuote, trailingComma, arrowParens são exatamente iguais em ambos os lados. Além disso preste atenção a diferenças de versão do Prettier — as configurações padrão do Prettier 2/3 têm diferenças sutis (v3 por padrão trailingComma: all, v2 por padrão es5; desde v2 arrowParens por padrão always). Se seu projeto local tem arquivo de configuração .prettierrc, ajuste as opções na web para coincidirem com as desse arquivo, os resultados de formatação serão iguais.

O código comprimido pode ser restaurado? Os nomes de variáveis mangled podem ser recuperados?

O código formatado é completamente reversível — porque apenas mudou a formatação, todos os identificadores e lógica são preservados completamente, formatar novamente o restaurará. Mas o código comprimido: a parte de remoção de espaços e comentários pode ser reformatada para recuperar o layout, mas mangle (ofuscação de nomes de variáveis) é irreversível — o nome de variável com significado original userName se tornou a, este processo é unidirecional, não se pode restaurar automaticamente ao nome original. Se você precisar debugar código comprimido em produção, deve configurar a geração de arquivos Source Map, através de Source Map mapear de volta às posições do código fonte. Então antes de comprimir certifique-se de conservar o código fonte original sem compressão!

Quais navegadores são suportados? Pode usar em celulares?

Esta ferramenta suporta todos os navegadores modernos: as últimas versões de Chrome, Firefox, Safari, Edge funcionam corretamente. IE não é suportado (atualmente ninguém usa IE para desenvolver). O layout responsivo se adapta a telas de celular, mas a edição de código em telas pequenas tem uma experiência regular, recomenda-se usar em navegadores desktop para maior eficiência em telas grandes. Todos os cálculos de formatação e compressão são executados localmente no navegador, não é necessário enviar código para servidores, o código nunca sai do seu navegador, é seguro e confiável.

Por que certo código não pode ser formatado e mostra erro de parse?

A ferramenta de formatação primeiro precisa parsear o código em AST para funcionar, se o código tem erros sintáticos (parênteses não correspondentes, strings não fechadas, palavras-chave mal escritas, vírgulas sobrantes, etc.), o parser não consegue entender a estrutura do código e reporta erro. Por favor verifique primeiro os erros sintáticos do código: veja se há mensagens de erro no console, se o editor tem linhas onduladas vermelhas indicando a posição do erro, após reparar os erros sintáticos você poderá formatar normalmente. Além disso certifique-se de selecionar o modo de linguagem correto, não selecione JS normal para código JSX/TSX.

Meu código será enviado ao servidor? O código é seguro?

Não. Toda formatação, compressão e syntax highlighting é executada completamente no seu navegador local através de JavaScript, o código não é enviado a nenhum servidor, é processado completamente no seu dispositivo. Você pode testar desconectando a rede: após desconectar a ferramenta continua funcionando corretamente. A função de links de compartilhamento codifica o código e a configuração no hash da URL, ao clicar em compartilhar só gera uma URL, o código não é enviado — mas se você enviar o link para outras pessoas, ao abrirem o link poderão ver seu código, então não compartilhe código sensível através de links.

Podem ser formatados componentes de arquivo único Vue (.vue)? E Svelte?

Atualmente o suporte multilíngue desta ferramenta inclui JS/TS/JSX/TSX/CSS/HTML/JSON, arquivos de arquivo único (SFC) do Vue com <template>/<script>/<style> e componentes Svelte não são suportados para formatação direta completa, mas você pode copiar separadamente a parte script (JS/TS), a parte style (CSS) e a parte template (HTML) selecionando a linguagem correspondente para formatar individualmente. No futuro será considerado adicionar suporte de formatação SFC Vue/Svelte.

Como configurar uma convenção de formatação unificada para a equipe?

Para uma convenção unificada de equipe recomenda-se a combinação de três camadas: ① coloque .editorconfig na raiz do projeto para unificar configurações básicas do editor (indentação, quebras de linha, codificação); ② use Prettier e coloque arquivo de configuração .prettierrc no projeto, todos os desenvolvedores e CI usam essa configuração para formatar, esta ferramenta também pode selecionar opções correspondentes para coincidir com a configuração; ③ use ESLint + eslint-config-prettier para desativar regras de estilo ESLint e só verificar qualidade de código. Configure o editor para formatar automaticamente ao salvar (VS Code instale extensão Prettier, configure editor.formatOnSave: true), adicione passo lint no CI para verificar formato, garantindo que o código enviado cumpre as normas.

Quais benefícios tem a vírgula final (trailingComma)? Deve ser ativada?

Recomenda-se fortemente ativar a vírgula final (pelo menos nível es5, recomendado nível all). Os benefícios da vírgula final são: ① Git diff mais limpo: ao adicionar o último elemento você não precisa modificar a linha anterior para adicionar vírgula, só há diff da linha nova, não contamina o diff da linha anterior por adicionar vírgula; ② é mais conveniente ao reordenar elementos, não precisa lidar com problemas de vírgula final; ③ navegadores modernos e Node.js suportam completamente vírgulas finais, IE antigo não as suporta mas atualmente não há que considerar IE. A única desvantagem é uma vírgula a mais, mas vale completamente a pena em comparação com a conveniência que traz. Prettier v3 por padrão é all.

Ao comprimir é preciso ativar mangle? Qual a diferença entre compress e mangle?

Para compressão em produção recomenda-se ativar tanto compress quanto mangle, são duas opções de compressão independentes: compress é otimização de código (dobra de constantes, remoção de código morto, simplificação de expressões, etc.), só modifica a estrutura do código quando pode simplificar, não muda nomes de variáveis; mangle é encurtamento de nomes de variáveis locais, muda nomes de variáveis longos para caracteres individuais, esta é uma das maiores fontes de redução de tamanho. Desde que seu código não seja uma biblioteca para ser chamada externamente diretamente por nomes de variáveis, ou não use eval para acessar dinamicamente nomes de variáveis, mangle é seguro e pode reduzir significativamente o tamanho. Se é uma biblioteca open source que precisa preservar nomes de API, configure mangle.reserved para preservar os nomes exportados.

Por que ao formatar JSON certos caracteres são escapados automaticamente?

A especificação JSON tem requisitos sintáticos estritos: strings devem estar em aspas duplas, não pode haver vírgulas finais, caracteres especiais devem ser escapados (quebra de linha→\n, aspas→\", barra invertida→\\, Tab→\t, etc.). Se na sua string JSON há caracteres especiais sem escape, ao formatar serão escapados automaticamente conforme a especificação JSON, este é o comportamento correto. Nota: JSON não é JavaScript, em JSON não se podem escrever comentários, não pode haver aspas simples, não pode haver undefined, estes causarão falha de parse JSON.

Como fazer com que parâmetros de arrow functions sempre tenham parênteses? Ou sem parênteses?

Ajuste a opção arrowParens: always é sempre com parênteses ((x) => x), que é o valor padrão desde Prettier v2, o benefício é que ao adicionar ou remover parâmetros você não precisa adicionar ou remover parênteses, os diffs são mais limpos; avoid é omitir parênteses para parâmetro único (x => x), o código é mais conciso. Escolha conforme o estilo da equipe, ambos os estilos não são certos ou errados, só unifique. Nota: anotações de tipo de parâmetro, parâmetros padrão, parâmetros de desestruturação levarão parênteses independentemente da configuração.

A formatação pode reparar automaticamente problemas de estilo reportados pelo ESLint?

Esta ferramenta é formatação estilo Prettier, só pode reparar problemas de estilo dos quais Prettier se encarrega (indentação, aspas, ponto e vírgula, vírgula final, largura de linha, espaços, etc.). Os problemas de qualidade de código reportados por ESLint (como variáveis não utilizadas, falta de return, problemas de ===) são problemas lógicos, a ferramenta de formatação não os pode reparar automaticamente, você precisa modificá-los manualmente. Se seu ESLint tem configurado eslint-config-prettier, após Prettier formatar, ESLint não reportará mais erros relacionados a estilo, os problemas de qualidade restantes repare-os manualmente.

Qual tamanho máximo de arquivo de código suporta? Arquivos grandes ficam lentos ao formatar?

Como a formatação executa localmente no navegador, o tamanho de arquivo suportado depende do desempenho do seu dispositivo, normalmente arquivos JS de dezenas de KB a vários MB podem ser processados corretamente, o JS de um arquivo único de projetos comuns é completamente suficiente. Se é um arquivo JS empacotado especialmente grande (dezenas de MB) pode ficar lento ou até ficar sem memória, esses arquivos super grandes recomenda-se processar localmente com linha de comando Node.js+Prettier/Terser. O tamanho de arquivos fonte individuais no desenvolvimento diário normalmente está dentro do intervalo de processamento.

Por que ao pressionar Ctrl+Shift+B no Chrome abre o administrador de favoritos?

Isto é um conflito com atalhos padrão do Chrome: Ctrl+Shift+B é o atalho do Chrome para mostrar/ocultar a barra de favoritos, os atalhos do navegador têm maior prioridade que os atalhos JS da página, por isso é interceptado pelo Chrome. Soluções: ① clique no botão de formatação para operar; ② se você é usuário de Mac use Cmd+Shift+B que não entra em conflito com o Chrome; ③ você pode modificar os atalhos do navegador nas configurações do Chrome; ④ você pode focar primeiro dentro do editor, em certos casos o foco do editor pode capturar o atalho. Se outros navegadores também tiverem conflitos de atalhos, você sempre pode operar através de botões.

Solução de Problemas

Erro de «parse sintático» ao formatar, não é possível formatar

O próprio código tem erros sintáticos: parênteses não correspondentes, strings não fechadas, palavras-chave faltantes, vírgulas sobrantes, etc., erros sintáticos fazem o parse AST falhar, repare primeiro os erros sintáticos Seleção incorreta de modo de linguagem: por exemplo código JSX/TSX selecionado como JavaScript, sintaxe de genéricos é confundida com tags JSX ou vice-versa, selecione manualmente o tipo de linguagem correto Inclui sintaxe experimental: o código usa propostas de sintaxe JavaScript muito novas que ainda não são padrão (como decorators, operador Pipeline), o parser não as suporta O arquivo tem BOM: os três bytes UTF-8 BOM (EF BB BF) no início, certos parsers podem não processá-los, tente salvar como UTF-8 sem BOM Mistura código de outras linguagens: por exemplo linguagens de template embutidas em HTML (EJS, Handlebars, diretivas de template Vue) não são JS/HTML puro, o parser não as reconhece Comentários de bloco não fechados no código: /* sem seu */ correspondente, o comentário não fechado faz com que todo o código posterior seja tratado como comentário Ambiguidade de expressões regulares: certos locais que parecem divisão/operadores são na verdade literais de regex, o parser se engana, você pode adicionar ponto e vírgula antes da regex para eliminar ambiguidade

Erro ao comprimir (Minify), não é possível comprimir

Erro sintático do código: assim como na formatação, a compressão também é baseada em AST, o código deve ser sintaticamente correto para comprimir, repare primeiro os erros sintáticos Usa import/export de ES Module mas não marcou corretamente o tipo de módulo, ou a configuração de compressão não coincide com o tipo de módulo Problemas ao mangle nomes de propriedades: se ativou mangle de propriedades (não ativado por padrão), acesso dinâmico a propriedades obj['key'] fará com que propriedades não sejam encontradas, não ative mangle de propriedades sem cuidado O código tem eval() ou sentença with: Terser pode falhar no mangle quando encontra eval/with, porque eval pode acessar dinamicamente nomes de variáveis no escopo, evite eval em código de produção Erro na configuração de nomes reservados: se você configurou mangle.reserved mas com erros de escrita ou esqueceu nomes que devem ser preservados (como bibliotecas globais jQuery, $, etc.), pode causar erros em runtime Problema de configuração de compressão toplevel: se seu código executa em escopo global em vez de estar empacotado em IIFE/módulo, ativar compress.toplevel: true pode quebrar referências a variáveis globais Configuração de versão de navegador alvo muito antiga: Terser pode usar sintaxe não suportada pelo navegador alvo ao comprimir, você pode configurar a versão ecma para especificar a versão de sintaxe JS de saída

Caracteres chineses/comentários chineses aparecem distorcidos após formatação

A codificação do arquivo não é UTF-8: o arquivo local carregado está em codificação chinesa como GBK/GB2312, a ferramenta interpreta por padrão como UTF-8 causando distorção, use um editor para salvar novamente o arquivo em codificação UTF-8 antes de carregar A codificação da página do navegador foi modificada acidentalmente: embora navegadores modernos usem UTF-8 por padrão, certos navegadores antigos ou configurações especiais podem ter codificação incorreta, verifique a configuração de codificação de página no menu do navegador e configure para UTF-8 O arquivo tem BOM UTF-8: embora BOM normalmente não cause distorção, certos parsers processam BOM de forma anômala, você pode usar um editor para remover BOM e salvar como UTF-8 sem BOM Problema de conversão de codificação ao copiar e colar: ao copiar código de software antigo (como Bloco de Notas antigo, Word), caracteres especiais (como aspas chinesas, espaços de largura total) podem ser convertidos erroneamente, tente copiar de editores modernos como VS Code Problema de fonte: certas fontes monoespaçadas têm mau suporte para chinês causando exibição anômala, isto não é problema de codificação, é apenas problema de fonte de exibição, mude para uma fonte monoespaçada que suporte chinês Caracteres Unicode especiais: o código contém emoji, espaços de largura zero, caracteres de controle e outros caracteres invisíveis especiais que podem causar exibição anômala ou erros de formatação, você pode ativar a exibição de caracteres invisíveis no editor para verificar Problema de compressão gzip ou proxy: se aparecer distorção ao acessar após deploy, verifique que o servidor configure corretamente o cabeçalho de resposta Content-Type: application/javascript; charset=utf-8

A formatação de código JSX/TSX falha ou há erro de parse

O modo de linguagem selecionado é JavaScript em vez de JSX/TSX: o parser JS comum não reconhece sintaxe de <tag>, interpretará tags JSX como operadores de comparação e reportará erro, selecione manualmente linguagem JSX ou TSX Ambiguidade de sintaxe genérica TSX: o parâmetro genérico <T> em TSX pode ser confundido com tag JSX, como const f = <T>(x: T) => x, você pode adicionar uma vírgula após <T> como <T,> para eliminar ambiguidade (esta é a escrita comum em TSX) Tags JSX não fechadas: JSX requer que todas as tags sejam fechadas corretamente, tags autofechadas devem ter />, diferentemente de HTML, <img> deve ser escrito <img/> Problema de parênteses em expressões JS em JSX: expressões JS dentro de {} devem ser fechadas corretamente, se {obj.prop} não tem } causará desordem de parse posterior Problema de sintaxe curta de Fragment: a tag vazia <></> requer suporte de React 16+ e deve ser fechada corretamente; se usar <Fragment> deve importá-lo corretamente Problema de aspas em valores de atributos JSX: valores de atributos JSX se são strings devem usar aspas (duplas), se são expressões usam {}, não misture A extensão do arquivo TSX é .ts em vez de .tsx: o parser de TypeScript só habilita parse JSX com extensão .tsx, se usar extensão .ts para escrever JSX reportará erro, use a extensão correta

A indentação após formatação está incorreta, não coincide com o esperado

Configuração incorreta de tabWidth: verifique se a configuração de largura de indentação é 2 ou 4, equipes comumente usam 2 espaços, se você espera 4 espaços precisa ajustar manualmente a opção tabWidth Configuração incorreta de useTabs: se a equipe usa indentação Tab mas você configurou espaços ou vice-versa, verifique se a opção useTabs está correta O próprio código tem erros sintáticos: erros sintáticos causam estrutura AST anômala, a indentação formatada ficará desordenada, repare primeiro os erros sintáticos indicados pelas linhas onduladas vermelhas Mistura de Tab e espaços: o código original tem indentação Tab em alguns lugares e espaços em outros, a formatação unificará ao estilo configurado, mas se a desordem original for muito grave pode requerer formatação múltipla printWidth configurado muito pequeno: se a largura de linha for muito pequena (como 40), o código quebrará linha frequentemente parecendo indentação desordenada, configurar 80 ou 100 é mais adequado Opções de formato como bracketSameLine/arrowParens não coincidem com o esperado: a posição de chaves, parênteses de arrow functions e outros estilos são determinados pela configuração, não é problema de indentação, ajuste as opções correspondentes Conflito entre EditorConfig e configuração do editor local: se seu editor local usa .editorconfig para configurar indentação automaticamente, difere das opções configuradas na web, os resultados de formatação em ambos os lados serão inconsistentes, unifique a configuração

Os atalhos de teclado não funcionam, não acontece nada ao pressioná-los

O foco não está no editor: os atalhos só funcionam quando o editor tem o foco, se o foco está em botões, campos de entrada ou outras partes da página os atalhos não são acionados, clique primeiro na área do editor para focar Conflito com atalhos do navegador: certos atalhos (como Ctrl+Shift+B no Chrome abre a barra de favoritos, Ctrl+Shift+O no Firefox abre o histórico) estão ocupados pelo navegador, você pode clicar em botões para operar, ou usar Cmd em vez de Ctrl (Mac) para testar Problema de método de entrada: sob método de entrada chinês certos atalhos podem ser interceptados, mude para método de entrada em inglês e teste os atalhos Outras extensões/plugins ocupam os atalhos: extensões de atalhos instaladas no navegador, scripts Tampermonkey, plugins de proxy podem ocupar atalhos, tente abrir a página em modo incógnito Conflito com atalhos do sistema: o sistema operacional ou outro software em execução (como software de captura, métodos de entrada, IDE) têm atalhos globais que ocupam essa combinação de teclas, você pode modificar atalhos de outro software ou usar os botões desta ferramenta Diferenças de teclado Mac/Windows: note que Mac usa tecla Cmd (⌘), Windows/Linux usam tecla Ctrl, não misture; Option no Mac corresponde a Alt no Windows Restrições de segurança do navegador: certos atalhos relacionados a acesso a arquivos podem estar limitados por políticas de segurança do navegador, não podem ser simulados completamente por JS, se necessário clique diretamente no botão correspondente

Glossário

Prettier: A ferramenta de formatação de código frontend mais popular atualmente, adota filosofia de design Opinionated, suporta múltiplas linguagens como JS/TS/CSS/HTML/Markdown, unifica obrigatoriamente o estilo de código e acaba com as discussões de estilo em equipe.
Terser: Ferramenta moderna de compressão JavaScript, é o fork compatível com ES6+ do UglifyJS, suporta compressão e ofuscação de sintaxe ES6+, é o compressor padrão de ferramentas de build modernas como Webpack, Rollup, Vite.
UglifyJS: Ferramenta clássica de compressão JavaScript, predecessora do Terser, mas só suporta sintaxe ES5 e anteriores, não suporta novas características ES6+, atualmente em projetos novos usa-se geralmente Terser em seu lugar.
AST (Abstract Syntax Tree): Árvore Sintática Abstrata, representação em forma de árvore da estrutura sintática do código fonte, cada nó representa uma estrutura sintática no código. Babel, Prettier, Terser, ESLint e outras ferramentas são implementadas baseadas em AST.
ESLint: A ferramenta de linting mais popular no ecossistema JavaScript/TypeScript, é usada para encontrar problemas de qualidade de código e unificar estilo de código, pode ser usada em conjunto com Prettier.
EditorConfig: Arquivo de configuração multiplataforma para unificar estilo de código entre editores, define configurações básicas como estilo de indentação, tamanho de indentação, quebras de linha, codificação, para que diferentes editores abram o mesmo projeto com comportamento consistente.
CodeMirror: Componente de editor de código no navegador, fornece funcionalidades de edição profissional como syntax highlighting, números de linha, correspondência de parênteses, code folding, cursores múltiplos, é uma das principais opções para editores de código web.
minify (compressão): Processo de minimizar o tamanho do código sem alterar sua lógica, através de remoção de espaços em branco, comentários, encurtamento de nomes de variáveis, otimizações de código, etc., usado em produção para melhorar velocidade de carregamento.
mangle (ofuscação): Passo durante a compressão que encurta nomes de variáveis, funções e parâmetros para caracteres individuais, reduz significativamente o tamanho do código e o torna mais difícil de ler, também chamado de ofuscação de nomes de variáveis.
beautify (embelezamento): Ou seja, formatação de código, reorganiza o código comprimido ou desorganizado com indentação, quebras de linha e espaços para melhorar legibilidade, oposto a minify.
trailing comma (vírgula final): Vírgula após o último elemento em objetos, arrays e parâmetros de função, facilita que Git diff seja mais limpo ao adicionar elementos, suportado em ambientes ES5+.
arrow parens (parênteses em arrow functions): Se parâmetros de arrow functions de um único parâmetro precisam ser envolvidos em parênteses, como x => x (sem parênteses) vs (x) => x (com parênteses).
printWidth (largura de linha): Número de caracteres por linha após o qual há quebra de linha automática ao formatar, Prettier por padrão 80 caracteres, equipes podem ajustar para 100 ou 120 conforme o tamanho do monitor.
semicolons (ponto e vírgula): Se adicionar ponto e vírgula no final de sentenças JavaScript, JS tem mecanismo de inserção automática ASI, mas na maioria dos cenários ainda se recomenda usar ponto e vírgula para evitar surpresas.
single quote (aspas simples): Se usar aspas simples ou duplas para strings, em JS são funcionalmente equivalentes é apenas preferência de estilo, a especificação JSON obriga aspas duplas.
double quote (aspas duplas): Usar aspas duplas para envolver strings, é o estilo padrão de muitas linguagens e também o formato de string requerido pela especificação JSON.
tab width (largura de indentação): Número de espaços por nível de indentação, a comunidade frontend usa comumente 2 espaços, linguagens backend 4 espaços.
BOM (Byte Order Mark): Marca de ordem de byte, três bytes EF BB BF que podem aparecer no início de arquivos codificados UTF-8, usados para marcar codificação, em certos cenários podem causar erros de parse JS.
UTF-8: Formato de transformação Unicode de 8 bits, atualmente a codificação de arquivo padrão para Web e projetos frontend, suporta todos os caracteres Unicode, é a codificação recomendada por padrão.
source map (mapa de origem): Arquivo que mapeia código comprimido/transpilado de volta às posições originais do código fonte, usado para depuração em produção, quando o código comprimido reporta erros pode localizar o número de linha no fonte.

Tabela de referência de opções core do Prettier

Nome da opção	Função	Valores disponíveis	Valor padrão	Descrição
`tabWidth`	Largura de indentação (número de espaços)	`2, 4, 8`	`2`	Tem efeito quando useTabs é false, frontend comumente usa 2 espaços
`useTabs`	Usar tabulações Tab para indentar	`true/false`	`false`	true usa Tab, false usa espaços
`printWidth`	Limite de largura de linha (caracteres)	`80, 100, 120`	`80`	Quebra de linha automática ao exceder a largura, não é limite estrito
`semi`	Adicionar ponto e vírgula no final de sentenças	`true/false`	`true`	false só adiciona ponto e vírgula onde ASI pode falhar
`singleQuote`	Usar aspas simples	`true/false`	`false`	true aspas simples, false aspas duplas, atributos JSX sempre duplas
`trailingComma`	Modo de vírgula final	`none, es5, all`	`all (v3+)`	none sem vírgula final, es5 adiciona em objetos/arrays, all também em parâmetros de função
`arrowParens`	Parênteses em parâmetro único de arrow functions	`avoid, always`	`always (v2+)`	avoid omite parênteses para parâmetro único, always sempre com parênteses
`bracketSpacing`	Espaços dentro de chaves de objetos	`true/false`	`true`	true: { a: 1 }, false: {a: 1}
`bracketSameLine`	Posição de parêntese de fechamento HTML/JSX	`true/false`	`false`	true parêntese de fechamento no final da última linha, false em linha separada
`vueIndentScriptAndStyle`	Indentação de script/style em arquivos Vue	`true/false`	`false`	Se indentar código dentro de tags script e style em Vue SFC

Exemplo comparativo antes e depois da compressão de código JavaScript

Otimização	Código formatado (versão desenvolvimento)	Código comprimido (versão produção)	Porcentagem de redução
Espaços e quebras de linha	`function add(a, b) { return a + b; }`	`function add(n,d){return n+d}`	~60%
Remoção de comentários	`// Calcula soma de dois números function add(a,b){return a+b}`	`function add(n,d){return n+d}`	~20%
Mangle de variáveis locais	`function calculateTotal(price, quantity){const tax=0.1;return pricequantity(1+tax)}`	`function n(n,t){const e=0.1;return nt(1+e)}`	~40%
Dobra de constantes	`const x = 2 * 3 + 4; console.log(x);`	`console.log(10);`	~50%
Simplificação booleana	`if (x === true) { doThing(); }`	`if(x)doThing();`	~30%
Exemplo completo (múltiplas otimizações)	`function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return firstName + ' ' + lastName; }`	`function n(n){return n.firstName+' '+n.lastName}`	~70%

Tabela rápida de atalhos de teclado

Atalho (Win/Linux)	Atalho (Mac)	Descrição da função	Frequência de uso
`Ctrl+Shift+B`	`Cmd+Shift+B`	Executar formatação/embelezamento	★★★★★
`Ctrl+Shift+M`	`Cmd+Shift+M`	Alternar modo formatação/compressão	★★★★
`Ctrl+Shift+O`	`Cmd+Shift+O`	Abrir arquivo local	★★★★
`Ctrl+Shift+D`	`Cmd+Shift+D`	Baixar arquivo processado	★★★★★
`Ctrl+Shift+K`	`Cmd+Shift+K`	Limpar conteúdo do editor	★★★
`Ctrl+S`	`Cmd+S`	Baixar (salvar) arquivo	★★★★
`Ctrl+F / Ctrl+H`	`Cmd+F / Cmd+H`	Buscar / Buscar e substituir	★★★★
`Ctrl+Z / Ctrl+Y`	`Cmd+Z / Cmd+Shift+Z`	Desfazer / Refazer	★★★★★
`Ctrl+/`	`Cmd+/`	Alternar comentário de linha	★★★
`Tab / Shift+Tab`	`Tab / Shift+Tab`	Aumentar indentação / Diminuir indentação (com seleção)	★★★★
`Alt+clique`	`Option+clique`	Adicionar cursores múltiplos	★★★
`Ctrl+D`	`Cmd+D`	Selecionar próxima palavra igual	★★★
`Home / End`	`Cmd+← / Cmd+→`	Início / Fim de linha	★★★★
`Ctrl+Home/End`	`Cmd+↑ / Cmd+↓`	Início / Final do arquivo	★★★