为什么 eslint 考虑 JSX 或某些 react @types 未定义,因为将 typescript-eslint/parser 升级到版本 4.0.0

新手上路,请多包涵

上下文是用 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: trueKeyboardEventInit: true 但这不是我想走的路对这里发生的事情有什么想法吗?配置错误在哪里?非常感谢

原文由 axel 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 413
2 个回答

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

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

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

我们强烈建议您不要在 TypeScript 项目上使用 no-undef lint 规则。它提供的检查已经由 TypeScript 提供,无需配置 - TypeScript 在这方面做得更好。

从我们的 v4.0.0 版本开始,这也适用于类型。如果您使用第三方包中的全局类型(即 @types 包中的任何内容),那么您将必须适当地配置 ESLint 以定义这些全局类型。例如;来自 @types/reactJSX 命名空间是一个全局的第 3 方类型,您必须在 ESLint 配置中定义它。

请注意,对于包含 JavaScript 和 TypeScript 的混合项目,可以通过将 overrides 部分添加到 .eslintrc.json 来单独为 TypeScript 文件关闭 no-undef 规则(与任何角色一样) :

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

如果您选择保留 ESLint no-undef lint 规则,您可以 在 ESLint 配置中手动定义一组允许的 globals 和/或您可以使用其中一个 预定义环境( env )配置

原文由 axel 发布,翻译遵循 CC BY-SA 4.0 许可协议

在打字稿中尝试声明类型为 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 之后使用了几个选项。 You could use true , false , writable or readonly (but not off ).

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

原文由 André Guimarães Aragon 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏