Why not format json string expression?

[janryWang]

<MyComponent expression={{"xxx":"yyy","aaaa":"bbbbb"}} />

can not format to

<MyComponent expression={ {
                                "xxx":"yyy",
                                "aaaa":"bbbbb"
                           }} />

[royriojas]

have you tried setting JSXExpressionsSingleLine to false?

// config
jsx: {
  formatJSX: true,
  attrsOnSameLineAsTag: true,
  maxAttrsOnTag: 3,
  firstAttributeOnSameLine: true,
  spaceInJSXExpressionContainers: ' ',
  alignWithFirstAttribute: false,
  JSXExpressionsSingleLine: false, // this is the flag that will allow objects to be formatted like your example
  formatJSXExpressions: true,
  JSXAttributeQuotes: 'single',
  htmlOptions: {
    brace_style: 'collapse',
    indent_char: ' ',
    indent_size: 2,
    max_preserve_newlines: 2,
    preserve_newlines: true,
  },
},

given this input

const renderFn = () => {
  return <MyComponent expression={{"xxx":"yyy","aaaa":"bbbbb"}} />
};

I obtain this output

const renderFn = () => {
  return <MyComponent expression={ {
                            'xxx': 'yyy',
                            'aaaa': 'bbbbb'
                          } } />
};

[janryWang]

Wow! Thanks @royriojas