Tooark ESLint config

Configuração compartilhada de ESLint para projetos Node, React, Angular e Vue.

Instalação

Instale o pacote junto com o ESLint (as demais dependências base são instaladas automaticamente):

npm i -D @tooark/eslint eslint

Depois adicione apenas o plugin do seu framework:

# Node
npm i -D eslint-plugin-n

# React
npm i -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

# Angular
npm i -D @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template

# Vue
npm i -D eslint-plugin-vue vue-eslint-parser

Se o projeto usa TypeScript, instale também: npm i -D typescript

Configuração

Crie o arquivo de configuração do ESLint e importe o preset desejado:

CommonJS (.eslintrc.cjs):

module.exports = require("@tooark/eslint").nodeConfig;

ESM (.eslintrc.js ou eslint.config.js):

import { node } from "@tooark/eslint";
export default node;

Troque node/nodeConfig pelo preset do seu framework:

| Framework | Named export | CommonJS export | | --------- | ------------ | --------------- | | Node | node | nodeConfig | | React | react | reactConfig | | Angular | angular | angularConfig | | Vue | vue | vueConfig |

Exemplos

// React
import { react } from "@tooark/eslint";
export default react;

// Angular
import { angular } from "@tooark/eslint";
export default angular;

// Vue
import { vue } from "@tooark/eslint";
export default vue;

O que vem incluído

Base (comum a todos os presets)

Extensões:

• eslint:recommended (preset do ESLint)
• @typescript-eslint/eslint-plugin (preset recommended e recommended-requiring-type-checking)
• eslint-plugin-import (presets errors, warnings, typescript)
• eslint-config-prettier e eslint-plugin-prettier (preset recommended)

Os nomes dos pacotes não possuem o prefixo plugin: ou recommended. O prefixo plugin: e o sufixo /recommended são usados apenas na configuração do ESLint, não no nome do pacote a ser instalado.

Regras principais:

| Regra | Descrição | | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | brace-style | Estilo "1tbs", chave de abertura na mesma linha | | consistent-return | Alerta para retornos inconsistentes em funções | | curly | Exige chaves em blocos multi-linha | | no-unused-vars | Desativada (substituída pela regra do TypeScript) | | @typescript-eslint/no-unused-vars | Reporta variáveis, argumentos e imports não utilizados | | prettier/prettier | Formatação: printWidth 120, tabWidth 2, singleQuote true, trailingComma all, arrowParens always, semi false, endOfLine auto |

Node

• eslint-plugin-n: adiciona boas práticas para Node.js(preset recommended)
• no-process-exit: impede uso direto de process.exit, prefira lançar erros ou retornar códigos de status
• no-sync: alerta para APIs síncronas do Node (ex: fs.readFileSync), prefira as versões assíncronas

React

• eslint-plugin-react: adiciona regras para componentes, state e props do React (preset recommended)
• eslint-plugin-react-hooks: adiciona regras para hooks do React (preset recommended)
• eslint-plugin-jsx-a11y: adiciona regras para acessibilidade em JSX (preset recommended)

Angular

• @angular-eslint/eslint-plugin: adiciona regras para componentes, diretivas e serviços do Angular (preset recommended)
• @angular-eslint/eslint-plugin-template: adiciona regras para templates inline do Angular (preset process-inline-templates)

Vue

• eslint-plugin-vue: adiciona regras para componentes, props, emits, etc (preset vue3-recommended)
• vue-eslint-parser: parser para arquivos .vue