Incorrect indentation for single-line arrow function returning JSX markup

[ecbrodie]

Description

There is a conflict between js-beautify and eslint in terms of the level of indent for a single-line arrow function (such as a React component) that is returning JSX markup. I believe that eslint is more correct in this case, thus I want to see if there is a config that I need to set in js-beautify to match eslint's configuration, of if there is a legit bug in js-beautify.

Input

The code looked like this before beautification (note that I am using 2-space indentation and my beautifier has already been configured to respect this preference):

const MyComponent = ({
  requiredPropA,
  requiredPropB,
}) => (
  <div>
    INSERT MARKUP HERE
  </div>
);

Expected Output

No changes. The indentation level was already correct (function body should be indented 1 level deeper than the function declaration.

Actual Output

The code actually looked like this after beautification:

const MyComponent = ({
  requiredPropA,
  requiredPropB,
}) => (
    <div>
      INSERT MARKUP HERE
    </div>
  );

Not only is the function body now being indented 2 levels deeper than the function's declaration, the closing parenthesis of the function body has also been indented itself. This beautified code now conflicts with my eslint rules:

Expected indentation of 2 space characters but found 4 react/jsx-indent

Steps to Reproduce

No additional steps to note. Just have JSX code that looks like above.

Environment

OS: MacOS 10.12.5
VSCode: 1.14.1
Beautify: 1.1.1

Settings

I am pasting my entire settings.json file here, in case there is a setting unrelated to js-beautify that is somehow conflicting. Ping me if you require addition information with regards to my settings.

{
    "editor.minimap.enabled": false,
    "editor.renderWhitespace": "boundary",
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "files.autoSave": "onFocusChange",
    "gitlens.blame.line.enabled": false,
    "telemetry.enableTelemetry": false,
    "vim.disableAnnoyingNeovimMessage": true,
    "workbench.colorTheme": "Solarized Light",
    "workbench.editor.enablePreviewFromQuickOpen": false,
    "workbench.iconTheme": "vscode-icons",
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/.idea": true,
        "**/.tmp": true
    },
    "gitlens.codeLens.enabled": false,
    "vsicons.dontShowNewVersionMessage": true,
    "ruby.specCommand": "rspec",
    "window.zoomLevel": 0,
    "window.openFoldersInNewWindow": "on",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "vim.enableNeovim": true
}

Until this issue is resolved, I've had to set editor.formatOnSave to false.

[ecbrodie]

Sorry...I realized that I should have posted this issue in https://github.com/HookyQR/VSCodeBeautify. I will close this and file an issue there. My apologies for the spam.

[bitwiseman]

@ecbrodie
The underlying issue is going to be in this library. Thanks for the detailed report and linkage to the other project.

[bitwiseman]

@ecbrodie I cannot reproduce this on http://jsbeautifier.org/ Could you double check?

[MacKLess]

As of v1.8.0-rc4 the actual input is incorrect in a whole new way:

const MyComponent = ({
    requiredPropA,
    requiredPropB,
}) => (
    <div>
    INSERT MARKUP HERE
  </div>
);