create-react-app: [eslint-config-react-app] Can't disable rule "@typescript-eslint/no-unused-vars" in config, outside of CRA

https://github.com/facebook/create-react-app/issues/6871 https://github.com/facebook/create-react-app/issues/6915

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

no-unused-vars, etc.

Environment

eslint-config-react-app@^4.0.0:
  version "4.0.0"
eslint@^5.16.0:
  version "5.16.0"
"@typescript-eslint/eslint-plugin@^1.7.0":
  version "1.7.0"
"@typescript-eslint/parser@1.7.0", "@typescript-eslint/parser@^1.7.0":
  version "1.7.0"

Steps to Reproduce

In .eslintrc.js, when react-app is extended, e.g. extends: ['plugin:@typescript-eslint/recommended', "react-app"], it is impossible to disable the @typescript-eslint/no-unused-vars rule, e.g.,

    "rules": {
        "no-unused-vars":"off",
        "@typescript-eslint/no-unused-vars": "off",

eslint is invoked at the command line using

npx eslint --ext .js,.jsx,.ts,.tsx src No error message regarding the configuration is emitted; it simply ignores the configuration.

After reading the code, I suspect that these rules also suffer from the same petrification.

Workaround

Include this at the top level of the config object:

    "overrides": {
        files: ['**/*.ts', '**/*.tsx'],
        parser: '@typescript-eslint/parser',
        parserOptions: {
            ecmaVersion: 2018,
            sourceType: 'module',
            ecmaFeatures: {
                jsx: true,
            },

            // typescript-eslint specific options
            warnOnUnsupportedTypeScriptVersion: true,
        },
        plugins: ['@typescript-eslint'],

        rules: {
            "@typescript-eslint/no-unused-vars": "off",
        }
    },

This workaround is probably much more verbose than is wise or necessary, but it is sufficient.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 30
Comments: 19 (1 by maintainers)

Most upvoted comments

Actually this can be solved easily via putting this at the start of the file.(although we’d need to do it for all files) /* eslint-disable @typescript-eslint/no-unused-vars */

+22

sahilrajput03 on Jul 26, 2020

solipsistic

[ˌsäləpˈsistik] DEFINITION adjective form of solipsism

solipsism

[ˈsäləpˌsizəm] NOUN the view or theory that the self is all that can be known to exist.

+22

jednano on Sep 26, 2019

if you are using Create-react-app, there is no need to install anything or Eject, the simple solution is:

since the no-unused-vars-errors is thrown from webpackHotDevClient.js, you just need to go to /node_modules/react-scripts/config/webpack.config.dev.js. on “new ESLintPlugin” rules just add :

'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'no-unused-vars': 0

+14

tokochi on Apr 17, 2021

@delaaxe That’s correct about CRA; it’s causing a lot of grief among new Typescript adopters of CRA who don’t read the invisible fine print about “Typescript support”. As noted in the title, I was writing about using the react-app rules outside of CRA. Both problems show an unfortunately solipsistic line of thinking about lint in this project, that has origins I can only guess at.

+13

estaub on May 8, 2019

Actually this can be solved easily via putting this at the start of the file.(although we’d need to do it for all files) /* eslint-disable @typescript-eslint/no-unused-vars */

Idk why you guys have disliked my suggestion, thought i know its not a fix, but actual thing by which can be dealt easily. This works good for me though.!!!

+11

sahilrajput03 on Jul 31, 2020

Because it’s not a fix. It’s a crappy workaround.

NSExceptional on Jul 31, 2020

There’s difference between workaround and crappy workaround, that seems difficult to digest for some people.

sahilrajput03 on Jul 31, 2020

is still there no solution for this problem? its so annoying.

vnylbscr on Aug 30, 2021

Did you really 👍🏼 your own post? Lmao

NSExceptional on Oct 27, 2020

I’m also facing this issue, super annoying. +1

NSExceptional on Jul 5, 2020

This is really annoying, please get it sought out…

sahilrajput03 on Jul 20, 2020

@estaub , you can close this issue i guess coz with cra 4 you can definitely configure these warnings just with the specifying rules inside pakcage.json file as i mentioned in above message.

sahilrajput03 on Oct 31, 2020