Integração continua com Prettier + ESLint

Usando automação para fazer code reviews melhores

Artigo escrito originalmente por Duggie Mitchell (Continuous Integration with Prettier + ESLint — Traduzido com autorização da autora)

TL;DR

1. Seguir convenções e estilos são importantes para legitimidade do código e para encontrar bugs.
2. Podemos economizar muito tempo durante o code review garantindo que nosso código siga as convenções antes de enviar um pedido de mudança através da automação.
3. Estilos e erros são dois aspectos diferentes. Podemos configurar ferramentas para que cada um deles sejam atendidos:

Prettier para cuidar da formatação e fazer isto parecer legal.

Lynt para cuidar da qualidade do código para capturar erros e forçar boas práticas.

Husky e Lint-Staged para automagicamente cuidar dessas tarefas.

Code reviews proporcionam aos times de desenvolvimento oportunidades para mentoria e colaboração; eles permitem que os participantes compartilhem conhecimento, e ganhem uma compreensão mais profunda um do outro e do código.

Evidentemente, nosso time tem gasto o precioso tempo do code review pegando coisas triviais — como indentação, ponto e virgulas ou o uso de let ou, const — e há este estudo que descobriu que 20% dos comentários em code reviews são sobre estilos e boas práticas.

Podemos recuperar este tempo prevenindo os contribuidores de comitar códigos que vão contra as convenções através da automação.

Use o Prettier para forçar um estilo de código padrão

O Prettier torna simples a aplicação de um estilo consistente por meio da reformatação do seu código de acordo com sua preferência de estilos. Usando Prettier eliminando discussões em torno de coisas como tabs vs espaços, largura de caracteres, etc. Essa economia de tempo e energia pode ser reaproveitada para certificar se seu código funciona, e é legível sem muito esforço.

Prettier pode ser usado individualmente adicionando a extensão no Visual Studio Code. Para garantir que cada contribuidor tenha os mesmas regras de estilos aplicadas, sigas esses passos para rodar o Prettier através do terminal.

1. Instale o Prettier nas dependências de desenvolvimento.

yarn add prettier --dev --exact

2. Adicione o arquivo .prettierrc na raiz do seu projeto.

*Essas são as configurações padrões, qualquer opção omitida usará esses valores.

Use Lynt para verificar erros.

Se você tem escrito Javascript por um tempo, você pode estar familiarizado com o ESLint. Está é uma ferramenta que os desenvolvedores usam para analisar o código e encontrar erros de padrão, ou deixar você saber quando o seu código não segue um determinado guia de estilos.

O valor real no ESLint são as regras de não estilo que evitam erros comuns. Pode ser difícil conseguir que o ESLint e o Prettier trabalhem juntos, já que às vezes as regras de formatação deles conflitam entre si.

Lynt não opina sobre o estilo do código, então você pode contar com as melhores partes do ESLint para lidar com a checagem dos erros, e o Prettier se preocupa em lidar com o estilo.

1. Instalar Lynt

yarn add lynt --dev

2. Adicione este script para lynt em seu package.json:

Veja o uso na documentação.

Automatize essas tarefas com lint-staged e husky.

Finalmente, pode se tornar incomodo checar seu código manualmente antes de submeter seu pull requeste para revisão. Nós queremos que os desenvolvedores sejam capazes de realizar essas tarefas dentro do seu fluxo normal de trabalho, sem ter que pensar sobre isso.

As configurações acima para o Prettier e o Lynt podem ser executadas com uma ferramenta de pre-commit para reformatar arquivos no stage, e evita um commit caso o linter detecte algum potencial erro que precisa ser corrigido.

1. Instale o husky e o lint-staged

yarn add lint-staged husky --dev

2. Adicione essas configurações nos seus scripts do package.json:

Script lint-staged para executar o prettier e formatar arquivos no stage.

3. Adicione um hook ao seu pre-commit nos seus scripts do package.json:

Pre-commit hook nos scripts do package.json.

Agora, quando executarmos um git commit, os arquivos do stage vão ser formatados e o commit vai falhar quando o lint detectar algum erro.

Lynt prevenindo um commit com erro.

Finalizando…

Usando Lynt e Prettier juntos, fica mais fácil eliminar preocupações sobre estilo de código e detectar possíveis erros.

Quando automatizado como parte dos esforços da integração continua, seu time vai ver um aumento na consistência do código e detectar bugs depressa, sem precisar pensar sobre isso; permitindo que você foque menos em coisas triviais durante code reviews.

Sinta-se livre para comentar abaixo, compartilhe seus pensamentos e me pergunte qualquer coisa. 😺