JavaScript Syntax Highlighting breaks in multi-line single-expression lambda method declarations inside a class

[benediktwerner]

Minimal example:

class A {
    f = () => 
        false &&
        (false) ||
        (this.f);
}

Notice that the second false, the || after it, and the this aren't highlighted correctly. I've only been able to replicate it inside a class. The same thing happens when using any other binary operator after the initial false. Just the second false alone is also enough to make it break but it only breaks with parentheses around the second false and the this.f. This also happens with more complex expressions, false here is just for demonstration.

The effect isn't limited to just this method. It completely messes up syntax highlighting further in the file. Here's a more complex real-world example that eventually leads to completely messed up highlighting:

(this image is just to demonstrate the messed-up highlighting, the problematic function is further up, see the link)

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: 1.72.2
• OS Version: Windows 10

Also happens in TypeScript. And as far as I can tell, this should be perfectly correct JS. Prettier formats it just fine and Chrome executes it as expected.

I've first observed this behavior a decent while ago, at least a few months but possibly even more than a year ago (and it might have existed before then, I'm not certain it wasn't already like this the first time I looked at the file linked above).

[vscodenpa]

Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.71.2. Please try upgrading to the latest version and checking whether this issue remains.

Happy Coding!

[benediktwerner]

(typo while copying the VS Code version, I was already using the latest version, edited the original post)

[RedCMD]

Should move report to https://github.com/microsoft/TypeScript-TmLanguage

variable-initializer (=) ends too early because of: |(?=^\\s*$)|(?<=\\S)(?<!=)(?=\\s*$)

#expression should have pushed end outwards, but doesn't for some reason

TypeScript-TmLanguage/TypeScriptReact.tmLanguage

Line 2047 in 44d7357

<key>variable-initializer</key>

I think variable-initializer should not abruptly end at the end of a line
as it currently exclaims this is incorrect:

const test = a
+

b

Combine that with the highly selective tokenizing inside a class and the issue visualizes

A temporary work around for you @benediktwerner would be to put = at the very end of each line