Vue规范中设置的'vue/no-unused-vars'没起作用

最近搞团队前端基础建设，因为公司使用的是 Vue 项目，为了保证团队的规范和可维护性，做了大量的 ESLint 、 Vetur 等 Vue 项目相关的研究。其中在进行 vue/no-unused-vars 配置中，遇到了些问题和大家分享下。

写这篇文章前我也考查了国内的资料，多数人的解决方案并不是非常好的，例如：

把 scope 改成 slot-scope 就不报错了。参阅[eslint-plugin-vue] [vue/no-unused-vars] 'scope' is defined but never used.
eslint-disable行或者块设置。参阅'scope' is defined but never used

还有些其他的基本类似，上面两个并不能真正较好的解决，如果有兴趣你可以仔细看看下面的内容。

下面内容基于 VSCode 编辑器，通过 Vue CLI 创建的项目，如果不是这个编辑器可能不适用。

重现问题

下面这段代码，使用 ElementUI 的朋友应该经常看到

<el-table-column fixed="right" label="操作" width="100">
  <template slot-scope="scope">
    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
    <el-button type="text" size="small">编辑</el-button>
  </template>
</el-table-column>

这是个没有问题，不会报错的代码。然而再看看下面这段：

<el-table-column label="一个自定义的列" width="200">
  <template slot-scope="scope"> {{otherData.name}} </template>
</el-table-column>

你或许并不需要使用到 scope 变量，然而他的下面会出现红色的波浪号，提示内容如下：

[vue/no-unused-vars]
'scope' is defined but never used.eslint-plugin-vue

相同的问题描述，也有人曾经提过：Disable unused variable error

你需要明白的 ESLint

很多项目为了方便都是通过 Vue CLI 创建的，他会安装eslint-plugin-vue，默认的 ESLint 配置文件是很简单的，也只是 Vue 的基本风格规范校验（ plugin:vue/essential ）。为了更加规范编码，我这边会进行修改配置文件为 plugin:vue/recommended 。

这样一下子，项目中的红色波浪就多了，很多其实也可以通过 ESLint 的 CLI 进行自动修复，配合 VSCode 的保存自动修复功能非常好用，这里不过多介绍。

不过上面的问题，你也许可以通过文档查到设置vue/no-unused-vars，直接将其禁用，比如在 rules 里面添加一行设置如下：

rules: {
  'vue/no-unused-vars': 'off',
}

可是并没有起到作用，你可能会正好搜到另一份文档https://eslint.vuejs.org/rules/no-unused-vars.html，设置了：

rules: {
  "vue/no-unused-vars": ["error", {
    "ignorePattern": "^_"
  }]
}

也没做用，那是当然的，因为上面这个配置针对 Vue3.x 的，可要看仔细顶部的说明。

This is a documentation for version 7.0.0-beta.2 .

那怎么办？不要慌，这里我提供了两个较好方案。

将 scope 换成 {}，这个是最简单快速的方案，例如以上示例的代码片段可修改为：
```
<el-table-column label="一个自定义的列" width="200">
  <template slot-scope="{}"> {{otherData.name}} </template>
</el-table-column>
```
参阅：html attribute in vue : eslint raises error "defined but never used"
这个相对复杂些，并且需要配合 VSCode 设置，大致如下：

首先、ESLint 的配置依旧要用 'vue/no-unused-vars': 'off' ，

其次、编辑器 VSCode 也要进行配置，添加一条 "vetur.validation.template": false （前提是启用了 Vetur 插件）

参阅：vue/no-unused-vars not turning off

所以说第二条方案是推荐的，而红色波浪并不是因为 ESLint 配置错误造成，而是 Vetur 内置服务检测触发，当然也许你会想到 Vetur 为什么没有读取 ESLint 的配置进行，这个我精力有限，暂时也没办法深入研究。

其实还有个毁灭性的操作，就是关闭 Vetur，哈哈哈，开个玩笑，用 VSCode 开发 Vue 项目，这个当然不能关啦。

结语

项目开发中经常遇到奇奇怪怪的问题，除了配置检查（可能不同版本造成的配置错误）、还要注意插件、自定义编辑器设置等多方面因素进行问题排除。

当然最重要的还是要善于 Google 搜索，多看相关插件的 Issues，Stackoverflow。最后献上几个 Vue 规范的资料，大家没事也多看看。

后面我会写一篇关于 Vue-CLI 开发的项目规范配置文章，敬请期待。

Vue规范中设置的'vue/no-unused-vars'没起作用

重现问题

你需要明白的 ESLint

结语

whidy