@tpzdsp/eslint-config-dsp/eslint/rules/padding-between-jsx-elements.js

re-usable config for ESLint, Prettier and semantic-release

export default {
  meta: {
    type: 'layout',
    docs: {
      description: 'enforce blank lines between JSX elements',
    },
    fixable: 'whitespace',
    schema: [],
    messages: {
      missingPadding: 'JSX elements should be separated by a blank line.',
    },
  },

  create: (context) => {
    return {
      JSXElement: (node) => {
        const parent = node.parent;

        if (!parent || !Array.isArray(parent.children)) {
          return;
        }

        const siblings = parent.children.filter((n) => n.type === 'JSXElement');
        const index = siblings.indexOf(node);

        if (index === -1 || index === 0) {
          return;
        }

        const prev = siblings[index - 1];

        if (!prev.loc || !node.loc) {
          return;
        }

        const linesBetween = node.loc.start.line - prev.loc.end.line;

        if (linesBetween < 2) {
          context.report({
            node,
            messageId: 'missingPadding',
            fix: (fixer) => {
              return fixer.insertTextBefore(node, '\n');
            },
          });
        }
      },
    };
  },
};