ESLint + Plugins TypeScript para TypeScript: guia completo com exemplos

Introdução: O que são ESLint + Plugins TypeScript e para que servem?

No desenvolvimento web moderno, o TypeScript se tornou o padrão de facto para criar aplicações escaláveis e confiáveis. No entanto, mesmo o compilador TypeScript mais rigoroso não consegue capturar todos os erros lógicos, inconsistências estilísticas ou possíveis bugs que podem surgir durante a escrita do código. É aqui que entra o ESLint — um poderoso linter para JavaScript que, com a ajuda de plugins especiais, se adapta para funcionar com TypeScript.

ESLint + Plugins TypeScript não é uma biblioteca separada no sentido tradicional (como, por exemplo, Lodash), mas sim um ecossistema de ferramentas. O pacote principal — eslint — é responsável pela análise do código, enquanto os plugins @typescript-eslint/eslint-plugin e @typescript-eslint/parser adicionam suporte à sintaxe do TypeScript e fornecem centenas de regras específicas para TypeScript.

Para que serve isso?

\n
• Detecção de erros em estágios iniciais: O linter pode encontrar problemas potenciais que o compilador TypeScript ignoraria (por exemplo, variáveis não utilizadas, uso incorreto de promessas, problemas de tipo que não são sintáticos).
\n
• Estilo de código uniforme: Em uma equipe de desenvolvedores, o linter garante a conformidade com um estilo de código único (indentação, aspas, ponto e vírgula), tornando o código mais legível e previsível.
\n
• Correção automática: Muitas regras do ESLint suportam autocorreção (--fix), permitindo formatar o código automaticamente e corrigir erros simples.
\n
• Integração com IDE: A maioria dos editores de código modernos (VS Code, WebStorm) possui suporte integrado para ESLint, permitindo ver erros e avisos diretamente durante a escrita do código.
\n

No site pythonlib.ru, nos esforçamos para fornecer os guias mais úteis possíveis. Este artigo será seu guia de referência abrangente para configurar e usar o ESLint com TypeScript.

Instalação do ESLint e dos Plugins TypeScript

A instalação é feita através do gerenciador de pacotes npm (ou yarn, pnpm). Pressupõe-se que você já tenha um projeto com o arquivo package.json e o TypeScript (typescript) instalado.

Execute no terminal na raiz do seu projeto:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Vamos analisar o que instalamos:

\n
• eslint — o núcleo do linter.
\n
• @typescript-eslint/parser — o parser que permite ao ESLint entender a sintaxe do TypeScript (incluindo genéricos, decoradores, tipos, etc.).
\n
• @typescript-eslint/eslint-plugin — o plugin que contém um conjunto de regras específicas para TypeScript (por exemplo, @typescript-eslint/no-unused-vars em vez do padrão no-unused-vars).
\n

Adicionalmente (recomendado):

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Isso permitirá integrar o ESLint com o Prettier (formatador de código) e evitar conflitos entre eles.

Início rápido: configuração e primeira execução

Após a instalação, é necessário criar um arquivo de configuração. A maneira mais simples é gerá-lo usando o assistente integrado do ESLint:

npx eslint --init

Você responderá a algumas perguntas. Escolha:

\n
• Como você deseja usar o ESLint? — To check syntax, find problems, and enforce code style
\n
• Qual formato de módulo você está usando? — JavaScript modules (import/export)
\n
• Qual framework? — None of these