Instalacao

Para instalar esta configuracao de ESLint em seu projeto, siga os passos abaixo:

1. Instale o pacote via npm:

npm install --save-dev eslint prettier @prdev-solutions/eslint-config

2. Crie ou atualize o arquivo eslint.config.mjs na raiz do seu projeto:

React (Vite)

import ReactConfig from "@prdev-solutions/eslint-config/react.mjs";

export default [...ReactConfig];

Next.js

import NextConfig from "@prdev-solutions/eslint-config/next.mjs";

export default [...NextConfig];

Node.js

import NodeConfig from "@prdev-solutions/eslint-config/node.mjs";

export default [...NodeConfig];

Voce pode extender a configuracao acima como bem entender.

3. Crie ou atualize o arquivo prettier.config.cjs na raiz do seu projeto:

const { reactPrettier } = require("@prdev-solutions/eslint-config/prettier.cjs");
// ou nodePrettier para projetos Node.js

module.exports = {
  ...reactPrettier
};

4. Adicione os scripts abaixo em seu package.json (opcional):

{
  "scripts": {
    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
    "prettier:check": "npx prettier --check .",
    "prettier:fix": "npx prettier --write ."
  }
}

Documentacao

Este pacote fornece configuracoes de ESLint prontas para uso em projetos JavaScript/TypeScript. Disponiveis para React, Next.js e Node.js.

Configuracoes Disponiveis

| Config | Uso | Plugins Inclusos | | ----------- | ------------ | --------------------------------------------------------------- | | react.mjs | React + Vite | react-hooks, react-refresh, jsx-a11y, import, promise, prettier | | next.mjs | Next.js | react-hooks, jsx-a11y, @next/next, import, promise, prettier | | node.mjs | Node.js | import, promise, prettier |

Arquivos Ignorados

Por padrao, os seguintes arquivos/pastas sao ignorados pelo ESLint:

ignores: [
  "dist",
  "__tests__",
  ".eslintrc.cjs",
  ".eslintrc.js",
  "node_modules",
  "settings*",
  "**/constants.*",
  "**/settings.*",
  "**/config.*",
  "*.config.*",
  "**/schema.ts"
];

Regras Principais

| Regra | Valor | Descricao | | ------------------------------------ | -------------- | ----------------------------------------------------------- | | @typescript-eslint/no-explicit-any | off | Permite uso de any | | @typescript-eslint/no-unused-vars | warn | Avisa sobre variaveis nao utilizadas (ignora _prefixadas) | | complexity | error (max 10) | Limita complexidade ciclomatica | | max-depth | error (max 3) | Limita profundidade de blocos aninhados | | camelcase | error | Exige camelCase | | eqeqeq | error (always) | Exige === e !== | | prefer-const | error | Prefere const quando possivel | | no-else-return | error | Evita else apos return | | no-fallthrough | error | Evita fallthrough em switch | | array-callback-return | error | Exige return em callbacks de array |

Prettier - Configuracao

{
  trailingComma: "none",
  tabWidth: 2,
  semi: true,
  singleQuote: false,
  arrowParens: "avoid",
  bracketSpacing: true,
  endOfLine: "lf",
  useTabs: false,
  proseWrap: "always",
  experimentalTernaries: true,
  printWidth: 120  // React/Next.js
  // printWidth: 80  // Node.js
}

Estrutura do Projeto

@prdev-solutions/eslint-config/
├── configs/
│   ├── base.mjs      # Configuracoes compartilhadas
│   ├── prettier.mjs  # Configuracao do Prettier (ESM)
│   ├── react.mjs     # Config React/Vite
│   ├── node.mjs      # Config Node.js
│   └── next.mjs      # Config Next.js
├── react.mjs         # Entry point React
├── node.mjs          # Entry point Node.js
├── next.mjs          # Entry point Next.js
└── prettier.cjs      # Export Prettier (CommonJS)

Links