Configurando Linters e Formatters (Prettier/ESLint) no seu pipeline.

Introdução

O desenvolvimento de software moderno requer a implementação de práticas e ferramentas que garantam a qualidade, consistência e manutenibilidade do código. Nesse contexto, linters e formatters desempenham um papel crucial na padronização das diretrizes de codificação e melhoria da legibilidade do código-fonte.

Os linters são ferramentas capazes de analisar o código-fonte e identificar possíveis erros ou vulnerabilidades, fornecendo recomendações para melhorias. Já os formatters ajustam a estrutura do código de acordo com um conjunto de regras predefinidas, garantindo que o código tenha uma aparência consistente.

A integração dessas ferramentas no pipeline de desenvolvimento é essencial para manter a qualidade do código e evitar problemas futuros. Neste artigo, exploraremos como configurar linters e formatters (com foco em Prettier e ESLint) no seu pipeline de desenvolvimento, garantindo que suas aplicações sejam sempre eficientes, escaláveis e fáceis de manter. Ao final desta leitura, você será capaz de implementar essas ferramentas em seu próprio projeto, contribuindo para a melhoria da qualidade do código e da produtividade do seu time.

O que é e por que importa

Linters são ferramentas capazes de analisar o código-fonte em busca de possíveis erros ou vulnerabilidades, fornecendo recomendações para melhorias. Esse processo ocorre antes da execução do código, tornando-a uma ferramenta essencial na garantia da qualidade e manutenibilidade do código.

Os formatters, por outro lado, ajustam a estrutura do código de acordo com um conjunto de regras predefinidas, garantindo que o código tenha uma aparência consistente. Isso facilita a leitura e compreensão do código pelos desenvolvedores, além de evitar conflitos de estilo.

A importância da integração dessas ferramentas no pipeline de desenvolvimento reside em sua capacidade de prevenir problemas futuros, como erros de sintaxe, vulnerabilidades de segurança e complexidade excessiva do código. Além disso, linters e formatters ajudam a manter a consistência do código ao longo do tempo, tornando mais fácil a manutenção e atualização do projeto.

A integração dessas ferramentas é particularmente importante em projetos de desenvolvimento ágil, onde a velocidade e flexibilidade são fundamentais. Ao garantir que o código esteja sempre limpo, consistente e livre de erros, os desenvolvedores podem se concentrar na entrega de novas funcionalidades e melhorias sem preocupações com a qualidade do código.

Como funciona na prática

A integração de linters e formatters no pipeline de desenvolvimento é um processo que envolve várias etapas. Aqui estão os principais passos:

Configuração inicial: A configuração do linter e formatter começa com a escolha das regras e dos parâmetros que serão usados. Isso pode incluir a seleção de plugins específicos, o ajuste de níveis de severidade para erros e warnings, e a definição de padrões de código.
Integração ao pipeline: O próximo passo é integrar os linters e formatters ao pipeline de desenvolvimento. Isso pode ser feito através da utilização de ferramentas como npm ou yarn, que permitem executar comandos no momento do build ou deploy.
Execução dos linters: Os linters são então executados em todo o código-fonte, analisando cada arquivo e relatando possíveis erros e vulnerabilidades. Esse processo pode ser personalizado para atender às necessidades específicas do projeto.
Formatação do código: Em seguida, os formatters ajustam a estrutura do código de acordo com as regras predefinidas. Isso inclui a correção de identação, espaçamento e outros aspectos da aparência do código.
Integração com ferramentas CI/CD: A configuração dos linters e formatters pode ser integrada às ferramentas de Continuous Integration e Continuous Deployment (CI/CD), permitindo que os testes e a formatação sejam executados automaticamente durante o build ou deploy.
Monitoramento e ajuste contínuo: Por fim, é fundamental monitorar as saídas dos linters e ajustar a configuração conforme necessário. Isso pode incluir a revisão das regras de código, a atualização de plugins e a definição de novos padrões de estilo.

Exemplo real

Aqui está um exemplo de como configurar Linters e Formatters no seu pipeline utilizando ESLint, Prettier e npm:

// Arquivo `eslintrc.json`
{
  "plugins": ["prettier"],
  "extends": ["plugin:prettier/recommended", "eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module",
    "ecmaFeatures": {"jsx": true}
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

// Arquivo `package.json`
{
  "scripts": {
    "build": "npm run lint && npm run format && npm run test"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "eslint": "^7.24.0",
    "prettier": "^2.5.1",
    "npm-run-all": "^4.1.5"
  },
  "lint-staged": {
    "*.{js,jsx}": ["eslint --cache"]
  }
}

// Arquivo `.gitignore`
node_modules/
.eslint-cache
.prettierrc.json

// Script `format` no arquivo `package.json`
"scripts": {
  // ...
  "format": "prettier --write '**/*.js' && prettier --write '**/*.jsx'",
  // ...
}

Este exemplo demonstra como configurar ESLint e Prettier para verificar o código-fonte e ajustá-lo de acordo com as regras definidas. Além disso, também mostra como executar os scripts lint e format automaticamente durante a execução do comando npm run build.

Boas práticas

Utilize linters e formatters para todo o projeto

Certifique-se de que todos os arquivos no projeto estejam configurados para serem verificados pelos linters e formatters.

Defina regras consistentes

Estabeleça um conjunto de regras de código consistentes para todo o projeto, garantindo que todas as partes do time sigam as mesmas diretrizes.

Utilize plugins de linter avançados

Explorar os plugins de linter disponíveis para capturar problemas específicos e melhorar a qualidade do código.

Armadilhas comuns

Sobrecarga excessiva de regras

Evite definir um número excessivo de regras, pois isso pode tornar difícil manter o projeto atualizado e gerenciar diferentes cenários.

Falta de configuração personalizada

Certifique-se de que a configuração dos linters e formatters seja adequada para as necessidades do seu projeto, evitando a sobrecarga ou a subestimação das regras.

Omissão da revisão regular

Lembre-se de revisar regularmente as saídas dos linters e ajustar a configuração conforme necessário.

Conclusão

A configuração de linters e formatters é um passo crucial na garantia da qualidade e consistência do código no seu projeto. Ao seguir as boas práticas apresentadas, você pode estabelecer uma infraestrutura sólida que melhora a eficiência do seu time de desenvolvimento.

Para levar esses conhecimentos ao próximo nível, explore a configuração avançada dos linters e formatters, como a criação de regras personalizadas ou a integração com ferramentas de CI/CD. Além disso, é fundamental manter atualizado sobre as novidades nas ferramentas e plugins, garantindo que o seu projeto continue a beneficiar-se da evolução constante na área.

Ao adotar essas práticas e permanecer atento às melhorias contínuas, você pode garantir um código limpo, seguro e altamente manutenível, resultando em projetos de sucesso e colaboração eficaz entre os membros do seu time.

Referências

Fowler, M. Code Smells. Disponível em: <https://www.martinfowler.com/books/cs.html>. Acesso: 2024.
OWASP. Guia de Código Limpo. Disponível em: https://owasp.org/. Acesso: 2024.
Prettier Team. Prettier Documentation. Disponível em: <https://prettier.io/docs/>. Acesso: 2024.
eslint/eslint. ESLint Documentation. Disponível em: <https://eslint.org/docs/user-guide/configuring>. Acesso: 2024.
Kerievsky, J. Refatoração: Escolhendo o Melhor Código. Disponível em: https://refactoring.guru/. Acesso: 2024.
ThoughtWorks. Guia de Configuração de Linters e Formatters. Disponível em: <https://www.thoughtworks.com/>. Acesso: 2024.