attributes-order.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  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. function getAttributeType (name, isDirective) {
  11. if (isDirective) {
  12. if (name === 'for') {
  13. return 'LIST_RENDERING'
  14. } else if (name === 'if' || name === 'else-if' || name === 'else' || name === 'show' || name === 'cloak') {
  15. return 'CONDITIONALS'
  16. } else if (name === 'pre' || name === 'once') {
  17. return 'RENDER_MODIFIERS'
  18. } else if (name === 'model' || name === 'bind') {
  19. return 'BINDING'
  20. } else if (name === 'on') {
  21. return 'EVENTS'
  22. } else if (name === 'html' || name === 'text') {
  23. return 'CONTENT'
  24. }
  25. } else {
  26. if (name === 'is') {
  27. return 'DEFINITION'
  28. } else if (name === 'id') {
  29. return 'GLOBAL'
  30. } else if (name === 'ref' || name === 'key' || name === 'slot' || name === 'slot-scope') {
  31. return 'UNIQUE'
  32. } else {
  33. return 'OTHER_ATTR'
  34. }
  35. }
  36. }
  37. function getPosition (attribute, attributeOrder) {
  38. const attributeType = getAttributeType(attribute.key.name, attribute.directive)
  39. return attributeOrder.indexOf(attributeType)
  40. }
  41. function create (context) {
  42. const sourceCode = context.getSourceCode()
  43. let attributeOrder = ['DEFINITION', 'LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT']
  44. if (context.options[0] && context.options[0].order) {
  45. attributeOrder = context.options[0].order
  46. }
  47. let currentPosition
  48. let previousNode
  49. function reportIssue (node, previousNode) {
  50. const currentNode = sourceCode.getText(node.key)
  51. const prevNode = sourceCode.getText(previousNode.key)
  52. context.report({
  53. node: node.key,
  54. loc: node.loc,
  55. message: `Attribute "${currentNode}" should go before "${prevNode}".`,
  56. data: {
  57. currentNode
  58. },
  59. fix (fixer) {
  60. const attributes = node.parent.attributes
  61. const shiftAttrs = attributes.slice(attributes.indexOf(previousNode), attributes.indexOf(node) + 1)
  62. // If we can upgrade requirements to `eslint@>4.1.0`, this code can be replaced by:
  63. // return shiftAttrs.map((attr, i) => {
  64. // const text = attr === previousNode ? sourceCode.getText(node) : sourceCode.getText(shiftAttrs[i - 1])
  65. // return fixer.replaceText(attr, text)
  66. // })
  67. const replaceDataList = shiftAttrs.map((attr, i) => {
  68. const text = attr === previousNode ? sourceCode.getText(node) : sourceCode.getText(shiftAttrs[i - 1])
  69. return {
  70. range: attr.range,
  71. text
  72. }
  73. })
  74. const replaceRange = [previousNode.range[0], node.range[1]]
  75. let text = sourceCode.text.slice(replaceRange[0], replaceRange[1])
  76. replaceDataList.reverse().forEach((data) => {
  77. const textRange = data.range.map(r => r - replaceRange[0])
  78. text = text.slice(0, textRange[0]) + data.text + text.slice(textRange[1], text.length)
  79. })
  80. return fixer.replaceTextRange(replaceRange, text)
  81. }
  82. })
  83. }
  84. return utils.defineTemplateBodyVisitor(context, {
  85. 'VStartTag' () {
  86. currentPosition = -1
  87. previousNode = null
  88. },
  89. 'VAttribute' (node) {
  90. if ((currentPosition === -1) || (currentPosition <= getPosition(node, attributeOrder))) {
  91. currentPosition = getPosition(node, attributeOrder)
  92. previousNode = node
  93. } else {
  94. reportIssue(node, previousNode)
  95. }
  96. }
  97. })
  98. }
  99. module.exports = {
  100. meta: {
  101. docs: {
  102. description: 'enforce order of attributes',
  103. category: 'recommended',
  104. url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.5.0/docs/rules/attributes-order.md'
  105. },
  106. fixable: 'code',
  107. schema: {
  108. type: 'array',
  109. properties: {
  110. order: {
  111. items: {
  112. type: 'string'
  113. },
  114. maxItems: 10,
  115. minItems: 10
  116. }
  117. }
  118. }
  119. },
  120. create
  121. }