typescript-eslint/parser를 버전 4.0.0으로 업그레이드하기 때문에 eslint가 JSX 또는 일부 react @types가 정의되지 않았다고 간주하는 이유

typescript-eslint/parser를 버전 4.0.0으로 업그레이드하기 때문에 eslint가 JSX 또는 일부 react @types가 정의되지 않았다고 간주하는 이유

컨텍스트는 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',
    '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

소품에 추가해서 고칠 수 있을 것 알아요globals키도JSX: true또는KeyboardEventInit: true하지만 내가 가고 싶은 길은 아니야.여기서 무슨 일이 일어나고 있는지 아는 거 있어?설정 오류는 어디에 있습니까?정말 감사해요.

변수를 유형으로 선언하려고 할 때 동일한 문제가 발생했습니다.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(단, 아닙니다)off).

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

공식 답변은 여기 있습니다.그리고 이 답변에는 실제로 그것들을 추가하라고 쓰여 있습니다.globals또는 를 무효로 합니다.no-undefTypeScript에는 이미 자체 체크가 있기 때문에 규칙이 적용됩니다.

에서 에러가 발생하다no-undefTypeScript 오류가 없는 경우에도 정의되지 않은 글로벌 변수에 대한 규칙

그no-undeflint 규칙은 존재하는 글로벌 변수를 결정하기 위해 TypeScript를 사용하지 않습니다.대신 ESLint 구성에 의존합니다.

를 사용하지 않는 것을 강력히 권장합니다.no-undefTypeScript 프로젝트의 보풀 규칙.TypeScript 에서는 설정이 필요 없는 체크가 이미 제공되고 있습니다.TypeScript 에서는 이 기능이 대폭 향상됩니다.

이는 v4.0.0 릴리즈에서 타입에도 적용됩니다.서드파티 패키지에서 글로벌 타입을 사용하는 경우(즉,@types이 경우 ESLint를 적절하게 설정하여 이러한 글로벌유형을 정의해야 합니다.예를 들어,JSX이름 공간@types/react는 ESLint 설정에서 정의해야 하는 글로벌 서드파티 타입입니다.

JavaScript와 TypeScript를 포함한 혼합 프로젝트에서는no-undef규칙(다른 역할과 마찬가지로)을 TypeScript 파일에만 대해 해제할 수 있습니다.overrides.eslintrc.json에 대한 섹션:

"overrides": [
    {
        "files": ["*.ts"],
        "rules": {
            "no-undef": "off"
        }
    }
]

ESLint로 떠나기로 선택한 경우no-undef보풀 규칙에서는 ESLint 구성에서 허용 세트를 수동으로 정의하거나 사전 정의된 환경()env 구성 중 하나를 사용할 수 있습니다.

typscript-eslint 트러블 슈팅가이드에서 다음 절차를 수행합니다.

TypeScript 프로젝트에서는 no-undeflint 규칙을 사용하지 않는 것이 좋습니다.TypeScript 에서는 설정이 필요 없는 체크가 이미 제공되고 있습니다.TypeScript 에서는 이 기능이 대폭 향상됩니다.

고객님의 고객명.eslintrc.js TypeScript 파일을 사용하여 합니다.overrides:

module.exports = {
  root: true,
  extends: '@react-native-community',
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  rules: {
    'no-shadow': 'off',
    '@typescript-eslint/no-shadow': ['error'],
  },
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      rules: {
        'no-undef': 'off',
      },
    },
  ],
};

언급URL : https://stackoverflow.com/questions/64170868/why-eslint-consider-jsx-or-some-react-types-undefined-since-upgrade-typescript