ESLint

O ESLint é aquele colega chato que reclama de tudo, mas que no fundo só quer que o seu código seja perfeito.

O que é o ESLint (e por que ele existe)

O ESLint é uma ferramenta de análise estática de código, ou seja, ele lê seu código sem executá-lo, procurando erros, más práticas e inconsistências.

Ele nasceu com um propósito simples:

“Fazer com que todos os devs de um time escrevam código de forma consistente e previsível.”

Imagina um projeto com 20 devs, cada um com seu estilo:

um usa ;, outro não
um usa var, outro const
um nomeia função getUserData, outro pega_dados_do_usuario

💥 Sem o ESLint, o código vira um carnaval.
Com o ESLint, vira uma sinfonia coordenada.

Como o ESLint funciona

O ESLint funciona em três grandes etapas:

1. Parsing

O ESLint lê o seu código e o transforma em uma árvore sintática abstrata (AST — Abstract Syntax Tree).
Essa árvore representa a estrutura do código... cada variável, função, expressão, etc.

📘 Exemplo simples:

const name = "Amanda";

O ESLint converte isso em algo assim internamente:

VariableDeclaration
 └── Identifier (name)
 └── Literal ("Amanda")

Ou seja, ele “entende” a estrutura sem executar nada.

2. Aplicação das Regras (Rules Engine)

Depois, ele pega a lista de regras definidas (por você ou por um padrão) e começa a inspecionar a árvore.

Por exemplo:

Regra: "no-var" → proíbe o uso de var
Regra: "eqeqeq" → exige === em vez de ==
Regra: "no-console" → proíbe console.log

Se uma regra for violada, o ESLint gera um diagnóstico (warning ou error).

3. Report e Fix

Por fim, o ESLint mostra o relatório no terminal (ou no editor):

2:7  error  Unexpected console statement  no-console

E você pode corrigir automaticamente com:

npx eslint . --fix

O --fix aplica correções seguras (como trocar == por ===).

Por que o ESLint é tão poderoso?

O poder do ESLint vem de 3 coisas técnicas fundamentais:

1. AST (Abstract Syntax Tree)

A AST permite que o ESLint entenda o significado do código, não só o texto.
Por isso ele sabe a diferença entre:

a == b

if (a == b) doSomething();

Ele sabe onde e como algo está sendo usado.

2. Plugins e Configurações Extensíveis

O ESLint é totalmente modular.

Você pode criar suas próprias regras, ou usar pacotes prontos:

eslint-plugin-react
eslint-plugin-vue
@typescript-eslint/eslint-plugin
eslint-plugin-import
eslint-plugin-security

Cada plugin adiciona novas regras específicas para um ecossistema.

💡 Exemplo:

npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

E no .eslintrc:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]
}

Agora o ESLint entende TypeScript, tipos e tudo mais.

3. Configuração em camadas

Você pode estender múltiplos conjuntos de regras.

Exemplo:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ]
}

💬 É como montar uma pilha de segurança:

Base do ESLint
Regras do React
Regras do TypeScript
Regras do Prettier (para formatação)

Exemplo real (React + TypeScript)

ótima pergunta — e quase certo, mas tem um pequeno detalhe técnico 👇

vamos revisar linha por linha como o ESLint realmente reagiria nesse caso:

Seu código original:

function Button(props) {
  const [count, setCount] = useState(0)
  console.log("Renderizou")

  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

props não é usado
→ o ESLint (ou o TypeScript plugin) acusaria:
```
1:16  warning  'props' is defined but never used  no-unused-vars
```
💡 ou, se for TypeScript, a regra @typescript-eslint/no-unused-vars.

console.log("Renderizou")
→ o ESLint acusaria:

3:3  warning  Unexpected console statement  no-console

✅ Correção:

A versão corrigida ficaria assim:

function Button() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

E aí sim o ESLint ficaria 100% limpo.

Resumo:

Problema detectado	Regra	Está certo no seu exemplo?
`console.log`	✅ `no-console`	✔️ Certo
`props` não usado	✅ `no-unused-vars`	❌ faltou mencionar

ESLint + Prettier = Casamento perfeito

O ESLint garante qualidade lógica, o Prettier garante estilo visual.

Exemplo:

ESLint: “Você esqueceu um return.”
Prettier: “Você esqueceu um ponto e vírgula.”

Para integrar:

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

E no .eslintrc:

{
  "extends": ["plugin:prettier/recommended"]
}

Agora o ESLint roda o Prettier automaticamente e o seu código fica bonito e correto ao mesmo tempo.

Criando suas próprias regras personalizadas

Sim, você pode criar suas próprias regras!!

Por exemplo, uma regra que proíbe usar console.log (porque só logs estruturados são permitidos no projeto):

module.exports = {
  meta: {
    type: "problem",
    docs: { description: "Proíbe console.log" },
    fixable: null
  },
  create(context) {
    return {
      CallExpression(node) {
        if (node.callee.object?.name === "console" && node.callee.property.name === "log") {
          context.report({
            node,
            message: "Não use console.log. Use o logger da aplicação."
          })
        }
      }
    }
  }
}

Basta colocar isso em eslint/rules/no-console-log.js e registrar no seu .eslintrc.

Conceitos avançados que o ESLint usa internamente

Conceito	Descrição
AST Parsing	O ESLint usa o parser `espree` (baseado em `acorn`) para transformar o código em árvore.
Traversing	Ele percorre a árvore visitando cada nó — como se “caminhasse” pelo código.
Visitors	Cada regra define “visitantes” para tipos de nó (ex: `IfStatement`, `VariableDeclaration`).
Scope Analysis	Ele entende variáveis locais, globais e de bloco — assim pode avisar sobre variáveis não usadas.
Fixers	Pequenos patches que alteram o código automaticamente sem quebrar a lógica.
Formatter	Define o formato da saída no terminal (ex: “stylish”, “json”, “compact”).

Resumo técnico rápido

Área	O que o ESLint faz
Parsing	Gera AST com base no código
Analysis	Aplica regras sobre a AST
Reporting	Exibe erros e avisos
Fixing	Corrige automaticamente partes seguras
Extensibility	Permite regras, plugins e configs personalizadas
Performance	Cacheia resultados e roda incrementalmente

Dica prática pra ver o ESLint em ação

Crie um projeto simples:

npm init -y
npm i -D eslint
npx eslint --init

Quebre regras de propósito (coloque var, ==, console.log, etc).
Rode:
```
npx eslint . --fix
```
Veja ele corrigir tudo.
É como ver um robozinho arrumando sua bagunça.

Conclusão

O ESLint é mais que um linter, é uma infraestrutura de qualidade, que garante:

✅ Consistência
✅ Legibilidade
✅ Escalabilidade de time
✅ Segurança e boas práticas

Sem ele, o caos reina.
Com ele, o código canta

Amanda | Engenheira Frontend

segunda-feira, 10 de novembro de 2025