Is there an automatic solution to check for data vs props name collisions?

[NSNS33]

So I am studying props atm and I am, frankly, baffled by the fact, that you can create name collision between data() properties and props. I have been searching for an extension/linter or vue settings that would automatically throw an error if such name collision occurs.

To be honest, so far it is incomprehensible to me. If it is bad to have name collision between props and data then why don't props have an explicit, enforced syntax that would clearly distinguish them from data properties? A simple, enforced prefix would suffice.

What am I missing? What's the catch? Why do devs allow this and force users to check for collisions manually? Is there a benefit in it that I am missing currently?

Thank you!

[ShGKme]

There is a ESLint rule: https://eslint.vuejs.org/rules/no-dupe-keys.html

[NSNS33]

Thank you.

I have already tried the rule but based on my test and Chat GPT, the rule doesn't work for data vs props name collision check within a single component. Am I mistaken? This is my eslintrc.js config:

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/no-dupe-keys': 'error'
  }
}

[NSNS33]

And I would expect this code to throw a name collision error with the "name" prop/property but it doesn't:

<script>
export default {
  props: ["name", "phoneNumber", "emailAddress"],
  data() {
    return {
      detailsAreVisible: false,
       friend: {
      //   id: "manuel",
         name: "Manuel Lorenz",
      //   phone: "123 456 789",
      //   email: "[email protected]",
       },
    };
  },
};
</script>

[NSNS33]

OK, I finally know where the issue is. Eslint doesn't complain because the "name" data property is nested in the "friend" object. When I place the "name" property directly into the return block of the data method Eslint finally recognizes the name collision. However, I am now not sure if having the property nested in an object is safe enough to prevent all possible issues with the name collision.

Is it safe?

Thank you for your patience.

[gangsthub]

Exactly, since it's a nested property, there's no top-level names collision.

[NSNS33]

Thank you for the confirmation!