order-in-components.js 6.8 KB

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