eslint-plugin-vue - npm Package Compare versions

Comparing version 3.3.0 to 3.4.0

lib/recommended-rules.js

@@ -28,2 +28,3 @@ /*
   "vue/no-parsing-error": "error",
+  "vue/no-template-key": "off",
   "vue/no-textarea-mustache": "error",
@@ -30,0 +31,0 @@ "vue/order-in-components": "off",

lib/rules/no-invalid-v-for.js

@@ -20,11 +20,12 @@ /**
  * Check whether the given attribute is using the variables which are defined by `v-for` directives.
- * @param {ASTNode} node The attribute node to check.
+ * @param {ASTNode} vFor The attribute node of `v-for` to check.
+ * @param {ASTNode} vBindKey The attribute node of `v-bind:key` to check.
  * @returns {boolean} `true` if the node is using the variables which are defined by `v-for` directives.
  */
-function isUsingIterationVar (node) {
-  if (node.value == null) {
+function isUsingIterationVar (vFor, vBindKey) {
+  if (vBindKey.value == null) {
     return false
   }
-  const references = node.value.references
-  const variables = node.parent.parent.variables
+  const references = vBindKey.value.references
+  const variables = vFor.parent.parent.variables
 
@@ -40,2 +41,28 @@ return references.some(reference =>
 /**
+ * Check the given element about `v-bind:key` attributes.
+ * @param {RuleContext} context The rule context to report.
+ * @param {ASTNode} vFor The attribute node of `v-for` to check.
+ * @param {ASTNode} element The element node to check.
+ */
+function checkKey (context, vFor, element) {
+  const startTag = element.startTag
+  const vBindKey = utils.getDirective(startTag, 'bind', 'key')
+
+  if (utils.isCustomComponent(startTag) && vBindKey == null) {
+    context.report({
+      node: startTag,
+      loc: startTag.loc,
+      message: "Custom elements in iteration require 'v-bind:key' directives."
+    })
+  }
+  if (vBindKey != null && !isUsingIterationVar(vFor, vBindKey)) {
+    context.report({
+      node: vBindKey,
+      loc: vBindKey.loc,
+      message: "Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."
+    })
+  }
+}
+
+/**
  * Creates AST event handlers for no-invalid-v-for.
@@ -51,17 +78,12 @@ *
     "VAttribute[directive=true][key.name='for']" (node) {
-      const vBindKey = utils.getDirective(node.parent, 'bind', 'key')
-      if (utils.isCustomComponent(node.parent) && vBindKey == null) {
-        context.report({
-          node,
-          loc: node.loc,
-          message: "'v-for' directives on custom elements require 'v-bind:key' directives."
-        })
+      const element = node.parent.parent
+
+      checkKey(context, node, element)
+      if (element.startTag.id.name === 'template') {
+        for (const child of element.children) {
+          if (child.type === 'VElement') {
+            checkKey(context, node, child)
+          }
+        }
       }
-      if (vBindKey != null && !isUsingIterationVar(vBindKey)) {
-        context.report({
-          node: vBindKey,
-          loc: vBindKey.loc,
-          message: "Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."
-        })
-      }
 
@@ -68,0 +90,0 @@ if (node.key.argument) {

lib/rules/require-v-for-key.js

@@ -19,2 +19,19 @@ /**
 /**
+ * Check the given element about `v-bind:key` attributes.
+ * @param {RuleContext} context The rule context to report.
+ * @param {ASTNode} element The element node to check.
+ */
+function checkKey (context, element) {
+  const startTag = element.startTag
+
+  if (startTag.id.name !== 'template' && !utils.isCustomComponent(startTag) && !utils.hasDirective(startTag, 'bind', 'key')) {
+    context.report({
+      node: startTag,
+      loc: startTag.loc,
+      message: "Elements in iteration expect to have 'v-bind:key' directives."
+    })
+  }
+}
+
+/**
  * Creates AST event handlers for require-v-for-key.
@@ -28,8 +45,11 @@ *
     "VAttribute[directive=true][key.name='for']" (node) {
-      if (!utils.hasDirective(node.parent, 'bind', 'key') && !utils.isCustomComponent(node.parent)) {
-        context.report({
-          node: node.parent,
-          loc: node.parent.loc,
-          message: "'v-for' directives require 'v-bind:key' directives."
-        })
+      const element = node.parent.parent
+
+      checkKey(context, element)
+      if (element.startTag.id.name === 'template') {
+        for (const child of element.children) {
+          if (child.type === 'VElement') {
+            checkKey(context, child)
+          }
+        }
       }
@@ -36,0 +56,0 @@ }

package.json

 {
   "name": "eslint-plugin-vue",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Official ESLint plugin for Vue.js",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -112,2 +112,3 @@ # eslint-plugin-vue
 | :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>'. |
 
@@ -114,0 +115,0 @@ <!--RULES_TABLE_END-->

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84381

increased by3.55%

Number of package files

39

increased by2.63%

Lines of code

2337

increased by3.77%

Number of lines in readme file

141

increased by0.71%

No dependency changes