Deixe darem pitaco no seu código com Prettier

Code formatters são uma boa ideia. Acredite! Demorei a dar o braço a torcer, mas depois de alguns "Hello world" em Go admito que a ideia de ter um código bem formatado, sem necessitar da destreza do programador para isso, é uma ideia excelente.

Em Go temos o go fmt, que poupa um tempo absurdo tornando o seu código "go-like" com pouco esforço. Já para Javascript, temos o Prettier. E é sobre ele que falaremos nesse artigo.

Mais bonito

O Prettier é um code formatter livre (MIT) e de código aberto, que tem por finalidade "forçar" um padrão de código. Ele realiza isso analisando o seu código e alterando-o de acordo com regras pré-definidas.

Todos nós temos algum vício na forma como escrevemos nosso código. A ideia de ferramentas como o Prettier é fazer com que todos os integrantes de um projeto tenham um estilo comum de escrita. Tornando a leitura do código consistente, não importando o seu autor (ou editor).

Com "estilo comum de escrita" não estamos falando necessariamente de qualidade de código. Por exemplo, o Prettier não está preocupado com variáveis sendo usadas antes de serem declaradas. Para isso existe os linters, e no caso do Javascript o ESLint é (provavelmente) a opção mais famosa. Por outro lado, ele estará preocupado com a quantidade de espaços em branco, quantidade de caracteres por linha, uso de vírgulas, etc. Tópicos que geralmente demandam energia durante um code review.

E talvez esse seja o ponto marcante por trás do Prettier. Diretamente da página que fala sobre a filosofia da ferramenta:

By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles.

Na prática

A ferramenta é escrita em Node.js, portanto, um npm install é o suficiente para tê-la em seu ambiente:

$ npm install --global prettier

A documentação da ferramenta sugere "pinnar" a versão exata no package.json do seu projeto, uma vez que diferentes versões podem ter diferentes sugestões de escrita.

Com o utilitário de linha de comando, basta executarmos passando o arquivo JS desejado como parâmetro:

$ prettier file.js

function HelloWorld({
    greeting = "hello",
    greeted = '"World"',
    silent = false,
onMouseOver
}) {
    if (!greeting) {
        return null;
    }

    // TODO: Don't use random in render
    let num = Math.floor(Math.random() * 1e7)
        .toString()
        .replace(/\.\d+/gi, "");

    return (
        <div
        className="HelloWorld"
        title={`You are visitor number ${num}`}
        onMouseOver={onMouseOver}
        >
        <strong>
            {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
        </strong>
        {greeting.endsWith(",") ? (
            " "
        ) : (
            <span style={{ color: "grey" }}>", "</span>
        )}
        <em>{greeted}</em>
        {silent ? "." : "!"}
        </div>
    );
}

O output é o conteúdo do seu arquivo já formatado. Se quiser a alteração "in-place", temos a opção --write disponível.

É possível customizar a ferramenta de acordo com as suas escolhas passando argumentos durante sua chamada. No exemplo abaixo, queremos formatar o arquivo file.js sem semicolons no final das linhas, e com single quotes ao invés de double quotes:

$ prettier --no-semi --single-quote file.js

O mais recomendado é a criação de um arquivo de configuração (geralmente chamado de .prettierrc), com todas a regras explícitas:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Na prática (de verdade)

É inviável ir na linha de comando e executar a ferramenta toda a vez que você alterar o seu código. Uma opção mais eficiente é deixar com que o seu editor ou IDE tome conta desse processo.

Os principais editores do mercado possuem suporte ao Prettier, como pode ser visto em Editor Integration. Para o Vim, recomendo o uso com o plugin Ale.

É esperado que nem todo membro do seu projeto configurará o editor apropriadamente na primeira interação. Portanto, uma "salvaguarda" pode ser habilitar um pre-commit hook. Com isso, ao executar git add, o Prettier será executado automaticamente nos arquivos alterados pelo desenvolvedor. O capítulo Pre-commit Hook da documentação oficial dá várias sugestões de uso. Para esse caso, simpatizo bastante com o pre-commit.

ESLint vs Prettier? ESLint + Prettier!

Sabe o que é melhor que usar o Prettier? É usar o Prettier integrado com as regras que você já conhece do ESlint. Obviamente que executar os dois em paralelo pode resultar em comportamentos inesperados. Existe inúmeros tutoriais na internet recomendando como fazer essas duas ferramentas funcionarem em conjunto.

Recomendo o Integrating Prettier + ESLint + Airbnb Style Guide in VSCode, do Echobind.

Considerações finais

Não perca tempo tentando controlar "na conversa" o estilo de código do seu time ou projeto. Já passei por isso e não compensa o estresse e tempo investido. Adote uma ferramenta como o Prettier, e reserve tempo e energia para coisas mais importantes, relacionados ao seu negócio ou produto.

Até a próxima.

Referências

• Echobind - Integrating Prettier + ESLint + Airbnb Style Guide in VSCode
• Future Hosting - Prettier vs Eslint: What's the difference?
• Joshua Crass - Javascript Linting and Formatting with ESLint, Prettier, and Airbnb