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

[estaub]

Related

#6871
#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.

• @typescript-eslint/no-angle-bracket-type-assertion
• @typescript-eslint/no-array-constructor
• @typescript-eslint/no-namespace
• @typescript-eslint/no-useless-constructor

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.

[ianschmitz]

cc @mrmckeb we will need to figure out the cleanest way to extend our typescript lint rules if we decide to support custom ESLint config file.

[delaaxe]

@estaub Having same issue. Which config object are you talking about? CRA is ignoring config files and only reading from package.json from what I understand

[estaub]

@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.

[jednano]

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.

[mikeaustin]

For me, warnings about unused variables in a "development" environment are not useful, and actually make it more difficult to see actual issues such as missing React hook dependencies. On that note, maybe missing hook dependencies should be promoted to errors?

[NSExceptional]

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

[sahilrajput03]

This is really annoying, please get it sought out..

[sahilrajput03]

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 */

[sahilrajput03]

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.!!!

[NSExceptional]

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

[sahilrajput03]

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

[hojberg]

Am I to understand from this ticket that we can't configure typescript linting at this time?

[sahilrajput03]

@hojberg , with cra4 , its 100% configurabe to use your own rules..., check it here ..

https://gist.github.com/sahilrajput03/bdd1f1d686da2e919eac647c89d87310

[sahilrajput03]

@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.

[tokochi]

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

[vnylbscr]

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

[sahilrajput03]

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

Does that work for you?

[LeonardoDaLuz]

They have created a thousand ways to do this and none of them work. Stressful. Many times the variable is not used, but I will use it later, meanwhile there is this annoying warning.