ESLint é uma ferramenta extremamente importante para padronização de código e correção de inconsistência, ele faz isso com base em algumas regras definidas, se você errar na formatação o ESLint vai avisar, ele fica sublinhando os erros e apontando para você quando for necessário corrigir.
Para que serve o ESLint
Como Instalar
Instalando como Extensão
Eu estou utilizando o editor VSCode então basta você ir nas extensões e procurar por ESLint, no meu caso já está instalado mas a extensão é esta laranja que marquei aí com um traço vermelho.
Instalando pela CLI
1 – Rode o comando npx eslint –init, após rodar você será perguntado se você quer que o ESLint
- Verifique apenas a sintaxe
- Verifique a sintaxe e encontre os problemas – Escolhi esta
- Verifique a sintaxe, encontre os problemas e reforce o estilo do código.
2 – Após escolher, você será perguntado sobre qual estilo de módulos você está utilizando no projeto
- Módulos JavaScript (import/export) – Escolhi esta
- CommonJs (require/exports)
- Nenhum desses
3 – Agora dependendo da sua resposta, qual será o framework utilizado
- React – Escolhi este
- Vue.js
- Nenhum desses
4 – Vai utilizar typescript? Eu respondi que sim
5 – Como iremos rodar o código:
- Via Browser – Escolhi este
- Via Node
6 – Em qual formato iremos configuar o arquivo?
- JavaScript
- YAML
- JSON – Escolhi este
7 – E por último ele pergunta se você gostaria de instalar essa build com NPM eu coloquei não porquê estou utilizando Yarn, neste caso terei que instalar manualmente, mas se você estiver rodando o projeto com NPM basta dar yes.
8 – Agora eu vou instalar manualmente pois estou utilizando o yarn, e após negar ele vai mostrar isto.
9 – Observe acima
9.1 – Em vermelho ele diz que criou o arquivo .eslintrc.json
9.2 – Em laranja ele diz que eu terei que instalar na mão esses plugins aí, então vamos lá, isso pq escolhi instalar com yarn =/
10 – Instalando os plugins com yarn, basta rodar o comando yarn add –dev eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
11 – Pronto o seu ESLint foi instalado com sucesso, agora você poderrá personalizar ele completamente, vou deixar aqui a documentação ESLint, veja tambem que agora temos o arquivo de configuração criado e uma configuração padrão que vem nele
Como Personalizar
Para construir um ESLint a seu modo você deve ir na documentação com infomei acima, porém vou deixar a minha configuração para este projeto caso queiram utilizar.
Para instalar um plugin você vai na documentação e já vai ter o comando, tanto para yarn ou NPM, você escolhe é bem simples
Após instalar você vai ter que ir no arquivo de configuração do ESLint e adicionar o plugin lá e tambem as regras para aquele plugin que você instalou, isso tem tudo na documentação, mas vou te mostrar eu adicionando tanto o plugin quanto as regras, veja:
Agora aqui tem os plugins que eu instalei
E por fim se você não quiser instalar a extensão do ESLint no VSCode ou no editor de sua preferência, você tem que rodar o ESLint na mão toda vez que quiser que ele busque erros, para isso basta ir no terminal e digitar o comando eslint src, o src é o path que será analisado pelo eslint.
Caso você queira que ele fique analisando automaticamente sem rodar o comando na CLI, você deve instalar a extensão do ESLint no seu editor.
Lembrando que a configuração que fizemos acima para personalizar as regras e instalar os plugins ela deve ser feita independente de você instalar a extensão ou não no seu editor.
Agora sim veja meu código aqui =)