Как вы проверяете наличие ошибок в проекте React / Typescript с помощью ESLint?

Я занимаюсь переносом проекта TypeScript create-response-app на последнюю версию 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"
  ]
}

person Kyle Soeltz    schedule 21.12.2020    source источник
comment
Вам не нужно, чтобы ESLint выдавал ошибку - сам TypeScript не скомпилируется. Intellisense также покажет вам проблему в вашей IDE.   -  person Dean James    schedule 21.12.2020
comment
Моя IDE работает правильно и указывает на ошибку. Однако TypeScript компилируется без ошибок как при разработке, так и при создании производственной среды. Одной моей IDE недостаточно, поскольку она показывает ошибку только в том случае, если я просматриваю файл в данный момент. Я отредактировал вопрос и также прикрепил свой tsconfig.json   -  person Kyle Soeltz    schedule 21.12.2020


Ответы (1)


Проблема заключается не в том, что ESLint не обнаруживает ошибку, а в процессе миграции на новейшую версию create-response-app. Обновление react-scripts (до версии 4.0.1 на момент написания этой статьи) также не приводит к обновлению версии TypeScript. Различия версий приводят к тому, что ряд ошибок не сообщается должным образом. Обновление Typescript до версии 4.0.3 устраняет проблему.

person Kyle Soeltz    schedule 21.12.2020
comment
Не могли бы вы подробнее рассказать, что именно произошло? Мне удалось воспроизвести вашу проблему вcodeandbox, но запуск нового проекта CRA не компилируется, как ожидалось. - person Dean James; 21.12.2020
comment
Я начал новый проект CRA, чтобы посмотреть, не изменилось ли что-то еще, и испытал тот же опыт, когда он не компилировался, как ожидалось. После сравнения обоих файлов package.json в моем проекте использовался TS 3.5.x, а в новейшем проекте CRA - 4.0.3. После обновления моего проекта до соответствия ошибки снова стали появляться. Также следует отметить, что я изначально полностью обновил TS до 4.1.x, но есть ряд ошибок, связанных с jsx, которые еще не были исправлены для этого выпуска, поэтому я откатился до 4.0.3 - person Kyle Soeltz; 21.12.2020
comment
Отлично, разница между второстепенными версиями - вот что я тоже испытал. Спасибо, что нашли время объяснить! - person Dean James; 21.12.2020