Porquê você deveria usar Eslint no seu projecto React?
Published: 2022-09-02 19:03:16

O ESLint analisa seu código estaticamente para encontrar problemas rapidamente. Ele é integrado à maioria dos editores de texto e você pode executar o ESLint como parte de seu pipeline de integração contínua.

Saiba mais sobre Eslint [aqui](https://blog.cod3r.com.br/organizacao-e-padronizacao-com-eslint/).

Recentemente, entrei em um projecto onde **o "Eslint" é um ditador**. Ou seja, fazer truques (gambiarras) para tentar contornar um problema que você esteja enfrentando no código, se não estiver de acordo com as **regras do Eslint**, pode esquecer, porquê não vai bumbar (funcionar) e isso deixava meu colega e eu frustados de certo modo, pois, de certo modo, não estavamos acostumado a utilizar um **linter** de modo tão rigoroso como está sendo usado neste projecto. Do modo tradicional, quanto a identação de código, normalmente deixamos essa tarefa para o próprio **editor** (Vscode).

**Mas qual problema em deixar o editor cuidar da identação do código?**

O problema em deixar o editor cuidar disso, é que o seu editor não está configurado do mesmo modo que do seu colega ao lado que você está trabalhando no mesmo projecto, ou seja vocês têm **_configurações de editor diferentes_**, por padrão o meu Vscode identa usando **"TAB"**, o que equivale a 4 espaços, mas o que eu vejo muito é o editor usar 2 espaços para identação. Por essa diferença o Git irá sempre _detectar como se fosse uma nova mudança na base de código_, mas na verdade é só o editor do colega que está a identar daquela maneira e não é uma mudança realmente significativa.

É neste momento que o **Eslint se torna necessário**, pois ele irá **garantir (forçar)** que todos os desenvolvedores que estão a trabalhar no projecto tenham as **mesmas configurações nos seus editores e sigam a mesmas regras de escrita de código **(clean code) e evita deixar pedaços de códigos mortos (inúteis) na base de código principal e coisas como _console.logs_ irem em produção ou na **main** _(ela é sagrada, só código testado e bem escrito vai lá)._

> Usar Eslint ajuda a prevenir bugs comuns.

Abaixo deixarei algumas regras do Eslint que irão ajudar você a escrever código sólido para as suas aplicações React. **Let's go.**

**1. no-unused-vars**

Esta regra visa eliminar variáveis, funções e parâmetros de função não utilizados.

**2. react-hooks/exhaustive-deps**

A regra "_react-hooks/exhaustive-deps_" nos avisa quando temos uma **dependência ausente em um hook**, exemplo useEffect.

**3. space-before-blocks**

Aplique espaçamento consistente antes dos blocos de código.

> Mas para deixar o Eslint mais interessante e ajudar a escrever bem o seu código, recomendo usar plugins.

Abaixo alguns plugins que devo dizer **obrigatórios** para a configuração do seu Eslint.

**3.1 eslint-plugin-react**

Este plugin contêm aproxidamente 100 regras escrita até agora, que são especificações do próprio core do React. Ela faz uma cobertura geral de práticas do React e também de alguns problemas que foram relatadas para a sintaxe do JSX.

**3.2 eslint-jsx-a11y**

Este plugin (regra) verifca se a seu HTML segue ou viola alguma _**prática de acessiblidade**_ (a web deve ser pra todos né??).

**3.4 eslint-react-hooks**

Está regra força o seu componente seguir as (regras dos hooks)[https://reactjs.org/docs/hooks-rules.html] dos Hooks, quando estiver usando algum hook (como useEffect).


O Eslint é muito extenso e devo dizer que nem cobri nem 50% dele. Mais como sempre, abaixo deixo links para continuares os seus estudos :).

**Alguma sugestão ou correção? Deixa nos comentários. Obrigado por ler!.**

**LinkedIn: [Martins Gouveia](https://www.linkedin.com/in/martins-gouveia/)**
**Instagram: [recitomartins](https://www.instagram.com/recitomartins/)**

**Fontes**

1. [https://blog.logrocket.com/12-essential-eslint-rules-react](https://blog.logrocket.com/12-essential-eslint-rules-react)
2. [https://bobbyhadz.com/blog/react-hooks-exhaustive-deps](https://bobbyhadz.com/blog/react-hooks-exhaustive-deps)
3. [https://blog.cod3r.com.br/organizacao-e-padronizacao-com-eslint/](https://blog.cod3r.com.br/organizacao-e-padronizacao-com-eslint/)
4. [https://eslint.org/](https://eslint.org/)

**Agradecimentos**
- [Hélico André](https://www.linkedin.com/in/helcio-andre/)
- [Alberto Kambaia](https://www.linkedin.com/in/kambaia-alberto-756a62144/)
- [José da Silva](https://www.linkedin.com/in/jsilvap10/)
- [Kakidiako Alfonso](https://www.linkedin.com/in/kakidiako-afonso-498106129/)