Como utilizar o ESLint

Vamos iniciar instalando o ESLint em nosso projeto. Se você estiver usando NPM npm init @eslint/config

Se você estiver usando YARN yarn init @eslint/config

Se você estiver usando PNPM pnpm init @eslint/config

Os comandos acima fornecem uma instalação rápida.

Também é possível instalar utilizando o comando install ou i

No exemplo abaixo estou instalando o ESLint junto com as configurações @rocketseat .

PNPM: pnpm add eslint @rocketseat/eslint-config

Após a instalação

Caso você tenha feito a instalação através do Yarn ou npm, é bem provável que o arquivo .eslintrc tenha sido criado na raiz da sua aplicação.

Caso não tenha, criaremos manualmente este arquivo.

O arquivo .eslintrc suporta formatos

{
 .js,
 .json, 
 .yaml
}

Abaixo utilizaremos .eslintrc.json .

Com o arquivo .eslintrc.json criado, utilizamos as seguintes configurações:

{
  "env": {
      "browser": true,
      "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
      "ecmaVersion": "latest",
      "sourceType": "module"
  },
}

Caso você tenha criado o arquivo {.js}

module.exports = {
  "env": {
      "browser": true,
      "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
      "ecmaVersion": "latest",
      "sourceType": "module"
  },
}

Como optei por utilizar a configuração da @rocketseat então precisamos passar algumas configurações.

Em

{"extends": }

Passaremos o valor:

{"extends": ["@rocketseat/eslint-config/node"]}

Mas de onde veio esta configuração?

Após a instalação do pacote @rocketseat/eslint-config podemos olhar dentro de nossa pasta node_modules/

. <-- nossa pasta raiz
  ├── node_modules/
      └── @rocketseat
          ├── next.js
          ├── node.js
          ├── react.js
          ├── Readme.md

Navegando entre os diretórios, encontramos a estrutura de pastas acima contendo 3 arquivos next.js, node.js, react.js

Estes arquivos é o que chamaremos em @rocketseat/eslint-config/{'o arquivo desejado'}

Caso fique em dúvida, você também encontra um README.MD que pode ajudar a entender melhor cada configuração.

configuração package.json

Em scripts adicionamos:

"lint": "eslint src --ext .ts --fix"

informando a "extensão dos arquivos" que queremos formatar

--ext .ts

caso tenha mais arquivos em sua aplicação pode-se adicionar em fileira ex: --ext .ts, .tsx, .js.

informando ao eslint que ele pode corrigir todos os erros que encontrar automaticamente

--fix

Por último, tenha sempre instalada a extensão: ESLint em seu VSCode