Improve docs and error message for vue/no-dupe-keys (#2260)

vuejs · Aug 1, 2023 · 101cabf · 101cabf
1 parent 28efd94
commit 101cabf
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 45 deletions.
diff --git a/docs/rules/no-dupe-keys.md b/docs/rules/no-dupe-keys.md
@@ -11,11 +11,12 @@ since: v3.9.0
 
 - :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
 
-This rule prevents to use duplicated names.
+This rule prevents using duplicate key names.
 
 ## :book: Rule Details
 
-This rule is aimed at preventing duplicated property names.
+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.
 
 <eslint-code-block :rules="{'vue/no-dupe-keys': ['error']}">
 

diff --git a/docs/rules/no-duplicate-attr-inheritance.md b/docs/rules/no-duplicate-attr-inheritance.md
@@ -11,7 +11,7 @@ since: v7.0.0
 
 ## :book: Rule Details
 
-This rule aims to prevent duplicated attribute inheritance.  
+This rule aims to prevent duplicate attribute inheritance.  
 This rule to warn to apply `inheritAttrs: false` when it detects `v-bind="$attrs"` being used.
 
 <eslint-code-block :rules="{'vue/no-duplicate-attr-inheritance': ['error']}">

diff --git a/docs/rules/no-duplicate-attributes.md b/docs/rules/no-duplicate-attributes.md
@@ -11,13 +11,12 @@ since: v3.0.0
 
 - :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
 
-When duplicate arguments exist, only the last one is valid.
-It's possibly mistakes.
+When there are multiple attributes with the same name on a component, only the last one is used and the rest are ignored, so this is usually a mistake.
 
 ## :book: Rule Details
 
 This rule reports duplicate attributes.
-`v-bind:foo` directives are handled as the attributes `foo`.
+`v-bind:foo` directives are handled as the attribute `foo`.
 
 <eslint-code-block :rules="{'vue/no-duplicate-attributes': ['error']}">
 

diff --git a/lib/rules/no-dupe-keys.js b/lib/rules/no-dupe-keys.js
@@ -79,7 +79,8 @@ module.exports = {
       }
     ],
     messages: {
-      duplicatedKey: "Duplicated key '{{name}}'."
+      duplicateKey:
+        "Duplicate key '{{name}}'. May cause name collision in script or template tag."
     }
   },
   /** @param {RuleContext} context */
@@ -96,7 +97,7 @@ module.exports = {
           if (usedNames.has(o.name)) {
             context.report({
               node: o.node,
-              messageId: 'duplicatedKey',
+              messageId: 'duplicateKey',
               data: {
                 name: o.name
               }
@@ -131,7 +132,7 @@ module.exports = {
 
             context.report({
               node: variable.defs[0].node,
-              messageId: 'duplicatedKey',
+              messageId: 'duplicateKey',
               data: {
                 name: prop.propName
               }

diff --git a/tests/lib/rules/no-dupe-keys.js b/tests/lib/rules/no-dupe-keys.js
@@ -529,19 +529,23 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 5
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 10
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 14
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 21
         }
       ]
@@ -575,19 +579,23 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 5
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 10
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 14
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 21
         }
       ]
@@ -612,15 +620,18 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 5
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 9
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 12
         }
       ]
@@ -656,19 +667,23 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 7
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 13
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 16
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 23
         }
       ]
@@ -688,7 +703,8 @@ ruleTester.run('no-dupe-keys', rule, {
       options: [{ groups: ['foo'] }],
       errors: [
         {
-          message: "Duplicated key 'bar'.",
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
           line: 7
         }
       ]
@@ -713,7 +729,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 12
         }
       ]
@@ -736,7 +753,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 10
         }
       ]
@@ -757,7 +775,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 9
         }
       ]
@@ -778,7 +797,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 9
         }
       ]
@@ -799,7 +819,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 9
         }
       ]
@@ -820,7 +841,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 9
         }
       ]
@@ -840,7 +862,8 @@ ruleTester.run('no-dupe-keys', rule, {
       options: [{ groups: ['foo'] }],
       errors: [
         {
-          message: "Duplicated key 'bar'.",
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
           line: 7
         }
       ]
@@ -860,7 +883,8 @@ ruleTester.run('no-dupe-keys', rule, {
       options: [{ groups: ['foo'] }],
       errors: [
         {
-          message: "Duplicated key 'bar'.",
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
           line: 7
         }
       ]
@@ -884,7 +908,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 6
         }
       ]
@@ -904,7 +929,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 7
         }
       ]
@@ -923,7 +949,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 6
         }
       ]
@@ -943,7 +970,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 7
         }
       ]
@@ -963,7 +991,8 @@ ruleTester.run('no-dupe-keys', rule, {
       `,
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 7
         }
       ]
@@ -981,7 +1010,8 @@ ruleTester.run('no-dupe-keys', rule, {
       parser: require.resolve('vue-eslint-parser'),
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 6
         }
       ]
@@ -1008,15 +1038,18 @@ ruleTester.run('no-dupe-keys', rule, {
       parser: require.resolve('vue-eslint-parser'),
       errors: [
         {
-          message: "Duplicated key 'baz'.",
+          message:
+            "Duplicate key 'baz'. May cause name collision in script or template tag.",
           line: 4
         },
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 12
         },
         {
-          message: "Duplicated key 'bar'.",
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
           line: 15
         }
       ]
@@ -1038,11 +1071,13 @@ ruleTester.run('no-dupe-keys', rule, {
       parserOptions: { parser: require.resolve('@typescript-eslint/parser') },
       errors: [
         {
-          message: "Duplicated key 'foo'.",
+          message:
+            "Duplicate key 'foo'. May cause name collision in script or template tag.",
           line: 8
         },
         {
-          message: "Duplicated key 'bar'.",
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
           line: 9
         }
       ]
@@ -1059,7 +1094,8 @@ ruleTester.run('no-dupe-keys', rule, {
       parser: require.resolve('vue-eslint-parser'),
       errors: [
         {
-          message: "Duplicated key 'bar'.",
+          message:
+            "Duplicate key 'bar'. May cause name collision in script or template tag.",
           line: 5
         }
       ]