既然将typescript eslint/parser升级到4.0.0版本，为什么eslint认为JSX或某些react

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

我知道我可以在道具globals中添加密钥JSX: true或KeyboardEventInit: true来修复它们，但这不是我想要的方式。你知道这里发生了什么吗？配置错误在哪里？非常感谢

Answer 1

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

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

Answer 2

官方答案在这里，它说确实要将它们添加到globals或禁用no-undef规则，因为TypeScript已经有了自己的检查：

我从no-undef规则中得到关于未定义全局变量的错误，即使没有TypeScript错误

no-undeflint规则不使用TypeScript来确定存在的全局变量-相反，它依赖于ESLint的配置

强烈建议您不要在上使用no-undeflint规则TypeScript项目。它提供的检查已经由TypeScript不需要配置-TypeScript只需要这明显更好。

从我们的v4.0.0版本开始，这也适用于类型。如果您使用第三方程序包中的全局类型(即@types中的任何类型包(，则必须适当地配置ESLint定义这些全局类型。例如来自的JSX命名空间@types/react是一个全局第三方类型，您必须在ESLint配置。

注意，对于包括JavaScript和TypeScript的混合项目，可以为TypeScript关闭no-undef规则(与任何角色一样(在.eslintrc.json:中添加一个overrides节

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

如果您选择离开ESLintno-undeflint规则，您可以在ESLint中手动定义一组允许的globalsconfig，和/或您可以使用一个预定义的环境(env(配置。

Answer 3

来自typescript esint故障排除指南：

我们强烈建议您不要在TypeScript项目上使用无undef lint规则。它提供的检查已经由TypeScript提供，而无需配置——TypeScript只是做得更好。

在.eslintrc.js中，使用overrides:关闭TypeScript文件的规则

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',
},
},
],
};