El contexto es un proyecto bastante grande creado con ReactJs, basado en las reglas de eslint, con esta configuración de 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' } } ] } Desde la actualización de la biblioteca "@typescript-eslint/parser": "^4.0.0" de "@typescript-eslint/parser": "^3.10.1" este siguiente comando...
eslint --fix --ext .js,.jsx,.json,.ts,.tsx . && stylelint --fix '**/*.scss'... trae estos siguientes errores
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 Sé que podría arreglarlos agregando a los prop globals también las teclas JSX: true o KeyboardEventInit: true pero no es la forma en que quiero ir. ¿Alguna idea de lo que está pasando aquí? ¿Dónde está el error de configuración? Muchas gracias
Tuve el mismo problema al intentar declarar variables del tipo JSX.Element en mecanografiado. "JSX":"readonly" a los globals en .eslintrc.json y el problema desapareció. En tu caso sería:
globals: { React: true, google: true, mount: true, mountWithRouter: true, shallow: true, shallowWithRouter: true, context: true, expect: true, jsdom: true, JSX: true, }, Desde el siguiente enlace, obtuve que en realidad usa varias opciones después de JSX . Puede usar true , false , writable o readonly (pero no off ).
La respuesta oficial está aquí https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#i-get-errors-from-the-no-undef- regla-sobre-variables-globales-que-no-están-definidas-aunque-no-hay-errores-de-mecanografiado y dice, de hecho, agregarlos a las variables globals o deshabilitar la regla no-undef porque el mecanografiado ya tiene su propio cheques
EDITAR
La nueva URL de la respuesta oficial está aquí https://github.com/typescript-eslint/typescript-eslint/blob/main/docs/linting/TROUBLESHOOTING.md#i-get-errors-from-the-no-undef-rule -acerca-de-las-variables-globales-que-no-están-definidas-aunque-no-hay-errores-mecanografiados
Y esta es la documentación oficial copiada
## I get errors from the `no-undef` rule about global variables not being defined, even though there are no TypeScript errors The `no-undef` lint 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-undef` lint 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 (ie anything from an `@types` package), then you will have to configure ESLint appropriately to define these global types. For example; the `JSX` namespace from `@types/react` is 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-undef` rule (like any role) can be turned off for TypeScript files alone by adding an `overrides` section to .eslintrc.json: json "overrides": [ { "files": ["*.ts"], "rules": { "no-undef": "off" } } ] If you choose to leave on the ESLint `no-undef` lint rule, you can [manually define the set of allowed `globals` in your ESLint config](https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals), and/or you can use one of the [pre-defined environment (`env`) configurations](https://eslint.org/docs/user-guide/configuring/language-options#specifying-environments).De la guía de solución de problemas de mecanografiado-eslint :
Recomendamos enfáticamente que no use la regla de lint sin definición en proyectos de TypeScript. Las comprobaciones que proporciona ya las proporciona TypeScript sin necesidad de configuración; TypeScript simplemente lo hace significativamente mejor.
En su .eslintrc.js , desactive la regla para los archivos TypeScript usando 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', }, }, ], };