Improve error message for `vue/no-dupe-keys`

[vincerubinetti]

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.45.0
• eslint-plugin-vue version: 9.15.1
• Node version: 18
• Operating System: MacOS M1

Please show your full configuration:

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-recommended",
    "plugin:vuejs-accessibility/recommended",
    "eslint:recommended",
    "@vue/eslint-config-typescript",
    "@vue/eslint-config-prettier/skip-formatting",
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },

  rules: {
    "prettier/prettier": "warn",
  },
};

What did you do?

<script setup lang="ts">
import { debounce } from "lodash"; // <-- error thrown on this line

type Props = {
  /** delay for debounce in ms */
  debounce?: number;
};

const props = defineProps<Props>();

console.log(props.debounce); // i'm using the prop like this, not with any destructuring
</script>

What did you expect to happen?

These two names are in different contexts, and don't refer to the same thing. I'm not sure if this is expected behavior, but if it is, I find that a little weird, because they don't really conflict.

Repository to reproduce this issue
dupe keys.zip

[vincerubinetti]

Actually I think this is intended behavior because there would be a conflict in the <template>, even if there isn't a conflict in the <script>. Just a side effect of Vue automatically defining props in the <template> without any prefix/namespace. The magic/brevity comes at a cost sometimes I guess.

It just caught me off guard because my code wasn't throwing these errors until I updated eslint/prettier/plugins/etc. Before that, anywhere where I was using duplicate props and imports, I was only using them in <script>, and so I guess that's why I never ran into any runtime/compiling errors in the <template>.

[vincerubinetti]

Re-opening this because maybe the error message could be better? Took me a minute to realize what was going on. Or maybe there could be some kind of option to ignore if the duplicates don't actually lead to a conflict? Not sure how hard that would be to implement.

[FloEdelmann]

Yes, the rule is working as intended. Could you suggest a better error message?

[vincerubinetti]

This might not be consistent with the brevity or granularity of the other error messages, but I might try something like:

Duplicate key 'debounce' may cause conflict in <script> or <template>.

Alternatively, and perhaps more appropriately, just update the docs page. Checking this page was the first thing I did, and some clarification could've helped.

This rule prevents to use duplicated names.

Elaborating on this (in general I think rules descriptions should be more than 1 terse sentence):

This rule prevents duplicate props/data/methods/etc. key names defined on a component. Even if a key name does not conflict in the <script> tag itself, it still may lead to a conflict in the <template> since Vue allows directly accessing these keys from there.

[FloEdelmann]

I think both changes are a good improvement! Would you fancy opening a PR?