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

【问题标题】：Eslint no-unused-vars error shows for used interface in VueVue中使用的接口的Eslint no-unused-vars错误显示
【发布时间】：2020-07-24 21:21:41
【问题描述】：

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

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

代码

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 {}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/typescript'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'quotes': ['error', 'single'],
    'semi': ['warn', 'always']
  },
  parserOptions: {
    parser: '@typescript-eslint/parser'
  }
};

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

【问题讨论】：

自从您发布此主题后，您找到答案了吗？我也有同样奇怪的事情......

标签： typescript vue.js eslintrc

【解决方案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 - Configuring "no-unused-vars" for TypeScript

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

【讨论】：