Skip to content

Is it possible to catch a single prop where the prop is a multiline object? #3210

@girvo

Description

@girvo

Specifically the formatting that I want to catch is this:

<div style={{
   background: 'red'
}}
>

The JSX rules I have so far as as follows:

    "react/jsx-closing-tag-location": [2],
    "react/jsx-curly-spacing": [2, "never"],
    "react/jsx-curly-newline": [2, "never"],
    "react/jsx-closing-bracket-location": [2, "tag-aligned"],
    "react/jsx-equals-spacing": [2, "never"],
    "react/jsx-indent": [2, 2, { "checkAttributes": true, "indentLogicalExpressions": true }],
    "react/jsx-indent-props": [2, 2],
    "react/jsx-max-props-per-line": [1, { "maximum": { "single": 3, "multiline": 1 } }],
    "react/jsx-no-useless-fragment": [2],
    "react/jsx-one-expression-per-line": [2, { "allow": "single-child" }],
    "react/jsx-tag-spacing": [2, { "beforeSelfClosing": "always", "beforeClosing": "never" }],

The big issue is this is a single prop, that happens to be an object. I would love to enforce that this prop must be put on a newline but I cannot see a way to achieve that from reading the JSX rules in depth. Any suggestions?

The correct formatting I'd like to enforce is:

<div
  style={{
    background: 'red'
  }}
>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions