javascript - 为什么 eslint 考虑 JSX 或一些 react @types undefined，因为将 typescript-eslint/parser 升级到版本 4.0.0

Question

上下文是使用 ReactJs 构建的非常大的项目，基于 eslint 规则，具有此 eslint 配置

const DONT_WARN_CI = process.env.NODE_ENV === 'production' ? 0 : 1

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:react/recommended',
    'prettier',
    'prettier/@typescript-eslint'
  ],
  plugins: [
    'react',
    'html',
    'json',
    'prettier',
    'import',
    'jsx-a11y',
    'jest',
    '@typescript-eslint',
    'cypress'
  ],
  settings: {
    'html/indent': '0',
    es6: true,
    react: {
      version: '16.5'
    },
    propWrapperFunctions: ['forbidExtraProps'],
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx']
      },
      alias: {
        extensions: ['.js', '.jsx', '.json']
      }
    }
  },
  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true,
    'cypress/globals': true
  },
  globals: {
    React: true,
    google: true,
    mount: true,
    mountWithRouter: true,
    shallow: true,
    shallowWithRouter: true,
    context: true,
    expect: true,
    jsdom: true
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'es2020',
    ecmaFeatures: {
      globalReturn: true,
      jsx: true
    },
    lib: ['ES2020']
  },
  rules: {
    'arrow-parens': ['error', 'as-needed'],
    'comma-dangle': ['error', 'never'],
    eqeqeq: ['error', 'smart'],
    'import/first': 0,
    'import/named': 'error',
    'import/no-deprecated': process.env.NODE_ENV === 'production' ? 0 : 1,
    'import/no-unresolved': ['error', { commonjs: true }],
    'jsx-a11y/alt-text': DONT_WARN_CI,
    'jsx-a11y/anchor-has-content': DONT_WARN_CI,
    'jsx-a11y/anchor-is-valid': DONT_WARN_CI,
    'jsx-a11y/click-events-have-key-events': DONT_WARN_CI,
    'jsx-a11y/heading-has-content': DONT_WARN_CI,
    'jsx-a11y/iframe-has-title': DONT_WARN_CI,
    'jsx-a11y/label-has-associated-control': [
      'error',
      {
        controlComponents: ['select']
      }
    ],
    'jsx-a11y/label-has-for': [
      'error',
      {
        required: {
          some: ['nesting', 'id']
        }
      }
    ],
    'jsx-a11y/media-has-caption': DONT_WARN_CI,
    'jsx-a11y/mouse-events-have-key-events': DONT_WARN_CI,
    'jsx-a11y/no-autofocus': DONT_WARN_CI,
    'jsx-a11y/no-onchange': 0,
    'jsx-a11y/no-noninteractive-element-interactions': DONT_WARN_CI,
    'jsx-a11y/no-static-element-interactions': DONT_WARN_CI,
    'jsx-a11y/no-noninteractive-tabindex': DONT_WARN_CI,
    'jsx-a11y/tabindex-no-positive': DONT_WARN_CI,
    'no-console': 'warn',
    'no-debugger': 'warn',
    'no-mixed-operators': 0,
    'no-redeclare': 'off',
    'no-restricted-globals': [
      'error',
      'addEventListener',
      'blur',
      'close',
      'closed',
      'confirm',
      'defaultStatus',
      'defaultstatus',
      'event',
      'external',
      'find',
      'focus',
      'frameElement',
      'frames',
      'history',
      'innerHeight',
      'innerWidth',
      'length',
      'localStorage',
      'location',
      'locationbar',
      'menubar',
      'moveBy',
      'moveTo',
      'name',
      'onblur',
      'onerror',
      'onfocus',
      'onload',
      'onresize',
      'onunload',
      'open',
      'opener',
      'opera',
      'outerHeight',
      'outerWidth',
      'pageXOffset',
      'pageYOffset',
      'parent',
      'print',
      'removeEventListener',
      'resizeBy',
      'resizeTo',
      'screen',
      'screenLeft',
      'screenTop',
      'screenX',
      'screenY',
      'scroll',
      'scrollbars',
      'scrollBy',
      'scrollTo',
      'scrollX',
      'scrollY',
      'self',
      'status',
      'statusbar',
      'stop',
      'toolbar',
      'top'
    ],
    'no-restricted-modules': ['error', 'chai'],
    'no-unused-vars': [
      'error',
      {
        varsIgnorePattern: '^_',
        argsIgnorePattern: '^_'
      }
    ],
    'no-var': 'error',
    'one-var': ['error', { initialized: 'never' }],
    'prefer-const': [
      'error',
      {
        destructuring: 'any'
      }
    ],
    'prettier/prettier': 'error',
    'react/jsx-curly-brace-presence': [
      'error',
      { children: 'ignore', props: 'never' }
    ],
    'react/jsx-no-bind': [
      'error',
      {
        allowArrowFunctions: true
      }
    ],
    'react/jsx-no-literals': 1,
    'react/jsx-no-target-blank': DONT_WARN_CI,
    'react/jsx-no-undef': ['error', { allowGlobals: true }],
    'react/no-deprecated': DONT_WARN_CI,
    'react/prop-types': 0,
    'require-await': 'error',
    'space-before-function-paren': 0
  },
  overrides: [
    {
      files: ['**/*.ts', '**/*.tsx'],
      rules: {
        'no-unused-vars': 'off',
        'import/no-unresolved': 'off'
      }
    }
  ]
}

自库升级以来"@typescript-eslint/parser": "^4.0.0"来自 "@typescript-eslint/parser": "^3.10.1"以下命令...

eslint --fix --ext .js,.jsx,.json,.ts,.tsx . && stylelint --fix '**/*.scss'

...带来以下这些错误

  9:45  error  'ScrollBehavior' is not defined                       no-undef
  224:12  error  'KeyboardEventInit' is not defined                  no-undef
  53:5   error  'JSX' is not defined                                 no-undef

我知道我可以修复它们添加到 Prop globals还有 key JSX: true或 KeyboardEventInit: true但这不是我想走的路。
关于这里发生了什么的任何想法？配置错误在哪里？
非常感谢

Answer 1

尝试将变量声明为 JSX.Element 类型时，我遇到了同样的问题在 typescript 中。我添加了 "JSX":"readonly"至globals在 .eslintrc.json问题就消失了。在您的情况下，它将是:

globals: {
    React: true,
    google: true,
    mount: true,
    mountWithRouter: true,
    shallow: true,
    shallowWithRouter: true,
    context: true,
    expect: true,
    jsdom: true,
    JSX: true,
},

从以下链接中，我了解到您实际上在 JSX 之后使用了几个选项.您可以使用 true , false , writable或 readonly (但不是 off )。
https://eslint.org/docs/user-guide/configuring