The context is pretty big project built with ReactJs, based on eslint rules, with this eslint configuration
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'
}
}
]
}
Since the upgrade of the library "@typescript-eslint/parser": "^4.0.0" from "@typescript-eslint/parser": "^3.10.1" this following command ...
eslint --fix --ext .js,.jsx,.json,.ts,.tsx . && stylelint --fix '**/*.scss'
... brings these following errors
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
I know I could fix them adding to the prop globals also the keys JSX: true or KeyboardEventInit: true but it is not the way I want to go.
Any ideas of what is going on here? Where is the configuration error?
Thanks a lot
Official answer is here and it says indeed to add them to globals or to disable the no-undef rule because TypeScript already has already its own checks:
I get errors from the
no-undefrule about global variables not being defined, even though there are no TypeScript errorsThe
no-undeflint rule does not use TypeScript to determine the global variables that exist - instead, it relies upon ESLint's configuration.We strongly recommend that you do not use the
no-undeflint rule on TypeScript projects. The checks it provides are already provided by TypeScript without the need for configuration - TypeScript just does this significantly better.As of our v4.0.0 release, this also applies to types. If you use global types from a 3rd party package (i.e. anything from an
@typespackage), then you will have to configure ESLint appropriately to define these global types. For example; theJSXnamespace from@types/reactis a global 3rd party type that you must define in your ESLint config.Note, that for a mixed project including JavaScript and TypeScript, the
no-undefrule (like any role) can be turned off for TypeScript files alone by adding anoverridessection to .eslintrc.json:"overrides": [ { "files": ["*.ts"], "rules": { "no-undef": "off" } } ]If you choose to leave on the ESLint
no-undeflint rule, you can manually define the set of allowedglobalsin your ESLint config, and/or you can use one of the pre-defined environment (env) configurations.