max-attributes-per-line.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  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. allowFirstLine: {
  37. type: 'boolean'
  38. }
  39. },
  40. additionalProperties: false
  41. }
  42. ]
  43. },
  44. multiline: {
  45. anyOf: [
  46. {
  47. type: 'number',
  48. minimum: 1
  49. },
  50. {
  51. type: 'object',
  52. properties: {
  53. max: {
  54. type: 'number',
  55. minimum: 1
  56. },
  57. allowFirstLine: {
  58. type: 'boolean'
  59. }
  60. },
  61. additionalProperties: false
  62. }
  63. ]
  64. }
  65. },
  66. additionalProperties: false
  67. }
  68. ]
  69. },
  70. /** @param {RuleContext} context */
  71. create(context) {
  72. const sourceCode = context.getSourceCode()
  73. const configuration = parseOptions(context.options[0])
  74. const multilineMaximum = configuration.multiline
  75. const singlelinemMaximum = configuration.singleline
  76. const canHaveSinglelineFirstLine = configuration.singlelineAllowFirstLine
  77. const canHaveMultilineFirstLine = configuration.multilineAllowFirstLine
  78. const template =
  79. context.parserServices.getTemplateBodyTokenStore &&
  80. context.parserServices.getTemplateBodyTokenStore()
  81. return utils.defineTemplateBodyVisitor(context, {
  82. VStartTag(node) {
  83. const numberOfAttributes = node.attributes.length
  84. if (!numberOfAttributes) return
  85. if (utils.isSingleLine(node)) {
  86. if (
  87. !canHaveSinglelineFirstLine &&
  88. node.attributes[0].loc.start.line === node.loc.start.line
  89. ) {
  90. showErrors([node.attributes[0]])
  91. }
  92. if (numberOfAttributes > singlelinemMaximum) {
  93. showErrors(node.attributes.slice(singlelinemMaximum))
  94. }
  95. }
  96. if (!utils.isSingleLine(node)) {
  97. if (
  98. !canHaveMultilineFirstLine &&
  99. node.attributes[0].loc.start.line === node.loc.start.line
  100. ) {
  101. showErrors([node.attributes[0]])
  102. }
  103. groupAttrsByLine(node.attributes)
  104. .filter((attrs) => attrs.length > multilineMaximum)
  105. .forEach((attrs) => showErrors(attrs.splice(multilineMaximum)))
  106. }
  107. }
  108. })
  109. // ----------------------------------------------------------------------
  110. // Helpers
  111. // ----------------------------------------------------------------------
  112. /**
  113. * @param {any} options
  114. */
  115. function parseOptions(options) {
  116. const defaults = {
  117. singleline: 1,
  118. singlelineAllowFirstLine: true,
  119. multiline: 1,
  120. multilineAllowFirstLine: false
  121. }
  122. if (options) {
  123. if (typeof options.singleline === 'number') {
  124. defaults.singleline = options.singleline
  125. } else if (typeof options.singleline === 'object') {
  126. if (typeof options.singleline.max === 'number') {
  127. defaults.singleline = options.singleline.max
  128. }
  129. if (typeof options.singleline.allowFirstLine === 'boolean') {
  130. defaults.singlelineAllowFirstLine =
  131. options.singleline.allowFirstLine
  132. }
  133. }
  134. if (options.multiline) {
  135. if (typeof options.multiline === 'number') {
  136. defaults.multiline = options.multiline
  137. } else if (typeof options.multiline === 'object') {
  138. if (typeof options.multiline.max === 'number') {
  139. defaults.multiline = options.multiline.max
  140. }
  141. if (typeof options.multiline.allowFirstLine === 'boolean') {
  142. defaults.multilineAllowFirstLine =
  143. options.multiline.allowFirstLine
  144. }
  145. }
  146. }
  147. }
  148. return defaults
  149. }
  150. /**
  151. * @param {(VDirective | VAttribute)[]} attributes
  152. */
  153. function showErrors(attributes) {
  154. attributes.forEach((prop, i) => {
  155. context.report({
  156. node: prop,
  157. loc: prop.loc,
  158. message: "'{{name}}' should be on a new line.",
  159. data: { name: sourceCode.getText(prop.key) },
  160. fix(fixer) {
  161. if (i !== 0) return null
  162. // Find the closest token before the current prop
  163. // that is not a white space
  164. const prevToken = /** @type {Token} */ (
  165. template.getTokenBefore(prop, {
  166. filter: (token) => token.type !== 'HTMLWhitespace'
  167. })
  168. )
  169. /** @type {Range} */
  170. const range = [prevToken.range[1], prop.range[0]]
  171. return fixer.replaceTextRange(range, '\n')
  172. }
  173. })
  174. })
  175. }
  176. /**
  177. * @param {(VDirective | VAttribute)[]} attributes
  178. */
  179. function groupAttrsByLine(attributes) {
  180. const propsPerLine = [[attributes[0]]]
  181. attributes.reduce((previous, current) => {
  182. if (previous.loc.end.line === current.loc.start.line) {
  183. propsPerLine[propsPerLine.length - 1].push(current)
  184. } else {
  185. propsPerLine.push([current])
  186. }
  187. return current
  188. })
  189. return propsPerLine
  190. }
  191. }
  192. }