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

Question

我正在将 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 识别出缺少的 prop 并将其突出显示，但是我仍然可以成功编译代码，这是不应该做的。

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

这是我的 .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"
  ]
}

Answer 1

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

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

How do you check for prop errors in a React/Typescript project with ESLint?

typescript

reactjs

eslint

eslintrc

typescript-eslint