O que é um linter? Entendendo o ESLint e sua importância para o código limpo

Quando vários desenvolvedores trabalham na mesma base de código, inconsistências de estilo e erros ocultos podem se acumular rapidamente.
É aí que entram os linters, que verificam automaticamente seu código em busca de possíveis problemas e impõem um estilo consistente em todo o projeto.

Neste artigo, vamos explorar o que é um linter, por que você deve usar um e por que o ESLint se tornou a ferramenta de referência no ecossistema JavaScript e TypeScript.

O que os linters detectam

Um linter analisa seu código e detecta várias categorias de problemas antes que causem erros ou inconsistências.

• Erros de sintaxe → Problemas que tornam o código inválido ou impedem sua execução. Exemplos:

  • Parênteses ou colchetes ausentes → if (user.isLoggedIn {
  • Strings não fechadas → console.log("Hello)
  • Instruções return ausentes ou no lugar errado.

• Problemas de qualidade do código → Padrões que não violam a sintaxe, mas podem causar erros de execução ou confusão. Exemplos:

  • Variáveis não utilizadas → Declarar const result = computeValue(); sem nunca usar result.
  • Código inalcançável → Ter instruções depois de um return.
  • Sombreamento de variáveis → Reutilizar o nome de uma variável de um escopo externo.

• Inconsistências de estilo → Diferenças de formatação e estilo que dificultam a leitura do código. Exemplos:

  • Pontos e vírgulas ausentes ou indentação inconsistente.
  • Usar "double quotes" em um arquivo e 'single quotes' em outro.
  • Misturar tabulações e espaços na indentação.

• Violações de boas práticas → Código que funciona tecnicamente, mas contraria os padrões recomendados. Exemplos:

  • Usar APIs obsoletas (por exemplo, ReactDOM.render() no React 18).
  • Usar var em vez de let ou const.
  • Chamar funções assíncronas sem await.
  • Usar == em vez de ===, o que pode causar erros sutis de coerção de tipos.

Linters como o ESLint vão além da detecção de erros, pois impõem convenções e evitam que maus hábitos cheguem ao seu repositório.

Por que usar um linter?

1. Detectar erros cedo

Os linters detectam problemas antes mesmo de sua aplicação ser executada.
Por exemplo, o ESLint pode avisar sobre uma variável não definida ou um await ausente em uma função assíncrona, economizando tempo de depuração depois.

2. Garantir consistência

Um linter impõe um estilo de programação unificado para toda a equipe, evitando debates desnecessários sobre tabulações ou espaços e sobre onde colocar vírgulas.

3. Melhorar a qualidade do código

Os linters incentivam um código mais limpo e fácil de manter ao alertar contra padrões complexos ou arriscados (como callbacks profundamente aninhados ou importações não utilizadas).

4. Integrar-se ao seu fluxo de trabalho

Eles são executados automaticamente no IDE, durante commits (por meio de hooks de pré-commit, como Husky) ou em pipelines de CI/CD, mantendo sua base de código limpa em cada etapa.

Foco no ESLint: o padrão para JavaScript e TypeScript

ESLint é o linter mais popular no ecossistema JavaScript e é amplamente usado em projetos React, Node.js e TypeScript.

🔧 Principais recursos

• Altamente configurável → Personalize cada regra de acordo com seu estilo.

• Ecossistema de plugins → Amplie os recursos com plugins da comunidade (por exemplo, React, Jest, segurança, acessibilidade).

• Suporte a TypeScript → Integração completa via @typescript-eslint.

• Regras com correção automática → Muitos problemas podem ser corrigidos automaticamente com:

  Copiar código

  npx eslint . --fix
  

• Integrações → Funciona com VS Code, WebStorm, GitHub Actions e quase todos os sistemas de CI.

Configurando o ESLint

Você pode configurar o ESLint em seu projeto com:

npx eslint --init

Se estiver usando ESLint v8.23 ou posterior, esse comando criará um arquivo Flat Config chamado eslint.config.mjs (em vez do formato antigo .eslintrc.json). Esse formato moderno usa módulos JavaScript e oferece melhor desempenho e clareza.

Aqui está um exemplo simples de configuração que você pode usar em um projeto Next.js + TypeScript:

// eslint.config.mjs
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import prettier from 'eslint-config-prettier'
import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat({ baseDirectory: import.meta.dirname })

export default [
  js.configs.recommended, // Core JavaScript best practices
  ...tseslint.configs.recommended, // TypeScript-specific linting
  ...compat.extends('next/core-web-vitals'), // Next.js and React recommendations
  prettier, // Avoid rule conflicts with Prettier
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    rules: {
      'no-console': ['warn', { allow: ['warn', 'error'] }],
      '@typescript-eslint/no-unused-vars': [
        'warn',
        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
      ],
      semi: ['error', 'always'],
    },
  },
]

Explicação

Vamos detalhar o que está acontecendo:

js.configs.recommended

Carrega as regras básicas recomendadas do ESLint, que abrangem problemas básicos de JavaScript, como:

• Variáveis não utilizadas
• Código inalcançável
• Instruções de retorno ausentes
• Erros de sintaxe

tseslint.configs.recommended

Adiciona regras que entendem TypeScript, detectando, por exemplo:

• Importações não utilizadas
• Uso incorreto de tipos
• Variáveis declaradas, mas nunca usadas, em arquivos .ts/.tsx

compat.extends('next/core-web-vitals')

Aplica regras de Next.js e React, incluindo:

• Boas práticas de acessibilidade (a11y)
• Verificações do uso de React Hooks
• Avisos de problemas de desempenho (como usar <img> em vez de <Image>)

prettier

Desativa regras de análise relacionadas à formatação que, de outra forma, entrariam em conflito com o Prettier.

rules

Ajustes personalizados específicos do projeto:

• 'no-console': ['warn'] → permite console.warn e console.error, mas avisa sobre outras chamadas de console.
• '@typescript-eslint/no-unused-vars' → avisa sobre variáveis ou parâmetros declarados, mas não usados (ignora os que começam com _).
• 'semi': ['error', 'always'] → exige o uso de pontos e vírgulas.

Essa configuração oferece:

• Análise de JavaScript + TypeScript confiável
• Boas práticas de Next.js incorporadas
• Compatibilidade automática com o Prettier
• Regras simples e claras que tornam sua base de código consistente, legível e livre de erros

Depois de criar esse arquivo, você pode analisar seu projeto com:

npm run lint

ou corrigir automaticamente os problemas que permitem correção:

npm run lint -- --fix

ESLint comparado a outros linters

Desde que o TSlint foi oficialmente descontinuado em favor do ESLint, quase todos os projetos modernos de JavaScript e TypeScript usam ESLint hoje.

Boas práticas para usar o ESLint

• Combine o ESLint com o Prettier para formatação automática do código.
• Adicione verificações do ESLint aos seus hooks de pré-commit do Git com Husky ou lint-staged.
• Execute-o no seu pipeline de CI para garantir a qualidade do código nas solicitações de pull.
• Você pode usar pacotes recomendados, como eslint-config-airbnb ou eslint-plugin-react

Conclusão

Os linters são essenciais para manter bases de código limpas, consistentes e livres de erros, especialmente em projetos colaborativos. Entre eles, o ESLint se destaca como a ferramenta mais flexível e poderosa para desenvolvedores JavaScript e TypeScript.

Seja trabalhando sozinho ou em uma grande equipe, adicionar o ESLint ao seu fluxo de trabalho garante que seu código permaneça profissional, legível e fácil de manter no longo prazo.

Quer ver o ESLint em ação? Consulte sua documentação oficial ou experimente adicioná-lo ao seu projeto com npx eslint --init.