📦 Instalação

Para instalar esta configuração 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:

   2.1 Para React

   import ReactConfig from "@prdev-solutions/eslint-config/react.mjs";
   
   export default [
     // ...
     ...ReactConfig
     // ...
   ];

   Você pode extender a configuração acima como bem entender.

   2.2 Para Node.js

   import NodeConfig from "@prdev-solutions/eslint-config/node.mjs";
   
   export default [
     // ...
     ...NodeConfig
     // ...
   ];

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

   const prettierConfig = require("@prdev-solutions/eslint-config/prettier.cjs");
   
   module.exports = {
     ...prettierConfig
   };

4. Adicione o script abaixo em seu package.json (opcional):

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

📄 Documentação

Este pacote fornece uma configuração de ESLint pronta para uso, especialmente útil em projetos que utilizam JavaScript/TypeScript e React. A configuração é altamente personalizável e inclui integrações com Prettier para garantir um código bem formatado e padronizado.

Tecnologias e Ferramentas

Principais bibliotecas e plugins integrados nesta configuração:

• TypeScript: Suporte a tipagem estática para JavaScript.
• Prettier: Formatação de código automática e consistente.
• ESLint: Linting para JavaScript/TypeScript.
• eslint-plugin-import: Regras para organizar imports/exportações.
• eslint-plugin-jsx-a11y: Regras para acessibilidade em JSX.
• eslint-plugin-react-hooks: Regras para garantir o uso correto de hooks em React.
• eslint-plugin-promise: Regras para trabalhar com promessas de forma segura.

ESLint - Configuração padrão

Por padrão os arquivos que serão ignorados pelo ESLint são estes:

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

Seguido por estas regras:

• prettierPlugin.configs.recommended.rules
• reactHooks.configs.recommended.rules
• jsxA11y.configs.recommended.rules
• importPlugin.configs.recommended.rules
• importPlugin.configs.typescript.rules
• promisePlugin.configs.recommended.rules

• no-explicit-any: off
• no-unused-vars: warm (porém é possível adicionar "_" caso queira evidenciar a variável não utilizada)
• prettier: error (caso não siga as configurações estabelecidas do prettier irá sinalizar erro)
• complexity: error - máx. 5 (Limita a complexidade ciclomática a 5)
• max-depth: error - máx. 3 (Limita a profundidade máxima de blocos aninhados a 3)
• no-magic-numbers: error - com exceção de números como [0, 1, -1]. Também possui como true ignoreArrayIndexes, ignoreDefaultValues, enforceConst e ignoreClassFieldInitialValues. Como false apenas detectObjects
• camelcase: error
• eqeqeq: error - always
• prefer-const: error
• no-fallthrough: error
• array-callback-return: error
• import/no-named-as-default: off

Prettier - Configuração padrão

module.exports = {
  trailingComma: "none",
  tabWidth: 2,
  semi: true,
  singleQuote: false,
  arrowParens: "avoid",
  bracketSpacing: true,
  endOfLine: "lf",
  useTabs: false,
  proseWrap: "never",
  printWidth: 120
};

🌐 Links