order-in-components.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  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. '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. const noSideEffectsNodes = new Set()
  88. traverseNodes(node, {
  89. visitorKeys,
  90. enterNode (node, parent) {
  91. if (!result || noSideEffectsNodes.has(node)) {
  92. return
  93. }
  94. if (
  95. node.type === 'FunctionExpression' ||
  96. node.type === 'Identifier' ||
  97. node.type === 'Literal' ||
  98. // es2015
  99. node.type === 'ArrowFunctionExpression' ||
  100. node.type === 'TemplateElement'
  101. ) {
  102. // no side effects node
  103. noSideEffectsNodes.add(node)
  104. traverseNodes(node, {
  105. visitorKeys,
  106. enterNode (node) {
  107. noSideEffectsNodes.add(node)
  108. },
  109. leaveNode () {}
  110. })
  111. } else if (
  112. node.type !== 'Property' &&
  113. node.type !== 'ObjectExpression' &&
  114. node.type !== 'ArrayExpression' &&
  115. (node.type !== 'UnaryExpression' || ['!', '~', '+', '-', 'typeof'].indexOf(node.operator) < 0) &&
  116. (node.type !== 'BinaryExpression' || ALL_BINARY_OPERATORS.indexOf(node.operator) < 0) &&
  117. (node.type !== 'LogicalExpression' || LOGICAL_OPERATORS.indexOf(node.operator) < 0) &&
  118. node.type !== 'MemberExpression' &&
  119. node.type !== 'ConditionalExpression' &&
  120. // es2015
  121. node.type !== 'SpreadElement' &&
  122. node.type !== 'TemplateLiteral'
  123. ) {
  124. // Can not be sure that a node has no side effects
  125. result = false
  126. }
  127. },
  128. leaveNode () {}
  129. })
  130. return result
  131. }
  132. // ------------------------------------------------------------------------------
  133. // Rule Definition
  134. // ------------------------------------------------------------------------------
  135. module.exports = {
  136. meta: {
  137. type: 'suggestion',
  138. docs: {
  139. description: 'enforce order of properties in components',
  140. category: 'recommended',
  141. url: 'https://eslint.vuejs.org/rules/order-in-components.html'
  142. },
  143. fixable: 'code', // null or "code" or "whitespace"
  144. schema: [
  145. {
  146. type: 'object',
  147. properties: {
  148. order: {
  149. type: 'array'
  150. }
  151. },
  152. additionalProperties: false
  153. }
  154. ]
  155. },
  156. create (context) {
  157. const options = context.options[0] || {}
  158. const order = options.order || defaultOrder
  159. const extendedOrder = order.map(property => groups[property] || property)
  160. const orderMap = getOrderMap(extendedOrder)
  161. const sourceCode = context.getSourceCode()
  162. function checkOrder (propertiesNodes, orderMap) {
  163. const properties = propertiesNodes
  164. .filter(property => property.type === 'Property')
  165. .map(property => property.key)
  166. properties.forEach((property, i) => {
  167. const propertiesAbove = properties.slice(0, i)
  168. const unorderedProperties = propertiesAbove
  169. .filter(p => orderMap.get(p.name) > orderMap.get(property.name))
  170. .sort((p1, p2) => orderMap.get(p1.name) > orderMap.get(p2.name) ? 1 : -1)
  171. const firstUnorderedProperty = unorderedProperties[0]
  172. if (firstUnorderedProperty) {
  173. const line = firstUnorderedProperty.loc.start.line
  174. context.report({
  175. node: property,
  176. message: `The "{{name}}" property should be above the "{{firstUnorderedPropertyName}}" property on line {{line}}.`,
  177. data: {
  178. name: property.name,
  179. firstUnorderedPropertyName: firstUnorderedProperty.name,
  180. line
  181. },
  182. fix (fixer) {
  183. const propertyNode = property.parent
  184. const firstUnorderedPropertyNode = firstUnorderedProperty.parent
  185. const hasSideEffectsPossibility = propertiesNodes
  186. .slice(
  187. propertiesNodes.indexOf(firstUnorderedPropertyNode),
  188. propertiesNodes.indexOf(propertyNode) + 1
  189. )
  190. .some((property) => !isNotSideEffectsNode(property, sourceCode.visitorKeys))
  191. if (hasSideEffectsPossibility) {
  192. return undefined
  193. }
  194. const afterComma = sourceCode.getTokenAfter(propertyNode)
  195. const hasAfterComma = isComma(afterComma)
  196. const beforeComma = sourceCode.getTokenBefore(propertyNode)
  197. const codeStart = beforeComma.range[1] // to include comments
  198. const codeEnd = hasAfterComma ? afterComma.range[1] : propertyNode.range[1]
  199. const propertyCode = sourceCode.text.slice(codeStart, codeEnd) + (hasAfterComma ? '' : ',')
  200. const insertTarget = sourceCode.getTokenBefore(firstUnorderedPropertyNode)
  201. const removeStart = hasAfterComma ? codeStart : beforeComma.range[0]
  202. return [
  203. fixer.removeRange([removeStart, codeEnd]),
  204. fixer.insertTextAfter(insertTarget, propertyCode)
  205. ]
  206. }
  207. })
  208. }
  209. })
  210. }
  211. return utils.executeOnVue(context, (obj) => {
  212. checkOrder(obj.properties, orderMap)
  213. })
  214. }
  215. }