max-attributes-per-line.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. /**
  2. * @fileoverview Define the number of attributes allows per line
  3. * @author Filipa Lacerda
  4. */
  5. 'use strict'
  6. // ------------------------------------------------------------------------------
  7. // Rule Definition
  8. // ------------------------------------------------------------------------------
  9. const utils = require('../utils')
  10. module.exports = {
  11. meta: {
  12. type: 'layout',
  13. docs: {
  14. description: 'enforce the maximum number of attributes per line',
  15. categories: ['vue3-strongly-recommended', 'strongly-recommended'],
  16. url: 'https://eslint.vuejs.org/rules/max-attributes-per-line.html'
  17. },
  18. fixable: 'whitespace', // or "code" or "whitespace"
  19. schema: [
  20. {
  21. type: 'object',
  22. properties: {
  23. singleline: {
  24. anyOf: [
  25. {
  26. type: 'number',
  27. minimum: 1
  28. },
  29. {
  30. type: 'object',
  31. properties: {
  32. max: {
  33. type: 'number',
  34. minimum: 1
  35. }
  36. },
  37. additionalProperties: false
  38. }
  39. ]
  40. },
  41. multiline: {
  42. anyOf: [
  43. {
  44. type: 'number',
  45. minimum: 1
  46. },
  47. {
  48. type: 'object',
  49. properties: {
  50. max: {
  51. type: 'number',
  52. minimum: 1
  53. },
  54. allowFirstLine: {
  55. type: 'boolean'
  56. }
  57. },
  58. additionalProperties: false
  59. }
  60. ]
  61. }
  62. }
  63. }
  64. ]
  65. },
  66. /** @param {RuleContext} context */
  67. create(context) {
  68. const sourceCode = context.getSourceCode()
  69. const configuration = parseOptions(context.options[0])
  70. const multilineMaximum = configuration.multiline
  71. const singlelinemMaximum = configuration.singleline
  72. const canHaveFirstLine = configuration.allowFirstLine
  73. const template =
  74. context.parserServices.getTemplateBodyTokenStore &&
  75. context.parserServices.getTemplateBodyTokenStore()
  76. return utils.defineTemplateBodyVisitor(context, {
  77. VStartTag(node) {
  78. const numberOfAttributes = node.attributes.length
  79. if (!numberOfAttributes) return
  80. if (
  81. utils.isSingleLine(node) &&
  82. numberOfAttributes > singlelinemMaximum
  83. ) {
  84. showErrors(node.attributes.slice(singlelinemMaximum))
  85. }
  86. if (!utils.isSingleLine(node)) {
  87. if (
  88. !canHaveFirstLine &&
  89. node.attributes[0].loc.start.line === node.loc.start.line
  90. ) {
  91. showErrors([node.attributes[0]])
  92. }
  93. groupAttrsByLine(node.attributes)
  94. .filter((attrs) => attrs.length > multilineMaximum)
  95. .forEach((attrs) => showErrors(attrs.splice(multilineMaximum)))
  96. }
  97. }
  98. })
  99. // ----------------------------------------------------------------------
  100. // Helpers
  101. // ----------------------------------------------------------------------
  102. /**
  103. * @param {any} options
  104. */
  105. function parseOptions(options) {
  106. const defaults = {
  107. singleline: 1,
  108. multiline: 1,
  109. allowFirstLine: false
  110. }
  111. if (options) {
  112. if (typeof options.singleline === 'number') {
  113. defaults.singleline = options.singleline
  114. } else if (options.singleline && options.singleline.max) {
  115. defaults.singleline = options.singleline.max
  116. }
  117. if (options.multiline) {
  118. if (typeof options.multiline === 'number') {
  119. defaults.multiline = options.multiline
  120. } else if (typeof options.multiline === 'object') {
  121. if (options.multiline.max) {
  122. defaults.multiline = options.multiline.max
  123. }
  124. if (options.multiline.allowFirstLine) {
  125. defaults.allowFirstLine = options.multiline.allowFirstLine
  126. }
  127. }
  128. }
  129. }
  130. return defaults
  131. }
  132. /**
  133. * @param {(VDirective | VAttribute)[]} attributes
  134. */
  135. function showErrors(attributes) {
  136. attributes.forEach((prop, i) => {
  137. context.report({
  138. node: prop,
  139. loc: prop.loc,
  140. message: "'{{name}}' should be on a new line.",
  141. data: { name: sourceCode.getText(prop.key) },
  142. fix(fixer) {
  143. if (i !== 0) return null
  144. // Find the closest token before the current prop
  145. // that is not a white space
  146. const prevToken = /** @type {Token} */ (template.getTokenBefore(
  147. prop,
  148. {
  149. filter: (token) => token.type !== 'HTMLWhitespace'
  150. }
  151. ))
  152. /** @type {Range} */
  153. const range = [prevToken.range[1], prop.range[0]]
  154. return fixer.replaceTextRange(range, '\n')
  155. }
  156. })
  157. })
  158. }
  159. /**
  160. * @param {(VDirective | VAttribute)[]} attributes
  161. */
  162. function groupAttrsByLine(attributes) {
  163. const propsPerLine = [[attributes[0]]]
  164. attributes.reduce((previous, current) => {
  165. if (previous.loc.end.line === current.loc.start.line) {
  166. propsPerLine[propsPerLine.length - 1].push(current)
  167. } else {
  168. propsPerLine.push([current])
  169. }
  170. return current
  171. })
  172. return propsPerLine
  173. }
  174. }
  175. }