vue-cli4.2+ts+vue-property-decorator开发时eslint检测引入的interface报错：no-unused-vars

[lizhongzhen11]

vue-cli 4.2+ ts搭建的环境，默认关于eslint的配置是这样的：

extends: [
  'plugin:vue/essential',
  'eslint:recommended',
  '@vue/typescript'
]

但是今天在开发中发现，我在 interface.ts 中声明的一个接口，import 进 .vue 文件中：

import { HeaderRightIcons } from '@/type/interface' 
icons: HeaderRightIcons[] = headerRight

然后运行报错，说 no-unused-vars。

我当即懵逼了，记得之前写react就是这样搞得，也没事啊，然后一直找问题。我知道是eslint检测，改下规则就能避免，但是我想它这样提醒我，是不是意味着我写的就是不对？那到底对的写法是什么？？？

这个问题其实就是eslint检测不通过，可以看关于 no-unused-vars 的说明。

找了半天都没找到比较好的写法，倒是找到个类似的issue：vuejs/eslint-config-typescript 5。

他是直接改配置，我配置跟他不同，操作起来也没实现，官方给的是改规则，其实总结起来两种方法：

1. 最省事的，直接把 eslint:recommended 给删掉，但这样不好
2. 改规则，package.json 中的rules增加下面配置：

"no-unused-vars": ["off"]
// 或者
"no-unused-vars": ["warn"]