自从将 typescript-eslint/parser 升级到版本 4.0.0 以来，为什么 eslint 考虑 JSX 或某些 React @types 未定义

问题描述 投票：0回答：4

上下文是一个相当大的项目，使用 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
，但这不是我想要的方式。 对这里发生的事情有什么想法吗？哪里配置错误？ 非常感谢

javascript reactjs typescript eslint rules
4个回答
85
投票

在尝试在打字稿中声明 

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

55
投票

官方答案是here，它确实表示将它们添加到

globals
或禁用
no-undef
规则，因为TypeScript已经有了自己的检查：

即使没有 TypeScript 错误，我也从 

no-undef
规则中收到关于未定义全局变量的错误

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

我们强烈建议您不要使用 

no-undef
lint 规则 TypeScript 项目。它提供的检查已经由 TypeScript 无需配置 - TypeScript 就可以 这明显更好。

从我们的 v4.0.0 版本开始，这也适用于类型。如果你使用 来自第 3 方包的全局类型（即来自 

@types
的任何内容） 包），那么你必须适当地配置 ESLint 来 定义这些全局类型。例如; 
JSX
命名空间来自 
@types/react
是一个全局第三方类型，您必须在您的 ESLint 配置。

注意，对于包含 JavaScript 和 TypeScript 的混合项目， 可以为 TypeScript 关闭 

no-undef
规则（与任何角色一样） 通过向 .eslintrc.json 添加 
overrides
部分来单独处理文件：

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

如果您选择保留 ESLint 

no-undef
lint 规则，您可以 在 ESLint 中手动定义允许的 
globals
集合 配置， 和/或者您可以使用 预定义环境之一 (
env
) 配置。

9
投票

来自 typescript-eslint 故障排除指南：

我们强烈建议您不要在 TypeScript 项目上使用 no-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',
      },
    },
  ],
};
0
投票

在最新版本的 React (v17+) 中使用 

ReactElement
;

import { ReactElement } from 'react';

export default function Page(): ReactElement {
 return <>Page</>
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.