`no-unused-vars` 的误报答案

【问题标题】：False positives for `no-unused-vars``no-unused-vars` 的误报
【发布时间】：2020-03-17 18:32:46
【问题描述】：

我收到很多不正确的 ESLint/TS 警告，说枚举案例是“分配了一个值但从未使用过”或导入是“已定义但从未使用过”。这是一些代码。

所有导入都表示它们已定义但从未使用过（尽管您可以在底部的类型中看到它们）。

所有枚举案例都在说它们“分配了一个值但从未使用过”，您可以看到它们确实在所有操作类型中都使用了。

不过，我会注意到，PARAMETER_CHANGE_FAILED 也说“未使用的只读字段 PARAMETER_CHANGE_FAILED”，这实际上是正确的，这种情况从未在我的项目中实际使用过。

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>

在另一个文件中，我从上面的文件中导入了几乎所有内容，并全部使用它们（Webstorm 的“优化导入”已运行），但所有类型都显示为从未使用过。有趣的是，两个导入的枚举并没有给出这个误报错误，尽管其中一个是。

我可以在我的 eslint 配置中将 no-unused-vars 设置为 off，但我宁愿让它真正正常工作。

这是一些配置信息：

// 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",
     ...

【问题讨论】：

标签： eslint

【解决方案1】：

就我而言，它有助于使用@vue/eslint-config-typescript/recommended 配置。

我还必须安装：

eslint-config-typescript（v5，之前我有v4）
@typescript-eslint/eslint-plugin
@typescript-eslint/parser

这里建议：eslint-config-typescript，我使用了以下配置：

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

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

【讨论】：