Como usar Eslint
Tags: eslint, webdev, javascript, beginners
Published: 2024-03-20 21:34:39

Aqui está o texto formatado para a plataforma DEV.to:

---

# Como utilizar o ESLint

Vamos iniciar instalando o ESLint em nosso projeto.

Se você estiver usando **NPM**: 
```bash
npm init @eslint/config
```

Se você estiver usando **YARN**: 
```bash
yarn init @eslint/config
```

Se você estiver usando **PNPM**: 
```bash
pnpm init @eslint/config
```

Esses comandos fornecem uma instalação rápida.

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

No exemplo abaixo, estou instalando o ESLint junto com as configurações da Rocketseat:

Para PNPM: 
```bash
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 
```json
{
 .js,
 .json, 
 .yaml
}
```

Abaixo utilizaremos `.eslintrc.json`.

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

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

Caso você tenha criado o arquivo `{.js}`:

```json
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 

```json
{"extends": }
```

Passaremos o valor:  

```json
{"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:

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

> Informando a "extensão dos arquivos" que queremos formatar:
>
> ```json
> --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
>
> ```json
> --fix
> ```

Por último, tenha sempre instalada a extensão [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) em seu VSCode.

+ [Linkedin](https://linkedin.com/in/rafaelcitario)
+ [Github](https://github.com/rafaelcitario)