vue/require-explicit-slots does not work when type reference is imported
Closed this issue · 4 comments
Checklist
- I have tried restarting my IDE and the issue persists.
- I have read the FAQ and my problem is not listed.
Tell us about your environment
- ESLint version: 8.57
- eslint-plugin-vue version: 10.0.0
- Vue version: ^3.5
- Node version: 18.20
- Operating System: Ubuntu 24.10
Please show your full configuration:
// baseConfig
{
root: true,
env: {
browser: true,
es6: true,
jest: true,
node: true
},
extends: ["eslint:recommended", "plugin:vue/recommended", "@vue/prettier"],
parser: "vue-eslint-parser",
parserOptions: {
parser: "@typescript-eslint/parser",
ecmaVersion: 2020,
sourceType: "module",
ecmaFeatures: {
jsx: true
}
},
ignorePatterns: ["**/target/", "**/generated/"],
overrides: [
{
files: ["**/*.ts", "**/*.tsx"],
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:vue/recommended",
"@vue/prettier"
]
}
],
rules: {
"@typescript-eslint/no-unused-vars": ["warn"],
"vue/multi-word-component-names": [
"error",
{
ignores: []
}
],
"vue/require-explicit-slots": ["warn"]
}
}What did you do?
<script setup lang="ts">
import type { BmButtonSlots } from "./button.type";
// ...
const slots = defineSlots<BmButtonSlots>();
</script>
<template>
<BmButton>
<slot v-else name="icon">
<BmIcon v-if="icon" :icon="icon" />
</slot>
<span class="label-wrapper" :class="{ 'sr-only': isIconVariant }">
<slot>
{{ label }}
</slot>
</span>
</BmButton>
</template>What did you expect to happen?
should not warn about require-explicit-slot
What actually happened?
Slots must be explicitly defined.eslint[vue/require-explicit-slots](https://eslint.vuejs.org/rules/require-explicit-slots.html)
It works on my end #2786.
Could you please provide a Stackblitz or GitHub repo so we can debug this issue?
It works on my end #2786.
Could you please provide a Stackblitz or GitHub repo so we can debug this issue?
I 'll try to reproduce on a stackblitz.
That could lead me towards what I am doing wrong here. Since it works on your side , it might well be an issue on my project config
It works on my end #2786. Could you please provide a Stackblitz or GitHub repo so we can debug this issue?
here's a Stackblitz with that issue :
https://stackblitz.com/edit/vitejs-vite-wxnegeku?file=src%2Fcomponents%2FHelloWorld.vue
in COmponent HelloWOrl you have a slot with a DefineSlot() where MySlot is an interface imported from a file located at src/
When running npx eslint ./src, we have a warning on defineSlot
You'll need to configure the following parameters:
"parserOptions": {
// ...
"project": ["./tsconfig.app.json", "./tsconfig.node.json"],
"extraFileExtensions": [".vue"]
}