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

export let x: Type and type declaration without ending semicolon last in script block breaks syntax highlighting #1970

Closed
poppa opened this issue Apr 1, 2023 · 13 comments
Labels

Comments

@poppa
Copy link

poppa commented Apr 1, 2023

Describe the bug

When running Typescript mode and you have either an export let varName: Type, or type Type = type without a line-ending semicolon last in a script block, the syntax highlighting breaks.

The problem with type declarations I've seen for ages, but the problem with component properties arrived yesterday after updating VS Code.

I think the screenshots are quite explanatory.

Syntax highlight breaks after ZeRow

export-let

Syntax highlighting breaks after the ending curly brace for type declaration Test

type

Syntax highlight works when ending type declaration with a semicolon

type-with-semi

Syntax highlighting works when ending property declaration with semicolon

export-let-with-semi

Syntax highlighting works when ending script block with some other statement or expression

other-expr

Reproduction

This simple snippet is sufficient to to reproduce the bug.

<script lang="ts">
export let test: any
</script>

Expected behaviour

I expect the ending </script> tag to be correctly highlighted

System Info

  • IDE: VS Code

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

No response

@poppa poppa added the bug Something isn't working label Apr 1, 2023
@jasonlyu123 jasonlyu123 added upstream and removed bug Something isn't working labels Apr 1, 2023
@jasonlyu123
Copy link
Member

jasonlyu123 commented Apr 1, 2023

This is an "issue" with the upstream TypeScript syntax highlight. But I can't find a situation where it will break inside a ts file. It was changed to be more precise in multiple lines type alias. But it breaks in vue, svelte and astro files. I am afraid there is not much we can do.

@poppa
Copy link
Author

poppa commented Apr 2, 2023

Ok, so does upstream mean VS Code itself? Does this issue get propagated there or should I create a new bug report there (where ever that might be)?

I have never seen this bug inside a pure .ts file, so I guess it has something to do with the <script> block.

It got worse with the latest VS Code update:

Version: 1.77.0
Commit: 7f329fe6c66b0f86ae1574c2911b681ad5a45d63
Date: 2023-03-29T09:57:11.797Z
Electron: 19.1.11
Chromium: 102.0.5005.196
Node.js: 16.14.2
V8: 10.2.154.26-electron.0
OS: Darwin x64 22.1.0
Sandboxed: Yes

Before that only the type case was causing problem, but after this update the export let varName: Type problem arose.

@babak-bxp
Copy link

1-min
2-min

@jasonlyu123
Copy link
Member

Type alias without a semi also breaks highlight in a ts file. It's tracked here in #1110.

About let without a semi, Yes, it is related to the script tag because it doesn't exist in a ts file. So </script> won't be a condition for ending the match. Therefore, I don't think they will consider that a bug on their side.

We have a config file to define regex rules for VSCode to highlight the script tag section with TypeScirpt. But sometimes it seems like if one of the embed language matching rules hasn't ended, It won't consider top-level "</script>". So we either have to change TypeScript's highlight somehow to stop matching type annotation if there is a "</script>" or we'll have to find a way to force any TypeScript matching if there is a "</script>".

We know this problem when it's still in beta. But I haven't found a way to work around it on our side yet. I don't think this will be fixed anytime soon. You can work around it with a comment or an empty line afterwards.

@JUNGHUNKIM-7
Copy link

JUNGHUNKIM-7 commented Apr 4, 2023

same issue here, without semi, syntax crashing happens anywhere. AstroJs has same problems too. i think those problems might be related vscode's side.

@einarpersson
Copy link

einarpersson commented Apr 5, 2023

Seems to have been fixed now, but I don't know how to update 😆
(maybe I have to switch to Visual Studio Code Insiders...)

microsoft/TypeScript-TmLanguage#971
microsoft/vscode#179068

@jasonlyu123
Copy link
Member

Once it's merged into VSCode main, You can test it with VSCode insider. Or you can try it with the TypeScript nightly extension for the nightly release of TSServer and TypeScript-TmLanguage. I tested it, and it seems to be fixed yesterday by another commit. A by-product of other TypeScript statements 😆.

@einarpersson
Copy link

Is this still an issue for people? I think this is fixed in vscode 1.77.1.

If confirmed this could be closed, I suppose?

@poppa
Copy link
Author

poppa commented Apr 7, 2023

This still seems to be a problem in VSC 1.77.1

Screenshot 2023-04-07 at 07 45 46

@jasonlyu123
Copy link
Member

It's fixed by another issue other than the linked one, and it's only in the TypeScript nightly extension now.

@poppa
Copy link
Author

poppa commented Apr 13, 2023

This seems to be fixed in the latest VS Code, so I'm all good 👍

(And thanks for all the good work you guys do 🤩)

@jasonlyu123
Copy link
Member

Reopening for visibility. Let's close this when it is fixed in VSCode stable. It should be fixed in a few days in VSCode 1.78.

@jasonlyu123
Copy link
Member

Fixed in VSCode 1.78

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

No branches or pull requests

5 participants