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.