Bad syntax Highlighting in TS when using multiline union types

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

VS Code Version: 1.95.3
OS Version: MacOS 15.0.1

Steps to Reproduce:

Write the following in VSCode

let myObj:
    | {
          prop1: string
      }
    | {
          prop2: string
      }
function myFunc() {}

The syntax of function myFunc() {} and everything after it is broken.

I found that it happens only in this rare edge case. Some things that actually fix it:

Adding a semicolon

let myObj:
    | {
          prop1: string
      }
    | {
          prop2: string
      };
function myFunc() {}

Writing the union type on a single line

let myObj: { prop1: string } | { prop2: string }
function myFunc() {}

Adding a line break before the next line of code

let myObj:
    | {
          prop1: string
      }
    | {
          prop2: string
      }

function myFunc() {}

Bad highlighting:

Wanted highlighting:

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

Happy Coding!

Add something like |(?=function\\s) to type-annotation should work

It's not just functions, anything that comes after it has bad syntax highlighting unfortunately

Here is another example, if needed. The first test1 function renders correctly, but the second test2 function does not.

function testFunc<A, B>(fn: (arg3: string) => void): any {
  // ...
}

const test1 = testFunc<
  string,
  string
>(async (arg3: string) => {
  const abc = 1;
  return abc.toString();
});

const testObj = {
  test2: testFunc<
    string,
    string
  >(async (arg3: string) => {
    const abc = 1;
    return abc.toString();
  }),
};

This is the result in Monokai. Notice how the keywords async, const and return are incorrect, as well as the closing > in the generic type.

In some themes there are further issues; in One Monokai, notice the abc variable and toString function.

Navigation Menu

Repository navigation

Bad syntax Highlighting in TS when using multiline union types #1043

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Bad syntax Highlighting in TS when using multiline union types #1043

Description

Activity

vs-code-engineering commented on Nov 29, 2024

RedCMD commented on Nov 29, 2024

tgroutars commented on Dec 12, 2024

saltire commented on Jan 23, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions