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

Esses comandos 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 da Rocketseat:

Para PNPM:

pnpm add -D eslint @rocketseat/eslint-config

-D me permite instalar somente em ambiente de desenvolvimento.
Sendo assim, entendemos que a instalação não é um ponto critico para nosso projeto quando ele estiver em produção.

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 sido criado, podemos fazer isso manualmente.

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 são 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 no 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.

• Linkedin
• Github