새로운 프로젝트 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? Typescript와 React에서 다양한 튜터리얼을 사용할 수 있습니다. As versões apresentadas abaixo são relativas ao dia de hoje e já podem ter sido atualizadas.

Node e o Yarn estão instalados e atualizados, pra começar vamos criar o projeto:에 대한 전제 조건:

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

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

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

에어비앤비의 스타일 가이드와 자바스크립트 모듈을 사용하여 구성할 수 있습니다. No final escolho não instalar com o NPM e eleme fornece a lista de dependsências. Basta copyar and instalar como dependsê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 riz do projeto para listar as 파스타/arquivos que o ESLint deve ignorar:

**/*.js
node_modules
build

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

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

설치, 문서 작성prettier.config.js에서 다음과 같은 구성으로 프로젝트를 시작할 수 있습니다.

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:

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

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

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

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

E tá pronto (최종). 👏

그래서. 🖕

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 파스타 node_modulos e editar o arquivo packages.json retirando o eslint da lista de dependsências. Depois é só instalar novamente os pacotes:

$ yarn

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



이 설정은 VS Code를 사용하지 않고 설치를 완료할 수 있도록 구성되어 있습니다. Só configurei na primeira vez e tem atendido a todos os projetos que trabalhei depois.

확장 프로그램으로 설치:

ESLint

Prettier - Code formatter

arquivos Typescript no arquivosettings.json 형식 자동 구성:

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

Agora sim, vai que é tua! 🐨