如何让 ESLint 理解 vue pug 模板中使用的函数？

Question

我有以下 vue 组件。

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

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

当我运行 linter 时。 Linter 抱怨 Warning:(9, 10) ESLint: 'onLogout' is defined but never used. (@typescript-eslint/no-unused-vars)

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

Answer 1

您可以使用 eslint-plugin-vue-pug. This plugin extends eslint-plugin-vue 来支持 pug 模板。安装后，您必须将插件添加到您的 eslint 配置中：

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

插件只支持直接对应html语法的pug语法。您可以在规则 no-pug-control-flow.

的描述中找到更多详细信息

How to make ESLint understand that function is used in vue pug template?