Ranged formatting for yield in iterators breaks with tuples

[janpaepke]

Prettier 3.2.5
Playground link

--parser babel-flow
--use-tabs
--range-start 53
--range-end 66

Input:

class ExampleIterator {
	*[Symbol.iterator]() {
    	yield [1, 2];
	}
}

Output:

class ExampleIterator {
	*[Symbol.iterator]() {
    	yield[(1, 2)];
	}
}

Expected output:

class ExampleIterator {
	*[Symbol.iterator]() {
    	yield [1, 2];
	}
}

Why?

Prettier changes the behaviour of this line and the result is actually invalid.
This ONLY happens, when using ranged formatting.
When formatting the whole file, it works as expected (leaves the code untouched)

The issue seems to be independent of the parser, as it appears for every JS/TS based parser.

Context

I'll give some context about how I stumbled across this bug, in case it helps someone.
It had me banging my head on the table for a while.

A similar line to the reduced example exists in our code.
I have prettier set up to format on save in VSCode.
For the file in question however, there were additional settings applied through a .vscode/settings.json in the project root.

It was set up to format modified lines only:

{
	"editor.formatOnSaveMode": "modifications"
}

This causes prettier to do ranged formatting on save under the hood (which makes sense).
Unfortunately that broke my code every time I saved the file when the line in question has been modified.

It is likely there are other problems regarding yield - one I was able to find quickly was that yielding simple values results in a SyntaxError.

It's also potentially related to #16140

[kirkwaiblinger]

See also #6608 (comment)