Eslint no-unused-vars 错误显示在 Vue 中使用的接口

Question

我在 Vue CLI 和 Typescript 中使用 Vue。
我从 vuex 文件导入接口并将其用于mapState类型注释。
但是 eslint 显示了一个错误。

'State' is defined but never used. eslint(no-unused-vars)

代码

'State' is defined but never used. eslint(no-unused-vars)

.eslintrc.js

import { Component, Vue } from 'vue-property-decorator';
import { mapState } from 'vuex';
import { State } from '@/store/index';

@Component({
  computed: mapState<State>({
    cards: (state: State) => state.user.cards,
  })
})
export default class Home extends Vue {}

我应该怎么做才能看到 eslint 错误？

Answer 1

解决方案：

EsLint 默认no-unused-vars有一个错误，会像您解释的那样重现。根据我的消息来源 [1]，应该使用@typescript-eslint/no-unused-vars如下方法来修复它：

overrides: [
   // Fix no-used-vars when importing ts types in .vue files
   {
     files: ["*.vue"],
     rules: {
        'no-unused-vars': 'off',
        '@typescript-eslint/no-unused-vars': 'error'
     }
  }
]

来源 [2] 是同一主题的另一个问题。在那里，我的解决方案 [1] 是其中的一种选择。在[2]和[3]中据说你需要像这样安装@typescript-eslint/eslint-plugin：@typescript-eslint/parser

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

来源：

[1] https://github.com/vuejs/eslint-config-typescript/issues/14

[2] ESLint - 为 TypeScript 配置“no-unused-vars”

[3] https://khalilstemmler.com/blogs/typescript/eslint-for-typescript/