Search code examples
reactjsjsxeslintcurly-braces

Eslint jsx-curly-spacing specific format

I'm trying to write a specific rule for curly spacing in jsx parts of React, but I can't figure out a correct combination.

What I'm aiming for is the following case:

<Component attr1={this.props.val1} attr2={{ object: { key: value } }}>
  { this.props.text }
</Component>

For now this is the rule I'm using:

"react/jsx-curly-spacing": ["warn", {
  "when": "always",
  "spacing": { "objectLiterals": "never" }
}]

But it forces spaces in the brackets of attributes, allowing though the content of the Component to have spaces.

Anyone has any ideas on how to write the correct rule?

Solution

  • I've tried the following rules:

    "key-spacing": ["error", { "beforeColon": false, "afterColon": true}],
"react/jsx-curly-spacing": ["warn", {
  "when": "never",
  "children": {
    "when": "always"
  }
}]

    Check if this is ok for you.