Hoje em dia o React representa uma grande fatia do desenvolvimento frontend, contendo diversas ferramentas no seu ecossistema que melhoram a experiência de desenvolvimento. Quando utilizamos o Typescript com React ganhamos a vantagem de definir bem os tipos dos nossos componentes sem o uso do PropTypes. Além disso nos beneficiamos do principio de fail fast, que nos permite identificar e evitar erros, e melhorar a qualidade do código.
Quando iniciamos um projeto React existem certas configurações como Babel e Webpack que são desejadas no projeto e podem ser configuradas manualmente. Porém, caso o seu projeto não tenha configurações bem específicas, a melhor forma de iniciar um novo projeto é utilizar um boiler plate, como por exemplo o "Create React App" , que atenderá a maioria dos casos.
Iniciando a aplicação com create-react-app
Para utilizar a ferramenta é necessário ter instalado o Node na versão 8.10 ou superior. Utilizaremos o package runner npx. Para criar o projeto, rode no seu terminal os comandos:
npx create-react-app my-app --template typescript
cd my-app
npm start
Quando criamos um novo projeto, a CLI utiliza o Yarn para instalar as dependência. Caso deseje utilizar npm basta adicionar a seguinte flag no comando: —use-npm.
Além de configurar o Babel e o Webpack, o comando também cria a seguinte estrutura de pastas:
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.tsx
├── App.test.tsx
├── index.css
├── index.tsx
├── logo.svg
├── react-app-env.d.ts
├── serviceWorker.ts
└── setupTests.ts
Caso deseje, podemos simplificar essa estrutura deletando alguns arquivos e as suas correspondentes importações.
my-app
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── index.html
│ └── robots.txt
└── src
├── App.tsx
├── index.tsx
├── react-app-env.d.ts
└── setupTests.ts
Adicionando ESLint
Iniciamos adicionando o ESLint como dependência de desenvolvimento:
yarn add eslint -D
O próximo comando é para iniciar o ESLint
yarn eslint --init
No terminal a dependência faz algumas perguntas de configuração. Aqui irei colocar as minhas configurações. Você é livre para escolher outras e testar a que mais se encaixa ao seu projeto.
? How would you like to use ESLint?
> To check syntax, find problems, and enforce code style
? What type of modules does your project use?
> JavaScript modules (import/export)
? Which framework does your project use?
> React
? Does your project use TypeScript?
> y
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to in
vert selection)
> Browser
? How would you like to define a style for your project?
> Use a popular style guide
? Which style guide do you want to follow?
> Airbnb
? What format do you want your config file to be in?
> JSON
? The style guide "airbnb" requires eslint@^5.16.0 || ^6.8.0. You are currently us
ing eslint@7.1.0. Do you want to downgrade?
> y
? Would you like to install them now with npm?
> n
Ao não selecionar a instalação com npm, o comando irá finalizar, mas antes ele gerou alguns comandos no console, que podemos copiar e rodar com yarn, fazendo as modificações necessárias nas versões das dependências
yarn add eslint-plugin-react@^7.19.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 eslint-plugin-import@^2.20.1 eslint-plugin-jsx-a11y@^6.2.3 eslint-plugin-react-hooks@^2.5.0 @typescript-eslint/parser@latest -D
Adicionando Prettier
Para adicionar o Prettier e seus plugins devemos rodar no terminal o seguinte comando
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
Com a dependência instalada, criaremos um arquivo prettier.config.js que irá conter as informações de configuração do Prettier.
module.exports = {
singleQuote: true,
trailingComma: 'all',
allowParens: 'avoid',
};
Essas configurações forçam o padrão de aspas simples, vírgula no final dos objetos e evita parenteses em arrow functions com apenas um parâmetro.
Configurando ESLint e Prettier
Primeiramente criamos um arquivo .eslintignore , que inclui os arquivos onde o ESLint não irá visualizar.
**/*.js
node_modules
build
Agora movemos para o arquivo .eslintrc.json onde iremos alterar algumas regras.
Em extends iremos adicionar as dependências que instalamos
"extends": [
"plugin:react/recommended",
"airbnb",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
Depois iremos adicionar os plugins
"plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
O próximo passo é editar as regras que o ESLint irá avaliar. Entre as regras temos a permissão de código JSX dentro de arquivos .tsx e permissão de importação de arquivos .ts e .tsx sem declarar explicitamente a extensão. Você pode consultar mais regras no link, e pode alterar durante o desenvolvimento. Porém, cuidado com muitas modificações para não criar inconsistências no código.
"rules": {
"prettier/prettier": "error",
"react/jsx-one-expression-per-line": "off",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/jsx-filename-extension": [
1,
{
"extensions": [".tsx"]
}
],
"import/prefer-default-export": "off",
"@typescript-eslint/explicit-function-return-type": [
"error",
{
"allowExpressions": true
}
],
"import/extensions": [
"error",
"ignorePackages",
{
"ts": "never",
"tsx": "never"
}
]
},
Para resolver as importações com Typescript primeiro devemos adicionar a dependência abaixo:
yarn add eslint-import-resolver-typescript -D
E por fim, para resolver as importações com Typescript adicionamos a seguinte configuração.
"settings": {
"import/resolver": {
"typescript": {}
}
}
O resultado final da configuração do arquivo você pode conferir nesse link
Adicionando EditorConfig
O EditorConfig é um formato de arquivo que contém regras de configuração do editor de texto e padronização de código. Em alguns editores esse arquivo é lido automaticamente e aplica as configurações. É ideal em casos onde existe uma equipe de desenvolvimento e se deseja que todos estejam com a mesma configuração no editor de texto ou IDE de sua preferência. No site do EditorConfig você pode conferir se há necessidade de instalar o plugin ou se o seu editor já possui suporte nativo a esse formato de arquivo
Crie um arquivo .editorconfig e adicione as regras de sua preferência. O arquivo final deve ser algo parecido com a configuração abaixo.
root = true
[*]
end_of_line = lf
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
Extra: Configurando VSCode
Caso você utilize VSCode como o seu editor de texto, existem duas configurações que são importantes adicionar no seu arquivo settings.json para que o editor possa realizar a formatação automática dos arquivos ao salvar.
"[typescript]": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},typescript
"[typescriptreact]": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
},
Conclusão
O processo de configuração do React com Typescript se beneficia de boilerplates como o Create React App, onde configurações como Babel e Webpack já vem pré configuradas para nós. Na grande maioria dos projetos essas configurações são necessárias. Para padronização do código devemos configurar nossa ferramenta de linting para entender os arquivos e importações Typescript, configurar o Prettier para aplicar a formatação no código e caso o projeto seja compartilhado entre um time de desenvolvedores é interessante configurar o EditorConfig.
Lembrando que essas são as configurações que eu utilizo ao iniciar um novo projeto. É importante você conhecer o seu projeto e com o tempo entender quais configurações funcionam para você. Essa publicação é apenas um guia com o objetivo de facilitar o inicio do desenvolvimento. Outro ponto a se observar é que a tecnologia evolui em um ritmo acelerado, então é importante ter em mente que as configurações podem alterar com o passar do tempo.
Top comments (6)
Parabéns pelo post, Christian. Eu faço exatamente assim como você mostrou no post. Eu só não entendo porque aparece esse "warning" do downgrade do ESLint. Porque às vezes ele não realiza o downgrade e acaba dando erro no yarn start quando vai subir a aplicação. Aí eu tenho que ficar mudando no package.json pra versão certa.
Uma sugestão pra um próximo post poderia ser uma padronização de commits messages com Husky + Commitzen.
Parabéns de novo pelo seu conhecimento, de ❤
Muito obrigado! Esse conflito entre a versão do ESLint é algo que deve estar linkado com alguma outra dependência do create-react-app, realmente temos que contornar esse problema.
Excelente ideia para um post futuro, irei atrás de produzir um conteúdo sobre o assunto.
Muito obrigado pel oconteúdo primeiramente.
Gostaria de dar a sugestão de melhorar a explicação sobre o settings.json. Eu por exemplo não consegui entender aonde tenho que criar esse arquivo, ou se ele já existe em algum lugar do VSCode.
Edit: o código que é para por no settings está meio confuso também quando eu colo no seetings.json
Obrigado :D
Christian, obrigado pelo seu post!
Como contribuição, acho justo também adicionar a forma de criar com o Yarn:
yarn create react-app my-app --template typescript
abraço!
Olá Cezar, muito obrigado pela contribuição. Criar com yarn é uma forma válida também.
A forma de iniciar o projeto utilizando npx é uma recomendação da documentação do react, que você pode conferir nesse link (pt-br.reactjs.org/docs/create-a-ne...). O npx é um package runner que vem com npm, onde ele executa o comando mas não instala as dependência na sua máquina.
Abraço!
Muito agradecido!