Iniciando um novo projeto React e Typescript
Published: 2020-08-27 17:07:27

Uma dificuldade que eu tenho ao iniciar um projeto é lembrar do que instalar pra começar os trabalhos. Eu acabei fazendo umas anotações no notion para me lembrar, mas pq não compartilhar isso? Sei que tem vários tutoriais por aí sobre como começar um projeto em React com Typescript, esse então vai ser apenas mais um :relieved:. As versões apresentadas abaixo são relativas ao dia de hoje e já podem ter sido atualizadas.

Partindo da premissa de que o Node e o Yarn já estão instalados e atualizados, pra começar vamos criar o projeto:

```
$ npx create-react-app web --template typescript
$ cd web
```

Já dentro da pasta do projeto, vamos começar a instalar e configurar algumas dependência de desenvolvimento, começando pelo ESLint:

```
$ yarn add eslint -D
$ yarn eslint --init
```

Durante a configuração, eu uso o módulos javascript com o styleguide da Airbnb. No final escolho não instalar com o NPM e ele me fornece a lista de dependências. Basta copiar e instalar como dependência de desenvolvimento.

```
$ yarn add eslint-plugin-react@^7.20.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2 eslint-plugin-jsx-a11y@^6.3.0 eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0 @typescript-eslint/parser@latest -D
```

Também devemos instalar uma outra depência de desenvolvimento para tratar as importações realizadas com o Typescript:

```
S yarn add eslint-import-resolver-typescript -D
```

É bom criar um arquivo `.eslintignore` na raiz do projeto para listar as pastas/arquivos que o ESLint deve ignorar:

```
**/*.js
node_modules
build
```

Depois instalamos o Prettier, também como dependência de desenvolvimento, pra dar um tchan no código :thumbsup:

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

Após a instalação, criamos o arquivo `prettier.config.js` também na raiz do projeto com suas configurações:

```json
module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  allowParens: 'avoid',
};
```

Agora vamos configurar o ESLint pra trabalhar junto com o Prettier, tudo é feito no arquivo `.eslintrc.json`. Abaixo já coloquei o bloco na versão final, então pode substituir o bloco que já existir:

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

```json
"plugins": [
        "react",
        "react-hooks",
        "@typescript-eslint",
        "prettier"
    ],
```

```json
"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"
      }
    ]
  },
```

```json
"settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
```

E tá pronto (finalmente). :clap:

Só que não. :fu:

Com essas versões, atualmente o React acusa um erro de incompatibilidade ao iniciar o projeto. Para resolver basta apagar o arquivo `yarn.lock` e a pasta `node_modulos` e editar o arquivo `packages.json` **retirando** o eslint da lista de dependências. Depois é só instalar novamente os pacotes:

```
$ yarn
```

Agora tudo deve funcionar. Pelo menos "_funcionou na minha máquina_"...

![Péraí Péraí Péraí](https://dev-to-uploads.s3.amazonaws.com/i/ewr0bmyhffe27rluajq2.gif)

Tem mais duas configurações a fazer no VS Code também caso seja uma instalação nova ou sei lá. Só configurei na primeira vez e tem atendido a todos os projetos que trabalhei depois.

Instalar as extensões:
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Configurar a formatação automática para arquivos Typescript no arquivo `settings.json`:

```json
"[typescript]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },typescript
"[typescriptreact]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
```

Agora sim, vai que é tua! :koala: