Trailing parentheses indented

[DaleLJefferson]

input and expected output:

class Hello extends React.Component {
    render() {
        return (
             <h1>Hello</h1>
        );
    }
}

current output (esformatter v0.9.1, esformatter-jsx v4.0.6):

class Hello extends React.Component {
    render() {
        return (
            <h1>Hello</h1>
            );
    }
}

Notice the trailing parentheses is indented, it only seems to happen when JSX is inside the expression, hence why I'm posting here.

The trailing parentheses is not indented when JSX is not involved

class Hello extends React.Component {
    render() {
        return (
            "Hello"
        );
    }
}

{
  "indent" : {
    "ReturnStatement": "1",
    "value": "    ",
    ....
},
...
  "jsx": {
    "formatJSX": true,
    "attrsOnSameLineAsTag": false,
    "maxAttrsOnTag": 1,
    "firstAttributeOnSameLine": true,
    "alignWithFirstAttribute": true,
    "spaceInJSXExpressionContainers": "",
    "htmlOptions": {
      "brace_style": "collapse",
      "indent_char": " ",
      "indent_size": 4,
      "max_preserve_newlines": 2,
      "preserve_newlines": true
    }
  },

[hoschi]

You can try to change your settings to "ReturnStatement":">=1", I think I had the same problem but don't tested my settings with your code example.

[DaleLJefferson]

@millermedeiros told me that >=1 is not a valid option for ReturnStatement.

lineBreak is the only one that accepts >=1.. Indent and white space only works with integers.

https://github.com/millermedeiros/esformatter/issues/412#issuecomment-187417342

Adding >=1 turns off indent since it's an invalid option. This issue occurs when indent ReturnStatement is enabled.

[royriojas]

@DaleJefferson Hi, you're right this is an issue on the way the formatting is done currently, I'm planning on taking some time this weekend to fix this and other issues, thanks for your patient.

[swinston1000]

@royriojas , @DaleJefferson I am having the same issue, has this been solved?

 "options": {
    "preset": "jquery",
    "indent": {
      "value": "  ",
      "ReturnStatement": 0,
    }
}

I found these setting solved it but then my code looks like this

and it would be nice to have an an indent like this

[swinston1000]

Before I saw this thread I opened an issue here - https://github.com/royriojas/esformatter-jsx/issues/96 Feel free to remove it.

[sparkmorry]

hi @royriojas , How is the issue going? I installed the latest [email protected], however, it doesn't work.

[sbussetti]

+1

[royriojas]

Hi @sparkmorry, yes, sadly this is still an issue. I'm currently out of time to fix these issues, but there might a be a couple of other options out there like https://github.com/prettier/prettier, that might be doing a better job on this kind of issues.

In any case I would happily review/accept and merge PRs for this issue if anyone has the time to make one.

Regards

[wenjunxiao]

I solve this by extending jsx plugin https://github.com/wenjunxiao/esformatter-jsx-indent