attributes-order.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. /**
  2. * @fileoverview enforce ordering of attributes
  3. * @author Erin Depew
  4. */
  5. 'use strict'
  6. const utils = require('../utils')
  7. // ------------------------------------------------------------------------------
  8. // Rule Definition
  9. // ------------------------------------------------------------------------------
  10. const ATTRS = {
  11. DEFINITION: 'DEFINITION',
  12. LIST_RENDERING: 'LIST_RENDERING',
  13. CONDITIONALS: 'CONDITIONALS',
  14. RENDER_MODIFIERS: 'RENDER_MODIFIERS',
  15. GLOBAL: 'GLOBAL',
  16. UNIQUE: 'UNIQUE',
  17. TWO_WAY_BINDING: 'TWO_WAY_BINDING',
  18. OTHER_DIRECTIVES: 'OTHER_DIRECTIVES',
  19. OTHER_ATTR: 'OTHER_ATTR',
  20. EVENTS: 'EVENTS',
  21. CONTENT: 'CONTENT'
  22. }
  23. function getAttributeName (attribute, sourceCode) {
  24. const isBind = attribute.directive && attribute.key.name.name === 'bind'
  25. return isBind
  26. ? (attribute.key.argument ? sourceCode.getText(attribute.key.argument) : '')
  27. : (attribute.directive ? getDirectiveKeyName(attribute.key, sourceCode) : attribute.key.name)
  28. }
  29. function getDirectiveKeyName (directiveKey, sourceCode) {
  30. let text = 'v-' + directiveKey.name.name
  31. if (directiveKey.argument) {
  32. text += ':' + sourceCode.getText(directiveKey.argument)
  33. }
  34. for (const modifier of directiveKey.modifiers) {
  35. text += '.' + modifier.name
  36. }
  37. return text
  38. }
  39. function getAttributeType (attribute, sourceCode) {
  40. const isBind = attribute.directive && attribute.key.name.name === 'bind'
  41. const name = isBind
  42. ? (attribute.key.argument ? sourceCode.getText(attribute.key.argument) : '')
  43. : (attribute.directive ? attribute.key.name.name : attribute.key.name)
  44. if (attribute.directive && !isBind) {
  45. if (name === 'for') {
  46. return ATTRS.LIST_RENDERING
  47. } else if (name === 'if' || name === 'else-if' || name === 'else' || name === 'show' || name === 'cloak') {
  48. return ATTRS.CONDITIONALS
  49. } else if (name === 'pre' || name === 'once') {
  50. return ATTRS.RENDER_MODIFIERS
  51. } else if (name === 'model') {
  52. return ATTRS.TWO_WAY_BINDING
  53. } else if (name === 'on') {
  54. return ATTRS.EVENTS
  55. } else if (name === 'html' || name === 'text') {
  56. return ATTRS.CONTENT
  57. } else if (name === 'slot') {
  58. return ATTRS.UNIQUE
  59. } else {
  60. return ATTRS.OTHER_DIRECTIVES
  61. }
  62. } else {
  63. if (name === 'is') {
  64. return ATTRS.DEFINITION
  65. } else if (name === 'id') {
  66. return ATTRS.GLOBAL
  67. } else if (name === 'ref' || name === 'key' || name === 'slot' || name === 'slot-scope') {
  68. return ATTRS.UNIQUE
  69. } else {
  70. return ATTRS.OTHER_ATTR
  71. }
  72. }
  73. }
  74. function getPosition (attribute, attributePosition, sourceCode) {
  75. const attributeType = getAttributeType(attribute, sourceCode)
  76. return attributePosition.hasOwnProperty(attributeType) ? attributePosition[attributeType] : -1
  77. }
  78. function isAlphabetical (prevNode, currNode, sourceCode) {
  79. const isSameType = getAttributeType(prevNode, sourceCode) === getAttributeType(currNode, sourceCode)
  80. if (isSameType) {
  81. const prevName = getAttributeName(prevNode, sourceCode)
  82. const currName = getAttributeName(currNode, sourceCode)
  83. if (prevName === currName) {
  84. const prevIsBind = Boolean(prevNode.directive && prevNode.key.name.name === 'bind')
  85. const currIsBind = Boolean(currNode.directive && currNode.key.name.name === 'bind')
  86. return prevIsBind <= currIsBind
  87. }
  88. return prevName < currName
  89. }
  90. return true
  91. }
  92. function create (context) {
  93. const sourceCode = context.getSourceCode()
  94. let attributeOrder = [ATTRS.DEFINITION, ATTRS.LIST_RENDERING, ATTRS.CONDITIONALS, ATTRS.RENDER_MODIFIERS, ATTRS.GLOBAL, ATTRS.UNIQUE, ATTRS.TWO_WAY_BINDING, ATTRS.OTHER_DIRECTIVES, ATTRS.OTHER_ATTR, ATTRS.EVENTS, ATTRS.CONTENT]
  95. if (context.options[0] && context.options[0].order) {
  96. attributeOrder = context.options[0].order
  97. }
  98. const attributePosition = {}
  99. attributeOrder.forEach((item, i) => {
  100. if (item instanceof Array) {
  101. item.forEach((attr) => {
  102. attributePosition[attr] = i
  103. })
  104. } else attributePosition[item] = i
  105. })
  106. let currentPosition
  107. let previousNode
  108. function reportIssue (node, previousNode) {
  109. const currentNode = sourceCode.getText(node.key)
  110. const prevNode = sourceCode.getText(previousNode.key)
  111. context.report({
  112. node: node.key,
  113. loc: node.loc,
  114. message: `Attribute "${currentNode}" should go before "${prevNode}".`,
  115. data: {
  116. currentNode
  117. },
  118. fix (fixer) {
  119. const attributes = node.parent.attributes
  120. const shiftAttrs = attributes.slice(attributes.indexOf(previousNode), attributes.indexOf(node) + 1)
  121. return shiftAttrs.map((attr, i) => {
  122. const text = attr === previousNode ? sourceCode.getText(node) : sourceCode.getText(shiftAttrs[i - 1])
  123. return fixer.replaceText(attr, text)
  124. })
  125. }
  126. })
  127. }
  128. return utils.defineTemplateBodyVisitor(context, {
  129. 'VStartTag' () {
  130. currentPosition = -1
  131. previousNode = null
  132. },
  133. 'VAttribute' (node) {
  134. let inAlphaOrder = true
  135. if (currentPosition !== -1 && (context.options[0] && context.options[0].alphabetical)) {
  136. inAlphaOrder = isAlphabetical(previousNode, node, sourceCode)
  137. }
  138. if ((currentPosition === -1) || ((currentPosition <= getPosition(node, attributePosition, sourceCode)) && inAlphaOrder)) {
  139. currentPosition = getPosition(node, attributePosition, sourceCode)
  140. previousNode = node
  141. } else {
  142. reportIssue(node, previousNode)
  143. }
  144. }
  145. })
  146. }
  147. module.exports = {
  148. meta: {
  149. type: 'suggestion',
  150. docs: {
  151. description: 'enforce order of attributes',
  152. category: 'recommended',
  153. url: 'https://eslint.vuejs.org/rules/attributes-order.html'
  154. },
  155. fixable: 'code',
  156. schema: {
  157. type: 'array',
  158. properties: {
  159. order: {
  160. items: {
  161. type: 'string'
  162. },
  163. maxItems: 10,
  164. minItems: 10
  165. }
  166. }
  167. }
  168. },
  169. create
  170. }