DEV Community

Cover image for Criando um projeto React com TypeScript, Eslint e Prettier
Otavio Messias Palma
Otavio Messias Palma

Posted on

Criando um projeto React com TypeScript, Eslint e Prettier

#react #eslint #typescript #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.

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

Em seguida criamos nossa branch principal:



git branch -M main
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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



? Does your project use TypeScript? » No / Yes
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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": {}
  }
}
...
Enter fullscreen mode Exit fullscreen mode

ESLint configurado, vamos para o ultimo passo.

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

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"
]
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (2)

Collapse
 
alexalannunes profile image
Alex Alan Nunes •

Toppppppp
vlwww

Collapse
 
jrbytes profile image
Jr Bytes •

Obrigado