checklist_react.md

📝 Iniciando um projeto React com Vite

Criar e configurar uma aplicação React usando o VITE

• Criar o diretório do projeto;

• Instalar o react usando o Vite npm create vite@latest ; obs: entrar na pasta mas nao instalar as dependencias. so fazer isso depois de instalr o eslint

• Alterar a chave dev do arquivo package.json ;

  "scripts": {
    "dev": "vite --open",
    "build": "vite build",
  },

Configurar o ESLint

• excluir o arquivo de configuração de lint criado pelo vite com o comando:

  rm .eslintrc.cjs

• Remover as dependências que foram instaladas pelo Vite.

  npm remove @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react-hooks eslint-plugin-react-refresh

• instalar o pacote de regras de lint com o padrão do Airbnb.

  npx install-peerdeps --dev eslint-config-airbnb

• Criar o arquivo .eslintrc.json na raiz do projeto com o seguinte conteúdo.

  {
  "extends": ["airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended"],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "env": {
      "browser": true,
      "es2021": true
  },
  "rules": {
      "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }],
      "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
  }
  }
  

• Editar o arquivo pakage.json adicionando o script para rodar o ESlint.

  //package.json
  ...
    "scripts": {
      ...
      "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
      ...
    },
  ...

• Criar o arquivo de configuração do VSCode .vscode/settings.json na raiz do projeto.

  //.vscode/settings.json
  {
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit",
      "source.fixAll.stylelint": "explicit"
  },
  "extensions.ignoreRecommendations": false,
  }

• Rodar o Lint

npm run lit