vuejs
Eslint is not marking not defined properties of a component as invalid
Checklist
- [x] I have tried restarting my IDE and the issue persists.
- [x] I have read the FAQ and my problem is not listed.
Tell us about your environment
- ESLint version: 8.24.0
- eslint-plugin-vue version: 9.5.1
- Vue version: 3.4.16
- Node version: 20.11.0
- Operating System: OSX Sonoma 14.4.1
Please show your full configuration:
module.exports = {
root: true,
plugins: ["no-only-tests"],
env: {
node: true,
},
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/eslint-config-typescript",
"@vue/eslint-config-prettier",
],
parserOptions: {
ecmaVersion: "latest",
},
rules: {
"prettier/prettier": [
"error",
{
endOfLine: "auto",
},
],
"no-only-tests/no-only-tests": process.env.NODE_ENV === "production" ? "error" : "warn",
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"@typescript-eslint/consistent-type-imports": "error",
},
};
What did you do?
<!-- ComponentA -->
<script setup lang="ts">
const props = defineProps({
message: {
type: String,
},
});
</script>
<template>Hello {{ props.message }}</template>
<!-- ComponentB -->
<script setup lang="ts">
import ComponentA from "./ComponentA.vue";
import { ref } from "vue";
const message = ref("Test");
</script>
<template><ComponentA :property-that-doesnt-exist="message" other-property="Value" /></template>
What did you expect to happen? I would expect that eslint will mark "property-that-doesnt-exist" and "other-property" as invalid, as they are neither HTML attributes nor properties defined on the component.
What actually happened? No error message.
Repository to reproduce this issue Code is provided in the issue description.
eslint-plugin-vue doesn't have access to other components' files, so this kind of check is impossible. Also note that property-that-doesnt-exist will actually render as an HTML attribute.
vue-tsc will also not report this as an error because – as I said – that property-that-doesnt-exist is not invalid and will actually render as an HTML attribute.
But I guess there is a finite set of HTML attributes plus the ones starting with data-* and aria-*. So in theory you could validate whether provided attribute is a component property or a valid HTML attribute and then have a fail if not?
But I guess there is a finite set of HTML attributes plus the ones starting with data-* and aria-*.
The aria-* are also explicitly defined, so e.g. aria-foo should then also be reported.
So in theory you could validate whether provided attribute is a component property or a valid HTML attribute and then have a fail if not?
In vue-tsc, this would potentially be possible. In eslint-plugin-vue, this is infeasible, because we can't distinguish "invalid" HTML properties from valid component props.