Eslint is not marking not defined properties of a component as invalid

[pbrzosko]

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.

[FloEdelmann]

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.

[pbrzosko]

So, should it be vue-tsc that could handle that?

[FloEdelmann]

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.

[pbrzosko]

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?

[FloEdelmann]

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.

[pbrzosko]

Ok, please close this one then. I will post one for vue-tsc team.