'React' a été utilisé avant qu'il a été défini

Question

Je travaille avec Create-React-APP + TypeScript + ESLint Application et pendant la construction ont une telle erreur:

Line 1:8:  'React' was used before it was defined  @TypeScript-eslint/no-use-before-define

Le code dans mon composant commence par:

import React from "react";

Paramètres Eslint:

module.exports = {
  parser: "@TypeScript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true
    }
  },
  settings: {
    react: {
      version: "detect"
    }
  },
  extends: [
    "plugin:react/recommended",
    "plugin:@TypeScript-eslint/recommended",
    "prettier/@TypeScript-eslint",
    "plugin:prettier/recommended"
  ],
  rules: {
    "@TypeScript-eslint/explicit-module-boundary-types": 0,
    "@TypeScript-eslint/triple-slash-reference": 0,
    "no-use-before-define": "off",
    "@TypeScript-eslint/no-use-before-define": "off"
  },
};

Une partie du paquet.json:

"devDependencies": {
  "@TypeScript-eslint/eslint-plugin": "^4.1.0",
  "@TypeScript-eslint/parser": "^4.1.0",
  "babel-eslint": "^10.1.0",
  "eslint": "^6.6.0",
  "eslint-config-airbnb": "^18.1.0",
  "eslint-config-prettier": "^6.11.0",
  "eslint-plugin-import": "^2.20.2",
  "eslint-plugin-prettier": "^3.1.3",
  "eslint-plugin-react": "^7.20.0",
  "prettier": "^2.0.5",
  "start-server-and-test": "^1.11.3"
},
"dependencies": {
  ...
  "react-scripts": "3.4.3",
  ...
}

J'ai essayé:

• Lire - https://github.com/typescript-eslint/typescript-eslint/issues/2502
• Désactiver @ Tortscript-Eslint/No-Use-User-avant-définir et non-User-avant-définir dans .eslintrc.js
• En fait j'ai essayé de supprimer .eslintrc.js du tout, mais a eu la même erreur.

Answer 1

Si vous obtenez seulement cette erreur pour .js Fichiers, assurez-vous que @TypeScript-eslint/parser est utilisé exclusivement sur les fichiers dactylographiés.

. Eslintrc.json (abrégé)

{
  "overrides": [
    {
      "files": ["**/*.ts", "**/*.tsx"],
      "plugins": ["@TypeScript-eslint"],
      "rules": {
        "no-use-before-define": "off",
        "@TypeScript-eslint/no-use-before-define": ["error"],
      },
    }
  ],
  // WRONG: Do not use @TypeScript-eslint/parser on JS files
  // "parser": "@TypeScript-eslint/parser",
  "plugins": [
    "react",
    // "@TypeScript-eslint"
  ],
}