Package Exports

eslint-config-flowih-standard
eslint-config-flowih-standard/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (eslint-config-flowih-standard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`eslint-config-flowih-standard`

🚀 Visão Geral

Este pacote contém a configuração padrão de ESLint e Prettier para todos os projetos de Frontend (com Next.js) e Backend (com NestJS) da Flowih. Nosso objetivo é garantir a consistência do código, alta qualidade, legibilidade e conformidade com os princípios de Clean Architecture e SOLID em todo o nosso ecossistema de desenvolvimento.

Ao utilizar esta configuração, você automaticamente segue as melhores práticas da Flowih, facilitando a colaboração, a revisão de código e a manutenção dos nossos sistemas.

✨ Por que usar?

Consistência: Código com o mesmo estilo e formatação em todos os projetos, independentemente do desenvolvedor.
Qualidade: Ajuda a prevenir bugs comuns e antipadrões de código.
Manutenibilidade: Códigos mais limpos e legíveis são mais fáceis de entender e manter.
Padronização: Agiliza a integração de novos membros ao time e facilita a navegação entre diferentes projetos.
Foco Arquitetural: Regras pensadas para reforçar os princípios de Clean Architecture e SOLID.

📦 Instalação

Para usar esta configuração em seu projeto (seja ele Next.js ou NestJS), siga os passos abaixo:

1. Instale o Pacote de Configuração

Na raiz do seu projeto, execute o comando (use npm ou yarn):

npm install --save-dev eslint-config-flowih-standard
# ou
yarn add --dev eslint-config-flowih-standard

2. Instale as Dependências (`peerDependencies`)

Este pacote depende de outras ferramentas de linting e formatação para funcionar corretamente. Instale-as no seu projeto:

npm install --save-dev eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y
# ou
yarn add --dev eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

3. Crie ou Edite o Arquivo `.eslintrc.json`

Na raiz do seu projeto, crie (se não existir) ou edite o arquivo .eslintrc.json para estender a configuração da Flowih:

{
  "extends": ["flowih-standard"],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "overrides": [
    {
      "files": [
        "src/pages/**/*.tsx",
        "src/pages/**/*.ts",
        "src/app/**/*.tsx",
        "src/app/**/*.ts"
      ],
      "extends": ["plugin:@next/next/recommended"],
      "rules": {}
    },
    {
      "files": ["*.spec.ts", "*.test.ts", "*.test.tsx"],
      "env": {
        "jest": true,
        "node": true
      },
      "rules": {
        "no-console": "off",
        "@typescript-eslint/no-empty-function": "off"
      }
    }
  ],
  "rules": {
    // Exemplo:
    // "no-console": "error"
  }
}

4. Configure o `.prettierrc.json` (Opcional, mas Recomendado)

Crie um arquivo .prettierrc.json na raiz do seu projeto com o seguinte conteúdo:

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "arrowParens": "always",
  "endOfLine": "lf"
}

5. Adicione Scripts ao `package.json` do Projeto

Inclua os seguintes scripts no seu package.json:

"scripts": {
  "lint": "eslint "{src,apps,libs,test}/**/*.{ts,tsx}"",
  "lint:fix": "eslint "{src,apps,libs,test}/**/*.{ts,tsx}" --fix",
  "format": "prettier --write "{src,apps,libs,test}/**/*.{ts,tsx}""
}

6. Configure o VS Code (e Outras IDEs)

Para uma melhor experiência de desenvolvimento, configure seu VS Code para formatar e corrigir erros automaticamente ao salvar:

Instale as Extensões:

ESLint (Publisher: Dirk Baeumer)
Prettier - Code formatter (Publisher: Prettier)

Atualize seu settings.json:

Abra as configurações do VS Code (Ctrl+,), clique no ícone {} no canto superior direito e adicione:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

🧐 Entendendo as Regras do Linter (com Emojis)

🎨 Regras de Formatação (Prettier)

Regra	O que faz?	Por quê?
`prettier/prettier` ✨	Garante que o código siga um estilo consistente de formatação (aspas, tabs, etc.)	Evita discussões sobre estilo, melhora legibilidade e facilita revisões em equipe.

🧹 Qualidade e Prevenção de Bugs (ESLint)

Regra	O que faz?	Por quê?
`no-unused-vars` 🗑️	Impede variáveis, funções ou imports que nunca são utilizados.	Mantém o código limpo, reduz ruído e evita distrações com código morto.
`no-console` 🤫	Bloqueia o uso de `console.log`, `console.warn`, etc.	Evita vazamentos de informações e poluição do console em produção.
`eqeqeq` ⚖️	Exige o uso de `===` e `!==` ao invés de `==` e `!=`.	Previne bugs causados por coerção implícita de tipos, como `0 == false → true`.

🔷 TypeScript (@typescript-eslint)

Regra	O que faz?	Por quê?
`@typescript-eslint/no-explicit-any` 🚫	Proíbe o uso do tipo `any`.	Evita a perda de segurança da tipagem, força a definição de tipos mais claros e precisos.
`@typescript-eslint/explicit-function-return-type` 🎯	Exige que funções declarem seu tipo de retorno explicitamente.	Melhora a documentação automática e facilita entender o que a função entrega.
`@typescript-eslint/no-floating-promises` 📨	Obriga que Promises sejam tratadas com `await`, `.then()`, ou `.catch()`.	Garante que erros em Promises não passem despercebidos, evitando falhas silenciosas.

🔄 Imports (eslint-plugin-import)

Regra	O que faz?	Por quê?
`import/order` 🚦	Impõe uma ordem específica para os imports (e.g. bibliotecas externas primeiro).	Facilita a leitura e manutenção, evita agrupamentos caóticos de imports.
`import/no-cycle` 🔁	Impede que módulos tenham dependências circulares entre si.	Evita acoplamento excessivo e bugs difíceis de rastrear por loops de dependência.

⚛️ React e Hooks

Regra	O que faz?	Por quê?
`react-hooks/rules-of-hooks` ✅	Garante que hooks (`useState`, `useEffect`, etc.) sejam usados apenas no topo de componentes ou custom hooks.	Quebrar essa regra causa comportamento imprevisível — é fundamental para o React funcionar corretamente.
`react-hooks/exhaustive-deps` ⛓️	Verifica se todas as dependências estão listadas em `useEffect`, `useCallback`, etc.	Garante que o hook reaja corretamente às mudanças de estado/props. Evita bugs silenciosos.
`react/jsx-key` 🔑	Obriga a definir a prop `key` em elementos renderizados dentro de listas.	Melhora a performance do React e evita re-renderizações desnecessárias ou erradas.

Regra	O que faz?	Por quê?
`jsx-a11y/alt-text` 🖼️	Exige que imagens tenham o atributo `alt`.	Ajuda leitores de tela a descrever imagens para usuários com deficiência visual.
`jsx-a11y/click-events-have-key-events` ⌨️	Garante que elementos clicáveis também sejam navegáveis pelo teclado (com `Enter`, `Space`, etc.).	Promove acessibilidade para usuários que não usam mouse.

🤝 Colaboração e Contribuição

Este pacote é um esforço coletivo para manter a qualidade do código da Flowih. Se você tiver sugestões para novas regras, melhorias ou encontrar algum problema, por favor, abra uma issue ou envie um Pull Request no repositório do pacote.