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.
Top comments (0)