Formatador JavaScript

O que o formatador JavaScript faz

Um código escrito por várias pessoas, copiado de um fórum ou tirado de um bundle minificado é difícil de ler. O espaçamento muda de uma linha para outra, cadeias longas saem da tela e callbacks aninhados perdem a forma. Um formatador reescreve o layout do código seguindo um único conjunto de regras, para você se concentrar no que ele faz.

Esta página roda o Prettier 3, um formatador de código aberto muito usado, direto no seu navegador. O parser de JavaScript só é baixado na primeira vez que você formata algo, e o seu código nunca sai da página.

Como usar

1. Cole JavaScript ou JSX na caixa da esquerda. Ele é formatado logo depois que você cola.
2. Ou clique em Abrir arquivo para carregar um arquivo .js, ou em Exemplo para ver um exemplo.
3. Escolha as opções:
   • Recuo: 2 espaços, 4 espaços ou tabulações.
   • Largura da linha: 80, 100, 120 ou 160 caracteres antes de a linha quebrar.
   • Vírgulas finais: Todas, ES5 ou Nenhuma.
   • Aspas simples: usar 'texto' em vez de "texto".
   • Ponto e vírgula: ligado acrescenta no fim das instruções, desligado remove onde for seguro.
4. Clique em Formatar ou use Ctrl+Enter.
5. Clique em Copiar, ou em Baixar para salvar um arquivo .js.

Depois da primeira execução, o resultado acompanha o que você digita, e mudar uma opção reformata na hora.

Antes e depois

Entrada minificada:

const total=items=>items.filter(i=>i.qty>0).reduce((sum,{price,qty})=>sum+price*qty,0);async function load(url){const res=await fetch(url);if(!res.ok){throw new Error('Request failed: '+res.status)}return res.json()}

Depois de Formatar com as opções padrão:

const total = (items) =>
  items
    .filter((i) => i.qty > 0)
    .reduce((sum, { price, qty }) => sum + price * qty, 0);
async function load(url) {
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error("Request failed: " + res.status);
  }
  return res.json();
}

O parâmetro da arrow function ganha parênteses, a cadeia de métodos é dividida em uma chamada por linha porque não cabe em 80 caracteres, e as aspas simples viram aspas duplas. Com a Largura da linha em 100, a mesma cadeia cabe em uma linha:

const total = (items) =>
  items.filter((i) => i.qty > 0).reduce((sum, { price, qty }) => sum + price * qty, 0);

Aspas, ponto e vírgula e vírgulas finais

Essas três opções resolvem a maioria das discussões de estilo das equipes.

Com Aspas simples ligado e Ponto e vírgula desligado:

const name = 'Ada'
let list = [1, 2, 3]

Vírgulas finais decide se o último item de uma lista ou objeto em várias linhas ganha uma vírgula. Todas, o padrão do Prettier, dá:

const user = {
  firstName: "Ada",
  lastName: "Lovelace",
  email: "[email protected]",
  role: "admin",
};

Nenhuma remove a última vírgula depois de "admin". As vírgulas finais deixam os diffs mais limpos, porque acrescentar um item muda uma linha só. ES5 coloca as vírgulas em arrays e objetos, mas não nos parâmetros de funções, para ambientes muito antigos.

JSX

Os componentes React também são formatados:

const App = () => (
  <div className="app">
    <h1>Hello</h1>
    <p>{name}</p>
  </div>
);

Erros de sintaxe

Se o código não puder ser analisado, o formatador para e diz onde. Para um objeto com uma vírgula faltando:

const a = {
  b: 1
  c: 2
};

a mensagem é Linha 3, coluna 3: Unexpected token, expected ",". Clique em Mostrar na entrada para ir até o ponto. Uma função sem a chave de fechamento dá Linha 3, coluna 1: Unexpected token, que aponta para o fim da entrada, onde o parser esperava uma }. O texto depois da posição vem do Prettier, em inglês.

O formatador não executa o seu código e não faz lint. Variáveis não usadas, nomes de funções errados e erros de lógica não são apontados.

Dicas

• Combine as opções uma vez e registre em um arquivo .prettierrc no projeto, para que os editores e esta página deem o mesmo resultado.
• Use o formatador antes de ler um código desconhecido. Um layout que segue a estrutura deixa os erros de aninhamento fáceis de ver.
• Para código com anotações de tipo, use o formatador TypeScript. O parser de JavaScript para no primeiro : string.
• Para dados em vez de código, o formatador JSON é mais rigoroso e também valida.
• Strings e comentários em português, com acentos e cedilha, passam sem mudança. O formatador só mexe no layout.

Outras formas de formatar JavaScript

• VS Code: Formatar Documento (Shift+Alt+F no Windows, Shift+Option+F no macOS). Instale a extensão do Prettier e defina como formatador padrão para ter o mesmo resultado desta página.
• Linha de comando: npx prettier --write src/app.js, ou npx prettier --check . na integração contínua para fazer o build falhar quando houver arquivos sem formatar.
• Ferramentas de desenvolvedor do navegador: o botão de pretty print do painel Sources deixa os scripts minificados legíveis enquanto você depura.

Os scripts dentro de uma página HTML podem ser formatados junto com a marcação no formatador HTML.