Adicionando ESLint e Prettier a um projeto React criado com ViteJS

Recentemente, eu resolvi experimentar o ViteJS 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:

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

{
  "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

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:

"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:

.prettierrc

{
  "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

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 e 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:

{
  ...
  "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.

Considerações finais

Este artigo foi inspirado pelo artigo 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.

Ficou com alguma dúvida? Vamos conversar.