New: no-template-key (fixes #43)

Author: mysticatea

README.md

@@ -109,6 +109,7 @@ The `--fix` option on the command line automatically fixes problems reported by
 | :white_check_mark: | [no-invalid-v-show](./docs/rules/no-invalid-v-show.md) | disallow invalid v-show directives. |
 | :white_check_mark: | [no-invalid-v-text](./docs/rules/no-invalid-v-text.md) | disallow invalid v-text directives. |
 | :white_check_mark: | [no-parsing-error](./docs/rules/no-parsing-error.md) | disallow parsing errors in `<template>`. |
+|  | [no-template-key](./docs/rules/no-template-key.md) | disallow 'key' attribute on '<template>'. |
 
 <!--RULES_TABLE_END-->
 

docs/rules/no-template-key.md

@@ -0,0 +1,34 @@
+# Disallow 'key' attribute on '<template>' (no-template-key)
+
+Vue.js disallows `key` attribute on `<template>` elements.
+
+## 📖 Rule Details
+
+This rule reports the `<template>` elements which have `key` attribute.
+
+👎 Examples of **incorrect** code for this rule:
+
+```html
+<template>
+    <div>
+        <template key="x"></template>
+        <template v-bind:key="y"></template>
+        <template :key="z"></template>
+    </div>
+</template>
+```
+
+👍 Examples of **correct** code for this rule:
+
+```html
+<template>
+    <div>
+        <div key="x"></div>
+        <template></template>
+    </div>
+</template>
+```
+
+## 🔧 Options
+
+Nothing.

lib/recommended-rules.js

@@ -25,6 +25,7 @@ module.exports = {
   "vue/no-invalid-v-show": "error",
   "vue/no-invalid-v-text": "error",
   "vue/no-parsing-error": "error",
+  "vue/no-template-key": "off",
   "vue/no-textarea-mustache": "error",
   "vue/order-in-components": "off",
   "vue/require-component-is": "error",

lib/rules/no-template-key.js

@@ -0,0 +1,55 @@
+/**
+ * @author Toru Nagashima
+ * @copyright 2016 Toru Nagashima. All rights reserved.
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Helpers
+// ------------------------------------------------------------------------------
+
+/**
+ * Creates AST event handlers for no-template-key.
+ *
+ * @param {RuleContext} context - The rule context.
+ * @returns {object} AST event handlers.
+ */
+function create (context) {
+  utils.registerTemplateBodyVisitor(context, {
+    "VStartTag[id.name='template']" (node) {
+      if (utils.hasAttribute(node, 'key') || utils.hasDirective(node, 'bind', 'key')) {
+        context.report({
+          node: node,
+          loc: node.loc,
+          message: "'<template>' cannot be keyed. Place the key on real elements instead."
+        })
+      }
+    }
+  })
+
+  return {}
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  create,
+  meta: {
+    docs: {
+      description: "disallow 'key' attribute on '<template>'.",
+      category: 'Possible Errors',
+      recommended: false
+    },
+    fixable: false,
+    schema: []
+  }
+}

tests/lib/rules/no-template-key.js

@@ -0,0 +1,64 @@
+/**
+ * @author Toru Nagashima
+ * @copyright 2017 Toru Nagashima. All rights reserved.
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/no-template-key')
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const tester = new RuleTester({
+  parser: 'vue-eslint-parser',
+  parserOptions: { ecmaVersion: 2015 }
+})
+
+tester.run('no-template-key', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: ''
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><template></template></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div key="foo"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:key="foo"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div :key="foo"></div></template>'
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: '<template><div><template key="foo"></template></div></template>',
+      errors: ["'<template>' cannot be keyed. Place the key on real elements instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><template v-bind:key="foo"></template></div></template>',
+      errors: ["'<template>' cannot be keyed. Place the key on real elements instead."]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><template :key="foo"></template></div></template>',
+      errors: ["'<template>' cannot be keyed. Place the key on real elements instead."]
+    }
+  ]
+})