Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
tgroutars opened this issue Nov 29, 2024 · 4 comments
Open

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

tgroutars opened this issue Nov 29, 2024 · 4 comments
Assignees

Comments

@tgroutars
Copy link

tgroutars commented Nov 29, 2024

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:

  1. Adding a semicolon
let myObj:
    | {
          prop1: string
      }
    | {
          prop2: string
      };
function myFunc() {}
  1. Writing the union type on a single line
let myObj: { prop1: string } | { prop2: string }
function myFunc() {}
  1. Adding a line break before the next line of code
let myObj:
    | {
          prop1: string
      }
    | {
          prop2: string
      }

function myFunc() {}

Bad highlighting:
Image

Wanted highlighting:
Image

Copy link

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!

@RedCMD
Copy link

RedCMD commented Nov 29, 2024

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

Image

Image

@mjbvz mjbvz transferred this issue from microsoft/vscode Dec 3, 2024
@tgroutars
Copy link
Author

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

@saltire
Copy link

saltire commented Jan 23, 2025

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.

Image

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

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants