#no-adjacent-inline-elements

#Configuration

import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/no-adjacent-inline-elements': 'error',
    },
  },
]);

#Rule Details

This rule disallows adjacent inline HTML elements without whitespace between them. Without a separating space, inline elements can run into each other when the content is viewed without styling.

Examples of incorrect code for this rule:

<div><a></a><a></a></div>
<div><a></a><span></span></div>

React.createElement("div", undefined, [React.createElement("a"), React.createElement("span")]);

Examples of correct code for this rule:

<div><div></div><div></div></div>
<div><a></a> <a></a></div>

React.createElement("div", undefined, [React.createElement("a"), " ", React.createElement("a")]);

#When Not To Use It

Disable this rule when adjacent inline elements are intentional or spacing is provided by styling.

#Original Documentation

• eslint-plugin-react: no-adjacent-inline-elements
• Source code