为什么eslint认为JSX或某些@types未定义反应，因为将typescript-eslint / parser升级到4.0.0版本

编程问答 2022-06-11

问题描述

上下文是基于eslint规则，使用eslint配置，由ReactJs构建的相当大的项目

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','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','.json']
      }
    }
  },env: {
    browser: true,node: 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

我知道我可以修复它们，将它们添加到道具globals以及键JSX: true或KeyboardEventinit: true中，但这不是我想要的方法。 对这里发生的事情有任何想法吗？配置错误在哪里？ 非常感谢

解决方法

尝试在打字稿中声明类型为 // Removes WooCommerce 'You cannot add another product to your cart' message add_filter( 'woocommerce_cart_product_cannot_add_another_message','__return_false' ); 的变量时，我遇到了同样的问题。我在 JSX.Element 中将 "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）。

https://eslint.org/docs/user-guide/configuring

,

正式答案在这里 https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors并表示确实要将它们添加到globals或禁用no-undef规则，因为打字稿已经有了自己的检查

javascriptreactjsreactjsrulestypescripttypescript