Criando um projeto React com TypeScript, Eslint e Prettier

Introdução

Fala Devs, no tópico de hoje vou ensinar a inicializar um projeto React utilizando TypeScript, Eslint e Prettier para mantermos um código limpo e organizado, afinal, se nem o código estiver organizado como vamos garantir que o sistema será não é mesmo?

Sempre que vou iniciar um novo projeto React é a mesma dor de cabeça procurando vários tutoriais ensinando a fazer X, Y ou Z, no meio do caminho percebo que algum dos tutoriais estava desatualizado e preciso começar do zero, desde então comecei a seguir a própria documentação das bibliotecas e nunca mais tive problemas.

Criando o projeto React

Bora por a mão na massa. A primeira coisa que devemos fazer é criar o projeto React zerado, aqui temos duas opções, utilizar o create-react-app ou webpack. Por questões de gosto sempre opto pelo create-react-app, seguindo o passo-a-passo da própria documentação devemos utilizar o comando:

npx create-react-app my-app --template typescript

lembrando que sempre é indicado utilizar npx pois garante que estaremos utilizando a ultima versão do create-react-app.

my-app é o nome do projeto e pode ser substituído por qualquer coisa desde que possua apenas letras minúsculas.

Finalizada a instalação podemos acessar a pasta do projeto e abrir em nosso editor preferido, no meu caso o VSCode, caso seja o seu também é só dar o seguinte comando:

code my-app

Projeto criado, hora de começarmos a configurá-lo para uso!

Adicionando o projeto ao repositório do GitHub

Esse passo é opcional, mas, recomendado. Sempre que inicio novos projetos costumo adicioná-los ao meu repositório do GitHub por questões de facilidade de acesso e obviamente, organização.

O primeiro passo é acessar o GitHub, acessar sua conta e adicionar um novo repositório.

Agora devemos conectar nosso repositório local ao remoto, para isso utilizamos o seguinte comando:

git remote add origin git@github.com:USER_NAME/REPO_NAME.git

Em seguida criamos nossa branch principal:

git branch -M main

desde outubro de 2020 o GitHub passou a utilizar main ao invés de master, veja aqui

E por fim subimos para o repositório remoto nosso projeto recém-criado:

git push -u origin main

Projeto adicionado ao GitHub, hora de começar a configurar nosso linter!

Configurando o ESLint

Essa costuma ser a parte que eu me perco quando configuro novos projetos, mas novamente, se seguirmos a documentação de cada uma das bibliotecas não tem erro!

Começando pelo ESLint, devemos utilizar o seguinte comando:

yarn add eslint -D

usamos -D para adicionar o ESLint como dependência de desenvolvimento já que quando nosso código for para produção ele não servirá de nada

E em seguida já inicializamos ele com:

npx eslint --init

esse passo costuma mudar um pouco de acordo com as atualizações que saem para o ESLint, não se desespere se tiver alguma configuração que não mencionei aqui, em caso de dúvidas só pesquisar no Google e entender melhor o que está sendo solicitado!

Agora começamos a configurar o ESLint, a primeira pergunta é referente a como iremos utilizar o ESLint em nosso sistema

? How would you like to use ESLint? ... 
  To check syntax only // apenas para checagem de sintaxe
  To check syntax and find problems // para checagem de sintaxe e encontrar problemas
> To check syntax, find problems, and enforce code style // para checagem de sintaxe, encontrar problemas e reforçar estilo de escrita

aqui eu aconselho a selecionar a ultima opção (navegue com as setas e confirme com o enter!) mas fica ao seu critério

Depois devemos escolher qual tipo de módulos nosso projeto usa, nesse caso como estamos lidando com React é a primeira opção mesmo:

? What type of modules does your project use? ... 
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

No próximo passo selecionamos qual framework estamos utilizando, novamente será a primeira opção:

? Which framework does your project use? ...       
> React
  Vue.js
  None of these

A próxima pergunta é sobre o TypeScript, como estamos configurando o projeto com ele é só selecionar Yes:

? Does your project use TypeScript? » No / Yes

No próximo passo devemos selecionar onde nosso código irá rodar, no caso do React será sempre no navegador, então é só dar enter e seguir pro próximo passo:

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
  Node

Agora somos solicitados a escolher um estilo a ser utilizado no projeto, devemos escolher entre um existente, criar um estilo ou utilizar um próprio, eu sempre escolho utilizar um existente e opto por utilizar o do AirBNB:

? How would you like to define a style for your project? ... 
> Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

E por fim escolhemos o formato do nosso arquivo de configuração, novamente uma escolha pessoal, mas eu sempre opto pelo JSON pela facilidade do auto-complete do VSCode:

? What format do you want your config file to be in? ... 
  JavaScript
  YAML
> JSON

Encerradas as configurações o ESLint vai perguntar se você deseja instalar as dependências utilizando o npm, como nosso projeto está utilizando o yarn aqui você tem duas opções:

• selecionar Yes, apagar o arquivo package.lock.json gerado após a instalação e rodar yarn para instalar as dependências no arquivo yarn.lock

• selecionar No, copiar a lista de dependências descrita e instalar as mesmas utilizando o yarn add ... (não esquecer de adicionar o -D caso opte por essa opção)

Agora temos nosso arquivo .eslintrc criado e podemos começar a editar ele, mas antes só mais um passo.

Vamos instalar a biblioteca eslint-import-resolver-typescript que permite importar arquivos .ts/.tsx e algumas outras funcionalidades dentro do nosso projeto, novamente seguindo a [documentação] é só usar o comando:

yarn add -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript

nesse comando ele tenta instalar duas bibliotecas que já estão instaladas, mas não tem problema

E em seguida devemos atualizar nosso arquivo .eslintrc, é só adicionar uma configuração à chave rules e uma à chave settings (caso não exista é só criar abaixo da última chave):

...
"rules": {
  ...
  "import/no-unresolved": "error"
},
"settings": {
  "import/resolver": {
    "typescript": {}
  }
}
...

ESLint configurado, vamos para o ultimo passo.

Configurando o Prettier

Aqui iremos instalar duas dependências para configurar o Prettier junto do ESLint, a primeira desabilita as regras conflitantes entre o Prettier e o ESLint e a segunda transforma o Prettier e suas configurações em regras do ESLint, assim conseguimos integrar os dois, vamos lá:

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier 

Agora iremos atualizar nosso arquivo .eslintrc novamente, basta adicionar uma linha à nossa chave extends e uma à nossa chave plugins:

"extends": [
  "plugin:react/recommended",
  "airbnb",
  "plugin:@typescript-eslint/recommended",
  "plugin:prettier/recommended"
],
"plugins": [
  "react", 
  "react-hooks", 
  "@typescript-eslint", 
  "prettier"
]

Caso você queira ainda pode adicionar um arquivo .prettierrc para modificar suas configurações do prettier

Finalizando

Essa é a configuração que costumo fazer para todos os meus projetos, para finalizar você pode adicionar regras customizadas à chave rules dentro do arquivo .eslintrc.

Espero que tenham gostado, caso tenham dúvidas ou sugestões não deixem de comentar ou entrar em contato comigo, um grande abraço!