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
npxpois 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.jsongerado após a instalação e rodaryarnpara instalar as dependências no arquivoyarn.lockselecionar 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!
Top comments (2)
Toppppppp
vlwww
Obrigado