Gerador de ESLintrc

O que a configuração gerada contém

O gerador sempre parte de eslint:recommended e adiciona exatamente o que as suas seleções implicam:

• env com browser e/ou node, além de es2022
• @typescript-eslint/parser e plugin:@typescript-eslint/recommended quando o TypeScript está ativado
• plugin:react/recommended quando o React está ativado
• no-console e no-unused-vars definidas como warn

O resultado é um objeto JSON simples no formato clássico de .eslintrc.json, pronto para colar e ampliar com suas próprias regras.

Configuração plana vs legada

O ESLint 9 descontinuou o formato .eslintrc.* em favor da configuração plana (eslint.config.js). Principais diferenças:

Novos projetos devem usar configuração plana. Projetos existentes podem permanecer no legado através da linha 10.x, mas a migração é recomendada.

Ecossistema de plugins

Plugins típicos de projetos React/TS:

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier

Isso são seis pacotes para uma configuração moderadamente opinativa. O gerador adiciona os que você seleciona, então você instala apenas o que a configuração referencia.

Coexistência com Prettier

Prettier lida com formatação; ESLint lida com correção e estilo além da formatação. Para evitar conflitos:

1. Instale eslint-config-prettier e adicione-o como o ÚLTIMO item em suas extensões/configuração.
2. Ele desativa todas as regras do ESLint que entram em conflito com a saída do Prettier.
3. Execute o Prettier separadamente (ao salvar no editor, no hook de pré-commit, no CI).

Não use eslint-plugin-prettier em novos projetos; isso desacelera o ESLint ao executar o Prettier dentro do ESLint. Separe as duas ferramentas.

Dicas para ajuste de regras

• Comece solto, ajuste para mais rigor. Ative avisos antes de erros.
• Substitua para testes. Arquivos de teste frequentemente precisam de no-unused-expressions relaxado e globais do Jest disponíveis.
• Substitua para scripts. Scripts de construção podem precisar de globais do Node sem adicionar env: node globalmente.
• Documente substituições. Cada substituição de regra merece um comentário explicando o porquê.

Configuração que combina com seu editor

O VS Code precisa da extensão ESLint instalada e configurada. Adicione estas configurações ao seu workspace para correção automática ao salvar:

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}