DEV Community

Cover image for Iniciando um novo projeto React e Typescript
Cleiver
Cleiver

Posted on

Iniciando um novo projeto React e Typescript

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

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

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

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

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

**/*.js
node_modules
build
Enter fullscreen mode Exit fullscreen mode

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

$ yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
Enter fullscreen mode Exit fullscreen mode

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

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  allowParens: 'avoid',
};
Enter fullscreen mode Exit fullscreen mode

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:

"extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
Enter fullscreen mode Exit fullscreen mode 
"plugins": [
        "react",
        "react-hooks",
        "@typescript-eslint",
        "prettier"
    ],
Enter fullscreen mode Exit fullscreen mode 
"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"
      }
    ]
  },
Enter fullscreen mode Exit fullscreen mode 
"settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
Enter fullscreen mode Exit fullscreen mode

E tá pronto (finalmente). 👏

Só que não. 🖕

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

Agora tudo deve funcionar. Pelo menos "funcionou na minha máquina"...

Péraí Péraí Péraí

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:

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

"[typescript]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },typescript
"[typescriptreact]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
Enter fullscreen mode Exit fullscreen mode

Agora sim, vai que é tua! 🐨

Top comments (0)