Cinco Plugins ESLint Que Melhoram a Qualidade do Código

Você configurou o ESLint. Ele detecta variáveis não utilizadas e sinaliza pontos e vírgulas ausentes. Mas sua base de código ainda acumula bugs sutis, importações inconsistentes e problemas de acessibilidade que passam despercebidos na revisão de código. As regras padrão não são suficientes.

O ESLint 9 introduziu a configuração flat (eslint.config.js), substituindo o formato legado .eslintrc. Essa mudança simplifica a integração de plugins e torna a configuração mais previsível. Seja você tendo migrado ou ainda usando o formato antigo, os plugins certos transformam o ESLint de um verificador básico em uma verdadeira barreira de qualidade.

Aqui estão cinco plugins que abordam problemas reais em projetos frontend modernos—sem sobrecarregar suas ferramentas.

typescript-eslint: Linting com Reconhecimento de Tipos para Projetos TypeScript

O plugin @typescript-eslint traz o sistema de tipos do TypeScript para seu fluxo de trabalho de linting. Diferente de verificações básicas de sintaxe, regras com reconhecimento de tipos detectam problemas que requerem compreensão dos tipos do seu código.

Considere uma função que pode retornar null. O linting com reconhecimento de tipos sinaliza padrões de acesso inseguros que, de outra forma, erros de runtime revelariam em produção. Regras como no-floating-promises detectam declarações await esquecidas, e no-unnecessary-condition identifica ramificações de código morto.

Para bases de código maiores, o typescript-eslint oferece o Project Service, que melhora o desempenho reutilizando instâncias de programa do TypeScript entre arquivos. Isso importa ao fazer linting de milhares de arquivos em CI.

Na configuração flat, você importa o plugin diretamente e espalha suas configurações recomendadas. A configuração integra-se perfeitamente com o modelo flat-config do ESLint 9 ao usar o toolchain padrão do typescript-eslint.

eslint-plugin-import: Higiene de Módulos e Organização de Importações

O eslint-plugin-import previne o caos que se acumula em declarações de importação em uma base de código crescente.

O plugin detecta caminhos com erros de digitação antes do runtime, garante que importações nomeadas correspondam às exportações reais e sinaliza dependências circulares que causam bugs sutis. Sua regra no-extraneous-dependencies previne a importação de pacotes não listados no package.json—uma fonte comum de falhas de implantação.

A regra import/order impõe agrupamento consistente: pacotes externos primeiro, depois módulos internos, depois importações relativas. Essa consistência torna os arquivos escaneáveis e os diffs mais limpos durante a revisão de código.

Para equipes, este plugin elimina debates de estilo sobre organização de importações. Configure uma vez, e o auto-fix cuida do resto.

eslint-plugin-unicorn: Prevenção de Bugs com Opinião

O eslint-plugin-unicorn fornece mais de 100 regras que detectam problemas sutis e impõem padrões modernos de JavaScript.

Ele sinaliza Array.forEach quando for...of seria mais claro. Detecta new Array(5) quando você quis dizer Array.from({ length: 5 }). Previne chamadas process.exit() que pulam manipuladores de limpeza.

O plugin incentiva sintaxe moderna: preferindo Array.includes() em vez de indexOf() !== -1, sugerindo String.replaceAll() em vez de regex com flags globais, e sinalizando métodos Number desatualizados.

Nem toda regra se encaixa em toda equipe. Comece com o preset recomendado, depois desabilite regras que conflitam com as convenções da sua base de código.

eslint-plugin-jsx-a11y: Linting de Acessibilidade JSX

O eslint-plugin-jsx-a11y detecta problemas de acessibilidade em JSX antes que cheguem aos usuários.

O plugin sinaliza imagens sem atributos alt, botões sem nomes acessíveis e inputs de formulário sem labels. Detecta uso de autoFocus que interrompe a navegação por teclado e identifica manipuladores de clique em elementos não interativos.

Essas regras não garantem conformidade com WCAG—ferramentas automatizadas detectam aproximadamente 30% dos problemas de acessibilidade. Mas elas previnem os erros mais comuns e constroem consciência de acessibilidade no desenvolvimento diário.

Para equipes que entregam aplicações voltadas ao usuário, este plugin é essencial. Bugs de acessibilidade afetam usuários reais e carregam implicações legais em muitas jurisdições.

@eslint/css: Linting Além do JavaScript

O ESLint agora se estende além do JavaScript. O plugin @eslint/css traz análise estática para folhas de estilo, detectando erros de sintaxe e impondo convenções.

Similarmente, o html-eslint valida estrutura HTML, sinalizando IDs duplicados, atributos lang ausentes e aninhamento inválido.

Esses plugins importam para projetos com módulos CSS, templates HTML ou bibliotecas de componentes onde a qualidade da marcação afeta a renderização. Eles unificam seu fluxo de trabalho de linting sob uma única ferramenta em vez de exigir validadores separados.

Separação de Responsabilidades: Linting vs. Formatação

Um esclarecimento: ESLint lida com qualidade de código, não formatação. Deixe o Prettier gerenciar pontos e vírgulas, aspas e indentação. Use eslint-config-prettier para desabilitar regras do ESLint que conflitam com o Prettier, depois execute ambas as ferramentas separadamente.

Essa separação mantém sua configuração do ESLint focada em detectar bugs em vez de impor preferências de estilo.

Conclusão

Esses cinco plugins abordam problemas distintos: segurança de tipos, higiene de importações, padrões modernos, acessibilidade e linting entre linguagens. Adicione-os incrementalmente. Habilite presets recomendados primeiro, depois personalize regras conforme sua equipe identifica pontos de atrito.

O objetivo não é máxima rigidez—é detectar bugs reais antes que sejam enviados para produção.

Perguntas Frequentes

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.