False positives for `no-unused-vars`

Question

I'm getting a lot of incorrect ESLint/TS warnings saying enum cases are "Assigned a value but never used" or that imports are "defined but never used". Here's some code.

All the imports are saying they're defined but never used (though you can see they are in the types at the bottom).

All the enum cases are saying they're "Assigned a value but never used", and you can see that they are indeed used in all the action types.

I will note, though, that PARAMETER_CHANGE_FAILED also says "Unused readonly field PARAMETER_CHANGE_FAILED" which is actually true, that case is never actually used in my project.

import {ThunkAction, ThunkDispatch} from "redux-thunk";
import {AppState} from "../reducers/index.reducer";

export type ChangeParameterAction = {
  type: MyActionType.PARAMETER_CHANGED,
  parameter: ParameterName,
  value: any
}

export type SetParametersAction = {
  type: MyActionType.PARAMETERS_SET,
  settings: { [name: string]: any }
}

export type ActiveTabAction = {
  type: MyActionType.TAB_CHANGED,
  tab: Tab
}

export type ErrorAction = {
  type: MyErrorType,
  error: Error
}

export enum MyErrorType{
  ERROR = 'ERROR',
  PARAMETER_CHANGE_FAILED = 'PARAMETER_CHANGE_FAILED',
}

export enum MyActionType{
  TAB_CHANGED = 'TAB_CHANGED',
  PARAMETER_CHANGED = 'PARAMETER_CHANGED',
  PARAMETERS_SET = 'PARAMETERS_SET',
}

export type SettingsAction = ChangeParameterAction | SetParametersAction;

export type FirmmAction =
  | ActiveTabAction
  | UpdateActiveSeriesAction
  | UpdateStudyAction
  | UpdateDataAction
  | SettingsAction
  | ErrorAction

export type MyThunkAction = ThunkAction<void, AppState, {}, MyAction>
export type MyThunkDispatch = ThunkDispatch<{}, {}, MyAction>

In another file, I import pretty much everything from the file above, and use them all (Webstorm's 'Optimize Imports' has been run) but all the types are showing as never used. Interestingly, two of the imported enums aren't giving this false positive error, although one of them is.

I can set no-unused-vars to off in my eslint config, but I'd rather have it actually work properly.

Here's some config info:

// eslintrc 
module.exports = {
    env: {
        browser: true,
        es6: true,
    },
    extends: [
        'react-app',
    ],
    globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly',
    },
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 2018,
        sourceType: 'module',
    },
    plugins: [
        'react',
        '@typescript-eslint',
    ],          
    rules: {
        // TODO: Adding this rule 
        // "no-unused-vars": "off"
    },
};

// package.json dependencies
    ...
    "eslint-config-react-app": "^3.0.5",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-typescript": "^1.0.0-rc.3",
    ...
// package.json devDependencies
    ... 
    "@typescript-eslint/eslint-plugin": "^2.7.0",
    "@typescript-eslint/parser": "^2.7.0",
    "eslint": "^6.6.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.16.0",
    "eslint-plugin-react-hooks": "^1.7.0",
     ...

Answer 1

In my case, it helped to use @vue/eslint-config-typescript/recommended configuration.

I also had to install:

• eslint-config-typescript (v5, previously I had v4)
• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser

As suggested here: eslint-config-typescript, I used the following config:

extends: [
  'plugin:vue/essential',
  '@vue/typescript/recommended', // corrects the 'no-unused-vars'

  '@vue/prettier',
  '@vue/prettier/@typescript-eslint', // for prettier to work
],

---