如何使用 ESLint 检查 React/Typescript 项目中的 prop 错误？

Posted 2023-03-23

【中文标题】如何使用 ESLint 检查 React/Typescript 项目中的 prop 错误？

【英文标题】：How do you check for prop errors in a React/Typescript project with ESLint?

【发布时间】：2021-03-30 19:43:00

【问题描述】：

我正在将 create-react-app Typescript 项目迁移到最新版本的 create-react-app，并且我正在从现已弃用的 tslint 迁移到 eslint。我在此过渡中遇到的问题是，我无法让 eslint 对缺少的道具抛出错误或警告。

以这个 React 组件为例：

interface Props 
  name: string;
  count: number;


const ExampleComponent = (props: Props) => 
  const name, count = props;
  return (
    <div>
      name count
    </div>
  );


export default ExampleComponent;

然后被另一个组件调用：

import ExampleComponent from './ExampleComponent';

const App = (props: Props) => 
  return (
    <ExampleComponent count=5 />
  );

在上面的示例中，缺少 count 属性。这应该会导致 eslint 抛出错误或警告，就像之前对 tslint 所做的那样。我的 IDE 识别出缺少的道具并将其突出显示，但是我仍然可以成功编译代码，这是不应该的。

如何修改我的 eslint 配置，以便在缺少道具时（或者在同样的意义上，如果存在不应该存在的额外道具）出现错误？

这是我的.eslintrc.js：

module.exports = 
    "env": 
        "browser": true,
        "node": true
    ,
    "parser": "@typescript-eslint/parser",
    "parserOptions": 
        "project": "tsconfig.json",
        "sourceType": "module",
        "ecmaFeatures": 
            "jsx": true
        
    ,
    "plugins": [
        "eslint-plugin-jsdoc",
        "eslint-plugin-prefer-arrow",
        "eslint-plugin-import",
        "eslint-plugin-react",
        "@typescript-eslint",
        "@typescript-eslint/tslint"
    ],
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:react/recommended",
      ],
    "rules": 
        "@typescript-eslint/no-inferrable-types": "off",
        "react/no-unescaped-entities": "off",
        "@typescript-eslint/no-var-requires": "off",
        "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "jsdoc/require-jsdoc": "off",
        "@typescript-eslint/no-unused-vars": "off",
        "max-len": ["error", 200, 2, 
          "ignoreUrls": true,
          "ignoreComments": true,
          "ignoreRegExpLiterals": true,
          "ignoreStrings": true,
          "ignoreTemplateLiterals": true
        ],
        "no-prototype-builtins": "off"
    
;

下面是我的tsconfig.json 文件：

  "compilerOptions": 
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "strictFunctionTypes": false,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "allowJs": true,
    "skipLibCheck": true,
    "noEmitHelpers": false,
    "noUnusedLocals": true,
    "removeComments": false,
    "preserveConstEnums": false,
    "sourceMap": true,
    "importHelpers": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedParameters": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  ,
  "include": [
    "src"
  ],
  "exclude": [
    "build",
    "node_modules",
    "src/setupProxy.js",
    "archived"
  ]

【问题讨论】：

你不需要 ESLint 来抛出错误 - TypeScript 本身将无法编译。 Intellisense 还会在 IDE 中显示问题。

我的 IDE 运行正常并突出显示错误。然而，TypeScript 编译时没有错误，无论是在开发中还是在我构建生产时。仅我的 IDE 是不够的，因为它仅在我当前正在查看文件时才显示错误。我已经编辑了问题并附上了我的 tsconfig.json

【参考方案1】：

问题不是 ESLint 没有捕捉到错误的问题，而是在迁移到最新版本的 create-react-app 的过程中。更新 react-scripts（在撰写本文时为 4.0.1 版）不会同时更新 TypeScript 版本。不同的版本会导致一些错误没有被正确报告。将 Typescript 更新到 4.0.3 版可以解决问题。

【讨论】：

你能详细说明到底发生了什么吗？我已经能够在 codeandbox 上重现您的问题，但启动一个新的 CRA 项目无法按预期编译。

我开始了一个新的 CRA 项目，看看是否有什么不同，并且有相同的经验，它没有像预期的那样编译。比较两个 package.json 文件后，我的项目运行的是 TS 3.5.x，而最新的 CRA 项目运行的是 4.0.3。升级我的项目以匹配后，错误再次开始出现。另外值得注意的是，我最初将 TS 一直升级到 4.1.x，但是有许多与 jsx 相关的错误尚未针对该版本进行修补，所以我回滚到 4.0.3

完美，小版本之间的差异也是我所经历的。感谢您花时间解释！

它为我解决了为 typescript 更高版本的 react build 问题