diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md index 7de8ebeff..a01586c58 100644 --- a/CHANGELOG.unreleased.md +++ b/CHANGELOG.unreleased.md @@ -216,12 +216,54 @@ foo // comment `; ``` +#### JavaScript: Fix moving comments in function calls like `useEffect` second argument ([#6270] by [@sosukesuzuki]) + +This fixes a bug that was affecting function calls that have a arrow function as first argument and an array expression as second argument, such as the common React's `useEffect`. A comment in its own line before the second argument would be moved to the line above. + +The bug was only present when using the Flow and TypeScript parsers. + + +```js +// Input +useEffect( + () => { + console.log("some code", props.foo); + }, + + // We need to disable the eslint warning here, + // because of some complicated reason. + // eslint-disable line react-hooks/exhaustive-deps + [] +); + +// Output (Prettier stable) +useEffect(() => { + console.log("some code", props.foo); +}, // We need to disable the eslint warning here, +// because of some complicated reason. +// eslint-disable line react-hooks/exhaustive-deps +[]); + +// Output (Prettier master) +useEffect( + () => { + console.log("some code", props.foo); + }, + + // We need to disable the eslint warning here, + // because of some complicated reason. + // eslint-disable line react-hooks/exhaustive-deps + [] +); +``` + [#6186]: https://github.com/prettier/prettier/pull/6186 [#6206]: https://github.com/prettier/prettier/pull/6206 [#6209]: https://github.com/prettier/prettier/pull/6209 [#6217]: https://github.com/prettier/prettier/pull/6217 [#6234]: https://github.com/prettier/prettier/pull/6234 [#6236]: https://github.com/prettier/prettier/pull/6236 +[#6270]: https://github.com/prettier/prettier/pull/6270 [@duailibe]: https://github.com/duailibe [@gavinjoyce]: https://github.com/gavinjoyce [@sosukesuzuki]: https://github.com/sosukesuzuki diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js index 5b778b270..4d38318ab 100644 --- a/src/language-js/printer-estree.js +++ b/src/language-js/printer-estree.js @@ -4045,7 +4045,7 @@ function printArgumentsList(path, options, print) { args[0].params.length === 0 && args[0].body.type === "BlockStatement" && args[1].type === "ArrayExpression" && - !args.find(arg => arg.leadingComments || arg.trailingComments) + !args.find(arg => arg.comments) ) { return concat([ "(", diff --git a/tests/break-calls/__snapshots__/jsfmt.spec.js.snap b/tests/break-calls/__snapshots__/jsfmt.spec.js.snap index 35c0b97e7..5eddc00ee 100644 --- a/tests/break-calls/__snapshots__/jsfmt.spec.js.snap +++ b/tests/break-calls/__snapshots__/jsfmt.spec.js.snap @@ -156,6 +156,20 @@ function helloWorldWithReact() { }, [props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value]) } +function MyComponent(props) { + useEffect( + () => { + console.log("some code", props.foo); + }, + + // We need to disable the eslint warning here, + // because of some complicated reason. + // eslint-disable line react-hooks/exhaustive-deps + [] + ); + + return null; +} =====================================output===================================== function helloWorld() { @@ -200,5 +214,20 @@ function helloWorldWithReact() { ]); } +function MyComponent(props) { + useEffect( + () => { + console.log("some code", props.foo); + }, + + // We need to disable the eslint warning here, + // because of some complicated reason. + // eslint-disable line react-hooks/exhaustive-deps + [] + ); + + return null; +} + ================================================================================ `; diff --git a/tests/break-calls/react.js b/tests/break-calls/react.js index 8400ca796..895b873d8 100644 --- a/tests/break-calls/react.js +++ b/tests/break-calls/react.js @@ -16,3 +16,17 @@ function helloWorldWithReact() { }, [props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value, props.value]) } +function MyComponent(props) { + useEffect( + () => { + console.log("some code", props.foo); + }, + + // We need to disable the eslint warning here, + // because of some complicated reason. + // eslint-disable line react-hooks/exhaustive-deps + [] + ); + + return null; +}