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