Adicionando ESLint e Prettier a um projeto React criado com ViteJS
Tags: react, vitejs, eslint, prettier
Published: 2023-01-09 01:03:14

---
title: Adicionando ESLint e Prettier a um projeto React criado com ViteJS
published: true
description: Tutorial sobre como adicionar e configurar ESLint e Prettier a um projeto React criado com ViteJS
tags: react, vitejs, eslint, prettier
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wy1x1c69g6m8iuivc8i2.jpg
# published_at: 2023-01-08 23:10 +0000
---

Recentemente, eu resolvi experimentar o [ViteJS](https://vitejs.dev/guide/why.html) como alternativa ao Create React App. Embora o ViteJS já ofereça uma estrutura básica para um projeto React, o template recomendado na documentação não vem configurado com ESLint e Prettier.

Neste artigo, vamos passar brevemente pela instalação e configuração dessas duas ferramentas em um projeto React criado com ViteJS.

## Passo 1: instalar as dependências

Além do ESLint e do Prettier, vamos instalar as seguintes dependências:
- `@typescript-eslint/eslint-plugin`: plugin com regras para projetos com código TypeScript.
- `@typescript-eslint/parser`: um parser que permitirá ao ESLint fazer sugestões em código TypeScript.
- `eslint-config-prettier`: uma configuração para o ESLint que desabilita regras que serão gerenciadas pelo Prettier, evitando conflitos.
- `eslint-plugin-import`: plugin que permitirá ao ESLint lidar com a sintaxe de `import`/`export` da ES6+.
- `eslint-plugin-jsx-a11y`: plugin com regras de acessibilidade.
- `eslint-plugin-react`: plugin com regras específicas para projetos React.
- `eslint-plugin-react-hooks`: plugin com regras sobre o uso de React hooks. Ele garantirá, por exemplo, que você jamais utilize um hook fora de um function component.

Para instalar todas as dependências, execute a seguinte linha:

```sh
yarn add -D eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
```

Se você utilizar `npm` como gerenciador de pacotes, substitua `yarn add -D` por `npm install --dev`.

## Passo 2: configurar o ESLint

Com as dependências corretamente instaladas, é hora de criar os arquivos de configuração do ESLint. Primeiro, criaremos o arquivo `.eslintrc` que manterá as configurações para o ESLint em nosso projeto.

> Todos os arquivos de configuração do ESLint e do Prettier deverão ser criados na raíz do projeto.

`.eslintrc`
```json
{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:import/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:@typescript-eslint/recommended",
    "eslint-config-prettier"
  ],
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "paths": [
          "src"
        ],
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ]
      }
    }
  },
  "rules": {
    "no-unused-vars": [
      "error",
      {
        "vars": "all",
        "args": "after-used",
        "ignoreRestSiblings": true,
        "argsIgnorePattern": "^_"
      }
    ],
    "react/react-in-jsx-scope": "off"
  }
}
```

Com a regra `no-unused-vars` garantiremos que um erro será emitido caso nos esqueçamos de alguma variável não utilizada em nosso código. A regra `react/react-in-jsx-scope` foi desabilitada para que o ESLint não marque como obrigatória a importação do React (`import React from 'react'`) em arquivos que utilizem JSX, já que isso não é mais necessário nas versões mais recentes do React.

Em seguida, criaremos um arquivo `.eslintignore`, que deverá indicar ao ESLint quais arquivos serão ignorados:

`.eslintignore`
```json
node_modules/
dist/
env.d.ts
```

Se preferir, adicione também à seção `scripts` do seu `package.json` um script para executar o ESLint no seu projeto:

```json
"scripts": {
  ...
  "lint": "eslint . --ext .ts,.tsx"
}
```

## Passo 3: configurar o Prettier

Assim como fizemos com o ESLint, agora criaremos um arquivo `.prettierrc` com as configurações que utilizaremos no Prettier. Para aprender mais sobre as opções utilizadas e outras disponíveis, acesse a [documentação do Prettier](https://prettier.io/docs/en/options.html):

`.prettierrc`
```json
{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 120,
  "bracketSpacing": true,
  "endOfLine": "lf"
}
```

Para determinar os arquivos ignorados pelo Prettier, crie um arquivo `.prettierignore`, como a seguir:

`.prettierignore`
```json
node_modules/
dist/
```

## Passo 4: integrando com o VSCode

Por fim, iremos configurar o VSCode para utilizar o ESLint e o Prettier para fazer sugestões e formatar o código, respectivamente. Caso você ainda não as possua, instale as extensões [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) e [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).

Com as extensões instaladas, também será necessário configurar o VSCode para utilizar o Prettier para formatação do documento no momento em que ele for salvo. A extensão ESLint deverá entrar em ação automaticamente caso haja um arquivo de configuração válido, como o `.eslintrc` que criamos.

Caso seu projeto ainda não possua um arquivo `.vscode/settings.json`, será necessário criá-lo. Nesse arquivo, adicione as duas regras a seguir:

```json
{
  ...
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
```

Pronto! Com isso, o ESLint deverá destacar os trechos problemáticos do seu código e o Prettier deverá formatar e aplicar correções sempre que possível ao salvar o documento.

![ESLint and Prettier on VSCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sguy7hw5qf62vxhppzm6.gif)

## Considerações finais

Este artigo foi inspirado pelo artigo [Setting up ESLint & Prettier in ViteJS
](https://cathalmacdonnacha.com/setting-up-eslint-prettier-in-vitejs) e traz alguns ajustes e adições. 

Um repositório com o projeto completo, incluindo Storybook, está disponível em [https://github.com/marcosdiasdev/react-vitejs-template](https://github.com/marcosdiasdev/react-vitejs-template).

Ficou com alguma dúvida? Vamos conversar.