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.
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
Instagram: recitomartins
Fontes
- https://blog.logrocket.com/12-essential-eslint-rules-react
- https://bobbyhadz.com/blog/react-hooks-exhaustive-deps
- https://blog.cod3r.com.br/organizacao-e-padronizacao-com-eslint/
- https://eslint.org/
Agradecimentos
Top comments (0)