order-in-components.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. /**
  2. * @fileoverview Keep order of properties in components
  3. * @author Michał Sajnóg
  4. */
  5. 'use strict'
  6. const utils = require('../utils')
  7. const Traverser = require('eslint/lib/util/traverser')
  8. const defaultOrder = [
  9. 'el',
  10. 'name',
  11. 'parent',
  12. 'functional',
  13. ['delimiters', 'comments'],
  14. ['components', 'directives', 'filters'],
  15. 'extends',
  16. 'mixins',
  17. 'inheritAttrs',
  18. 'model',
  19. ['props', 'propsData'],
  20. 'data',
  21. 'computed',
  22. 'watch',
  23. 'asyncData',
  24. 'fetch',
  25. 'LIFECYCLE_HOOKS',
  26. 'methods',
  27. ['template', 'render'],
  28. 'renderError'
  29. ]
  30. const groups = {
  31. LIFECYCLE_HOOKS: [
  32. 'beforeCreate',
  33. 'created',
  34. 'beforeMount',
  35. 'mounted',
  36. 'beforeUpdate',
  37. 'updated',
  38. 'activated',
  39. 'deactivated',
  40. 'beforeDestroy',
  41. 'destroyed'
  42. ]
  43. }
  44. function getOrderMap (order) {
  45. const orderMap = new Map()
  46. order.forEach((property, i) => {
  47. if (Array.isArray(property)) {
  48. property.forEach(p => orderMap.set(p, i))
  49. } else {
  50. orderMap.set(property, i)
  51. }
  52. })
  53. return orderMap
  54. }
  55. function isComma (node) {
  56. return node.type === 'Punctuator' && node.value === ','
  57. }
  58. const ARITHMETIC_OPERATORS = ['+', '-', '*', '/', '%', '**']
  59. const BITWISE_OPERATORS = ['&', '|', '^', '~', '<<', '>>', '>>>']
  60. const COMPARISON_OPERATORS = ['==', '!=', '===', '!==', '>', '>=', '<', '<=']
  61. const RELATIONAL_OPERATORS = ['in', 'instanceof']
  62. const ALL_BINARY_OPERATORS = [].concat(
  63. ARITHMETIC_OPERATORS,
  64. BITWISE_OPERATORS,
  65. COMPARISON_OPERATORS,
  66. RELATIONAL_OPERATORS
  67. )
  68. const LOGICAL_OPERATORS = ['&&', '||']
  69. /*
  70. * Result `true` if the node is sure that there are no side effects
  71. *
  72. * Currently known side effects types
  73. *
  74. * node.type === 'CallExpression'
  75. * node.type === 'NewExpression'
  76. * node.type === 'UpdateExpression'
  77. * node.type === 'AssignmentExpression'
  78. * node.type === 'TaggedTemplateExpression'
  79. * node.type === 'UnaryExpression' && node.operator === 'delete'
  80. *
  81. * @param {ASTNode} node target node
  82. * @param {Object} visitorKeys sourceCode.visitorKey
  83. * @returns {Boolean} no side effects
  84. */
  85. function isNotSideEffectsNode (node, visitorKeys) {
  86. let result = true
  87. new Traverser().traverse(node, {
  88. visitorKeys,
  89. enter (node, parent) {
  90. if (
  91. node.type === 'FunctionExpression' ||
  92. node.type === 'Identifier' ||
  93. node.type === 'Literal' ||
  94. // es2015
  95. node.type === 'ArrowFunctionExpression' ||
  96. node.type === 'TemplateElement'
  97. ) {
  98. // no side effects node
  99. this.skip()
  100. } else if (
  101. node.type !== 'Property' &&
  102. node.type !== 'ObjectExpression' &&
  103. node.type !== 'ArrayExpression' &&
  104. (node.type !== 'UnaryExpression' || ['!', '~', '+', '-', 'typeof'].indexOf(node.operator) < 0) &&
  105. (node.type !== 'BinaryExpression' || ALL_BINARY_OPERATORS.indexOf(node.operator) < 0) &&
  106. (node.type !== 'LogicalExpression' || LOGICAL_OPERATORS.indexOf(node.operator) < 0) &&
  107. node.type !== 'MemberExpression' &&
  108. node.type !== 'ConditionalExpression' &&
  109. // es2015
  110. node.type !== 'SpreadElement' &&
  111. node.type !== 'TemplateLiteral'
  112. ) {
  113. // Can not be sure that a node has no side effects
  114. result = false
  115. this.break()
  116. }
  117. }
  118. })
  119. return result
  120. }
  121. // ------------------------------------------------------------------------------
  122. // Rule Definition
  123. // ------------------------------------------------------------------------------
  124. module.exports = {
  125. meta: {
  126. type: 'suggestion',
  127. docs: {
  128. description: 'enforce order of properties in components',
  129. category: 'recommended',
  130. url: 'https://eslint.vuejs.org/rules/order-in-components.html'
  131. },
  132. fixable: 'code', // null or "code" or "whitespace"
  133. schema: [
  134. {
  135. type: 'object',
  136. properties: {
  137. order: {
  138. type: 'array'
  139. }
  140. },
  141. additionalProperties: false
  142. }
  143. ]
  144. },
  145. create (context) {
  146. const options = context.options[0] || {}
  147. const order = options.order || defaultOrder
  148. const extendedOrder = order.map(property => groups[property] || property)
  149. const orderMap = getOrderMap(extendedOrder)
  150. const sourceCode = context.getSourceCode()
  151. function checkOrder (propertiesNodes, orderMap) {
  152. const properties = propertiesNodes
  153. .filter(property => property.type === 'Property')
  154. .map(property => property.key)
  155. properties.forEach((property, i) => {
  156. const propertiesAbove = properties.slice(0, i)
  157. const unorderedProperties = propertiesAbove
  158. .filter(p => orderMap.get(p.name) > orderMap.get(property.name))
  159. .sort((p1, p2) => orderMap.get(p1.name) > orderMap.get(p2.name) ? 1 : -1)
  160. const firstUnorderedProperty = unorderedProperties[0]
  161. if (firstUnorderedProperty) {
  162. const line = firstUnorderedProperty.loc.start.line
  163. context.report({
  164. node: property,
  165. message: `The "{{name}}" property should be above the "{{firstUnorderedPropertyName}}" property on line {{line}}.`,
  166. data: {
  167. name: property.name,
  168. firstUnorderedPropertyName: firstUnorderedProperty.name,
  169. line
  170. },
  171. fix (fixer) {
  172. const propertyNode = property.parent
  173. const firstUnorderedPropertyNode = firstUnorderedProperty.parent
  174. const hasSideEffectsPossibility = propertiesNodes
  175. .slice(
  176. propertiesNodes.indexOf(firstUnorderedPropertyNode),
  177. propertiesNodes.indexOf(propertyNode) + 1
  178. )
  179. .some((property) => !isNotSideEffectsNode(property, sourceCode.visitorKeys))
  180. if (hasSideEffectsPossibility) {
  181. return undefined
  182. }
  183. const afterComma = sourceCode.getTokenAfter(propertyNode)
  184. const hasAfterComma = isComma(afterComma)
  185. const beforeComma = sourceCode.getTokenBefore(propertyNode)
  186. const codeStart = beforeComma.range[1] // to include comments
  187. const codeEnd = hasAfterComma ? afterComma.range[1] : propertyNode.range[1]
  188. const propertyCode = sourceCode.text.slice(codeStart, codeEnd) + (hasAfterComma ? '' : ',')
  189. const insertTarget = sourceCode.getTokenBefore(firstUnorderedPropertyNode)
  190. const removeStart = hasAfterComma ? codeStart : beforeComma.range[0]
  191. return [
  192. fixer.removeRange([removeStart, codeEnd]),
  193. fixer.insertTextAfter(insertTarget, propertyCode)
  194. ]
  195. }
  196. })
  197. }
  198. })
  199. }
  200. return utils.executeOnVue(context, (obj) => {
  201. checkOrder(obj.properties, orderMap)
  202. })
  203. }
  204. }