js-beautify
js-beautify copied to clipboard
Incorrect indentation for single-line arrow function returning JSX markup
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.
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.
@ecbrodie The underlying issue is going to be in this library. Thanks for the detailed report and linkage to the other project.
@ecbrodie I cannot reproduce this on http://jsbeautifier.org/ Could you double check?
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>
);