valid-v-for.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. /**
  2. * @author Toru Nagashima
  3. * @copyright 2017 Toru Nagashima. All rights reserved.
  4. * See LICENSE file in root directory for full license.
  5. */
  6. 'use strict'
  7. // ------------------------------------------------------------------------------
  8. // Requirements
  9. // ------------------------------------------------------------------------------
  10. const utils = require('../utils')
  11. // ------------------------------------------------------------------------------
  12. // Helpers
  13. // ------------------------------------------------------------------------------
  14. /**
  15. * Check whether the given attribute is using the variables which are defined by `v-for` directives.
  16. * @param {VDirective} vFor The attribute node of `v-for` to check.
  17. * @param {VDirective} vBindKey The attribute node of `v-bind:key` to check.
  18. * @returns {boolean} `true` if the node is using the variables which are defined by `v-for` directives.
  19. */
  20. function isUsingIterationVar(vFor, vBindKey) {
  21. if (vBindKey.value == null) {
  22. return false
  23. }
  24. const references = vBindKey.value.references
  25. const variables = vFor.parent.parent.variables
  26. return references.some((reference) =>
  27. variables.some(
  28. (variable) =>
  29. variable.id.name === reference.id.name && variable.kind === 'v-for'
  30. )
  31. )
  32. }
  33. /**
  34. * Check the child element in tempalte v-for about `v-bind:key` attributes.
  35. * @param {RuleContext} context The rule context to report.
  36. * @param {VDirective} vFor The attribute node of `v-for` to check.
  37. * @param {VElement} child The child node to check.
  38. */
  39. function checkChildKey(context, vFor, child) {
  40. const childFor = utils.getDirective(child, 'for')
  41. // if child has v-for, check if parent iterator is used in v-for
  42. if (childFor != null) {
  43. const childForRefs = (childFor.value && childFor.value.references) || []
  44. const variables = vFor.parent.parent.variables
  45. const usedInFor = childForRefs.some((cref) =>
  46. variables.some(
  47. (variable) =>
  48. cref.id.name === variable.id.name && variable.kind === 'v-for'
  49. )
  50. )
  51. // if parent iterator is used, skip other checks
  52. // iterator usage will be checked later by child v-for
  53. if (usedInFor) {
  54. return
  55. }
  56. }
  57. // otherwise, check if parent iterator is directly used in child's key
  58. checkKey(context, vFor, child)
  59. }
  60. /**
  61. * Check the given element about `v-bind:key` attributes.
  62. * @param {RuleContext} context The rule context to report.
  63. * @param {VDirective} vFor The attribute node of `v-for` to check.
  64. * @param {VElement} element The element node to check.
  65. */
  66. function checkKey(context, vFor, element) {
  67. const vBindKey = utils.getDirective(element, 'bind', 'key')
  68. if (vBindKey == null && element.name === 'template') {
  69. for (const child of element.children) {
  70. if (child.type === 'VElement') {
  71. checkChildKey(context, vFor, child)
  72. }
  73. }
  74. return
  75. }
  76. if (utils.isCustomComponent(element) && vBindKey == null) {
  77. context.report({
  78. node: element.startTag,
  79. loc: element.startTag.loc,
  80. message: "Custom elements in iteration require 'v-bind:key' directives."
  81. })
  82. }
  83. if (vBindKey != null && !isUsingIterationVar(vFor, vBindKey)) {
  84. context.report({
  85. node: vBindKey,
  86. loc: vBindKey.loc,
  87. message:
  88. "Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."
  89. })
  90. }
  91. }
  92. // ------------------------------------------------------------------------------
  93. // Rule Definition
  94. // ------------------------------------------------------------------------------
  95. module.exports = {
  96. meta: {
  97. type: 'problem',
  98. docs: {
  99. description: 'enforce valid `v-for` directives',
  100. categories: ['vue3-essential', 'essential'],
  101. url: 'https://eslint.vuejs.org/rules/valid-v-for.html'
  102. },
  103. fixable: null,
  104. schema: []
  105. },
  106. /** @param {RuleContext} context */
  107. create(context) {
  108. const sourceCode = context.getSourceCode()
  109. return utils.defineTemplateBodyVisitor(context, {
  110. /** @param {VDirective} node */
  111. "VAttribute[directive=true][key.name.name='for']"(node) {
  112. const element = node.parent.parent
  113. checkKey(context, node, element)
  114. if (node.key.argument) {
  115. context.report({
  116. node,
  117. loc: node.loc,
  118. message: "'v-for' directives require no argument."
  119. })
  120. }
  121. if (node.key.modifiers.length > 0) {
  122. context.report({
  123. node,
  124. loc: node.loc,
  125. message: "'v-for' directives require no modifier."
  126. })
  127. }
  128. if (!node.value || utils.isEmptyValueDirective(node, context)) {
  129. context.report({
  130. node,
  131. loc: node.loc,
  132. message: "'v-for' directives require that attribute value."
  133. })
  134. return
  135. }
  136. const expr = node.value.expression
  137. if (expr == null) {
  138. return
  139. }
  140. if (expr.type !== 'VForExpression') {
  141. context.report({
  142. node: node.value,
  143. loc: node.value.loc,
  144. message:
  145. "'v-for' directives require the special syntax '<alias> in <expression>'."
  146. })
  147. return
  148. }
  149. const lhs = expr.left
  150. const value = lhs[0]
  151. const key = lhs[1]
  152. const index = lhs[2]
  153. if (value === null) {
  154. context.report({
  155. node: expr,
  156. message: "Invalid alias ''."
  157. })
  158. }
  159. if (key !== undefined && (!key || key.type !== 'Identifier')) {
  160. context.report({
  161. node: key || expr,
  162. loc: key && key.loc,
  163. message: "Invalid alias '{{text}}'.",
  164. data: { text: key ? sourceCode.getText(key) : '' }
  165. })
  166. }
  167. if (index !== undefined && (!index || index.type !== 'Identifier')) {
  168. context.report({
  169. node: index || expr,
  170. loc: index && index.loc,
  171. message: "Invalid alias '{{text}}'.",
  172. data: { text: index ? sourceCode.getText(index) : '' }
  173. })
  174. }
  175. }
  176. })
  177. }
  178. }