ESLint Configuration - Projeto React + TypeScript

Este projeto contém uma configuração personalizada do ESLint para projetos React utilizando TypeScript. Ele aplica boas práticas de desenvolvimento, padronização de estilo de código e integração com Prettier.

📦 Tecnologias e Plugins Utilizados

• ESLint – Linter principal para código JavaScript/TypeScript
• TypeScript ESLint (@typescript-eslint) – Suporte ao TypeScript
• Prettier (eslint-plugin-prettier) – Integração de formatação automática
• Promise Plugin (eslint-plugin-promise) – Melhora o uso de Promises
• React App Config (eslint-config-react-app) – Regras de linting padrão do Create React App

📁 Escopo de Arquivos

A configuração se aplica a todos os arquivos com as extensões:

.js, .jsx, .ts, .tsx

⚙️ Regras Personalizadas

🧹 Boas Práticas e Estilo

• eqeqeq: Uso obrigatório de === e !==
• prefer-const, prefer-arrow-callback: Sugestões de boas práticas
• no-console: Aviso para console.log
• no-unreachable, no-const-assign: Prevenção de erros comuns
• require-await, require-yield: Evita código assíncrono redundante
• padding-line-between-statements: Estilo de espaçamento entre blocos

🎯 Regras para TypeScript

• @typescript-eslint/no-unused-vars: Avisos para variáveis não utilizadas
• @typescript-eslint/naming-convention: Convenções de nomenclatura, incluindo:
  • camelCase para variáveis e parâmetros
  • PascalCase para tipos e interfaces
  • UPPER_CASE para enums

🛑 Restrições Específicas

• Importações restritas de react-router-dom :
• useSearchParams, useNavigate, Link, Navigate
• ✅ Devem ser importados de src/hooks/useNavigate.tsx
• Restrições de cores :
• 🚫 Evite valores hexadecimais, rgb() e rgba() diretamente no código
• ✅ Utilize as cores fornecidas pela uai-foundation

💡 Outros Detalhes

• ecmaVersion: 2020
• Suporte a módulos (sourceType: module)
• JSX habilitado (ecmaFeatures.jsx: true)

🛠️ Como Usar

1. Instale as dependências necessárias:

npm install eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-promise eslint-plugin-prettier eslint-config-react-app --save-dev

2. Salve este arquivo como .eslintrc.js na raiz do projeto.

3. Execute o ESLint:

npx eslint src --ext .js,.jsx,.ts,.tsx

✅ Objetivo

Garantir um código limpo, consistente e sustentável para times que utilizam React e TypeScript, com foco em produtividade e padronização de boas práticas.