如何让 ESLint 理解在 Vue Pug 模板中使用的函数？

Question

我有一个Vue组件如下。

<template lang="pug">
button(@click="onLogout") Logout
</template>

<script setup lang="ts">
function onLogout() {
  // some logic
}
</script>

当我运行代码检查(linter)时，检查工具提示出错：警告：(9,10)ESLint: 'onLogout'已经定义但从未使用。 (@typescript-eslint/no-unused-vars)

我该如何让ESLint知道模板中已经使用了onLogout函数？

- Pavan Kumar

Answer 1

你可以使用eslint-plugin-vue-pug插件。该插件扩展了eslint-plugin-vue来支持pug模板。安装完成后，你必须将该插件添加到你的eslint配置中：

module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:vue-pug/vue3-recommended'
  ]
}

该插件仅支持与HTML语法直接对应的pug语法。您可以在规则描述中找到有关更多细节no-pug-control-flow。

- RWAM

---

你知道这个只适用于Vue3吗？我尝试添加 plugin:vue-pug/strongly-recommended，但似乎没有起作用。 - lthh89vt

它在我的Vue3项目中运行良好！ - sarkiroka