Editor: Excess or missing arguments in a function call highlight the whole call in red, including all anonymous function bodies

[malibuzios]

As a follow-up to #7703, I'm trying to investigate more scenarios where excessive editor error highlighting interferes with editing or renders it less convenient. Seems like many of these have to do with anonymous functions, as in many cases they are passed as function arguments, which are usually expected to be quite short. However in callback or promise heavy code they may end up to be very long and span multiple lines or even pages.

Another case I've found is when there are excess or missing arguments in a function call, though here it would highlight the whole function call expression, which would include all the bodies of all the anonymous functions passed as arguments, and may span as many lines or pages as the call would.

Edit: removed an incorrect example!

Reduced test cases
This one happens with the function() syntax as well:

Excess arguments:

function func(f: () => void) {
}

func(() => {
    let x = 1;
    return;
}, 42);

func(function () {
    let x = 1;
    return;
}, 42);

Missing arguments:

function func(f: () => void, n: number) {
}

func(() => {
    let x = 1;
    return;
});

func(function () {
    let x = 1;
    return;
});

[DanielRosenwasser]

Perhaps this could be alleviated if we could accurately determine if a semantic error falls within a non-completed node. We have some logic for this.

Alternatively, we could just highlight the called expression.

[malibuzios]

@DanielRosenwasser

I rechecked, my first example was wrong (edited later). The whole thing was marked in red only when the call expression was closed with a closing parentheses, but I would still say it looks a bit excessive, say when there are changes in the API then whole blocks or even pages would be marked in red.

Edit: I needed to remove the three dots! :)

[malibuzios]

First example was wrong, sorry about that (I removed it). I'll try to find better ones.

In any case if anyone knows of more these "wall-of-red' scenarios then please mention. I feel the editing experience (which is already pretty good, but not as good as say, C#) would improve significantly without them.

[malibuzios]

@DanielRosenwasser

In the case missing arguments there is a simple alternative, perhaps only highlight the closing parenthesis or the last line of the call expression?

function func(f: () => void, n: number) {}

func(() => {
    let x = 1;
    return;
}); <--- only the parenthesis or line highlighted

The case of excessive arguments is less "obvious", since it would seem natural to simply highlight the excessive arguments, but in case they are anonymous functions, they could span many lines or even several pages! Highlighting only the comma, after the last argument that is not excessive seems like a viable option, though may seem somewhat "mild" (I'm personally completely fine with "milder" highlighting though :) ):

function func(f: () => void) {
}

func(() => {
    let x = 1;
    return;
}, 42); <-- only the comma highlighted here

Edit: perhaps highlight from the comma only to to the end of its containing line?

[Andarist]

The excess arguments case got improved over the years - the missing argument case still highlights the whole call expression but perhaps it could only highlight the callee.