Whidy Writes

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

创建于:最后更新:whidy

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

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

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

下面内容基于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 .

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

  1. 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"

  2. 这个相对复杂些,并且需要配合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开发的项目规范配置文章,敬请期待。

avatar

Whidy

一名爱折腾的前端开发工程师,喜欢玩游戏听歌写东西 ฅʕ•̫͡•ʔฅ