jsx-max-props-per-line.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. /**
  2. * @fileoverview Limit maximum of props on a single line in JSX
  3. * @author Yannick Croissant
  4. */
  5. 'use strict';
  6. const docsUrl = require('../util/docsUrl');
  7. const report = require('../util/report');
  8. function getPropName(context, propNode) {
  9. if (propNode.type === 'JSXSpreadAttribute') {
  10. return context.getSourceCode().getText(propNode.argument);
  11. }
  12. return propNode.name.name;
  13. }
  14. // ------------------------------------------------------------------------------
  15. // Rule Definition
  16. // ------------------------------------------------------------------------------
  17. const messages = {
  18. newLine: 'Prop `{{prop}}` must be placed on a new line',
  19. };
  20. module.exports = {
  21. meta: {
  22. docs: {
  23. description: 'Enforce maximum of props on a single line in JSX',
  24. category: 'Stylistic Issues',
  25. recommended: false,
  26. url: docsUrl('jsx-max-props-per-line'),
  27. },
  28. fixable: 'code',
  29. messages,
  30. schema: [{
  31. anyOf: [{
  32. type: 'object',
  33. properties: {
  34. maximum: {
  35. type: 'object',
  36. properties: {
  37. single: {
  38. type: 'integer',
  39. minimum: 1,
  40. },
  41. multi: {
  42. type: 'integer',
  43. minimum: 1,
  44. },
  45. },
  46. },
  47. },
  48. additionalProperties: false,
  49. }, {
  50. type: 'object',
  51. properties: {
  52. maximum: {
  53. type: 'number',
  54. minimum: 1,
  55. },
  56. when: {
  57. type: 'string',
  58. enum: ['always', 'multiline'],
  59. },
  60. },
  61. additionalProperties: false,
  62. }],
  63. }],
  64. },
  65. create(context) {
  66. const configuration = context.options[0] || {};
  67. const maximum = configuration.maximum || 1;
  68. const maxConfig = typeof maximum === 'number'
  69. ? {
  70. single: configuration.when === 'multiline' ? Infinity : maximum,
  71. multi: maximum,
  72. }
  73. : {
  74. single: maximum.single || Infinity,
  75. multi: maximum.multi || Infinity,
  76. };
  77. function generateFixFunction(line, max) {
  78. const sourceCode = context.getSourceCode();
  79. const output = [];
  80. const front = line[0].range[0];
  81. const back = line[line.length - 1].range[1];
  82. for (let i = 0; i < line.length; i += max) {
  83. const nodes = line.slice(i, i + max);
  84. output.push(nodes.reduce((prev, curr) => {
  85. if (prev === '') {
  86. return sourceCode.getText(curr);
  87. }
  88. return `${prev} ${sourceCode.getText(curr)}`;
  89. }, ''));
  90. }
  91. const code = output.join('\n');
  92. return function fix(fixer) {
  93. return fixer.replaceTextRange([front, back], code);
  94. };
  95. }
  96. return {
  97. JSXOpeningElement(node) {
  98. if (!node.attributes.length) {
  99. return;
  100. }
  101. const isSingleLineTag = node.loc.start.line === node.loc.end.line;
  102. if ((isSingleLineTag ? maxConfig.single : maxConfig.multi) === Infinity) {
  103. return;
  104. }
  105. const firstProp = node.attributes[0];
  106. const linePartitionedProps = [[firstProp]];
  107. node.attributes.reduce((last, decl) => {
  108. if (last.loc.end.line === decl.loc.start.line) {
  109. linePartitionedProps[linePartitionedProps.length - 1].push(decl);
  110. } else {
  111. linePartitionedProps.push([decl]);
  112. }
  113. return decl;
  114. });
  115. linePartitionedProps.forEach((propsInLine) => {
  116. const maxPropsCountPerLine = isSingleLineTag && propsInLine[0].loc.start.line === node.loc.start.line
  117. ? maxConfig.single
  118. : maxConfig.multi;
  119. if (propsInLine.length > maxPropsCountPerLine) {
  120. const name = getPropName(context, propsInLine[maxPropsCountPerLine]);
  121. report(context, messages.newLine, 'newLine', {
  122. node: propsInLine[maxPropsCountPerLine],
  123. data: {
  124. prop: name,
  125. },
  126. fix: generateFixFunction(propsInLine, maxPropsCountPerLine),
  127. });
  128. }
  129. });
  130. },
  131. };
  132. },
  133. };