Right caret color becoming red incorrectly

[SCG82]

Type: Bug

In Typescript, using the Default Dark+ theme, the right caret is being colored red in comparisons (greater than, greater than or equals), and in fat arrows (=>).

VS Code version: Code 1.70.0 (da76f93, 2022-08-04T04:38:55.829Z)
OS version: Darwin x64 18.7.0
Modes:
Remote OS version: Linux x64 5.4.0-107-generic
Remote OS version: Linux x64 4.15.0-70-generic

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-3820QM CPU @ 2.70GHz (8 x 2700)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled metal: disabled_off multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: enabled video_encode: enabled webgl: enabled webgl2: enabled
Load (avg)	2, 2, 2
Memory (System)	16.00GB (3.23GB free)
Process Argv	--crash-reporter-id b304ab23-9781-4187-967b-efb5b43bd9d1
Screen Reader	no
VM	0%

Item	Value
Remote	SSH: dev-app6
OS	Linux x64 5.4.0-107-generic
CPUs	Intel Xeon Processor (Skylake, IBRS) (16 x 2399)
Memory (System)	15.63GB (6.96GB free)
VM	0%

Item	Value
Remote	SSH: mfcalerts1
OS	Linux x64 4.15.0-70-generic
CPUs	Intel(R) Xeon(R) Gold 6130 CPU @ 2.10GHz (32 x 1028)
Memory (System)	62.58GB (0.57GB free)
VM	0%

Extensions (17)

Extension	Author (truncated)	Version
language-prometheus	caa	0.1.2
vscode-nginx-conf-hint	han	0.3.0
jupyter-keymap	ms-	1.0.0
remote-ssh	ms-	0.84.0
remote-ssh-edit	ms-	0.80.0
npm-intellisense	chr	1.4.2
vscode-eslint	dba	2.2.6
gitlens	eam	12.1.2
copilot	Git	1.38.6394
Untabify	ili	0.0.2
python	ms-	2022.12.0
vscode-pylance	ms-	2022.8.10
typescript-javascript-grammar	ms-	0.0.55
indent-space	SCG	0.4.0
language-stylus	sys	1.16.0
shellcheck	tim	0.19.6
vscodeintellicode	Vis	1.2.22

(3 theme extensions excluded)

[IllusionMH]

/needsMoreInfo

Is it plain TS file or as embedded language e.g. in Vue file?
Is it reproducible with all extensions disabled?
You can try this with F1 and >Developer: Reload Window With Extensions Disabled

My guess is that typescript-javascript-grammar might cause problems as </> requires proper TM grammars for bracket pairs support.

[VSCodeTriageBot]

Thanks for creating this issue! We figured it's missing some basic information or in some other way doesn't follow our issue reporting guidelines. Please take the time to review these and update the issue.

Happy Coding!

[SCG82]

/needsMoreInfo

Is it plain TS file or as embedded language e.g. in Vue file? Is it reproducible with all extensions disabled? You can try this with F1 and >Developer: Reload Window With Extensions Disabled

My guess is that typescript-javascript-grammar might cause problems as </> requires proper TM grammars for bracket pairs support.

The example above was from a tsx file (React-Typescript), but this issue also occurs in plain .ts files. Same observation when reloading with extensions disabled.

[SCG82]

Disabling Editor › Bracket Pair Colorization

"editor.bracketPairColorization.enabled": false

removes the red color from the > symbols.

[SCG82]

Could this be caused by #151705?

[timothycohen]

This bug also occurs in Svelte SFC under the following conditions:

• .svelte file
• svelte.svelte-vscode extension
• lang="ts" script
• "editor.bracketPairColorization.enabled": true
• VSCode 1.70.0

The closing bracket for Svelte doesn't include an unbalanced source.ts scope as mentioned as a possible cause in #156168

It does seem related to PR 151705 – commenting out these lines returns the regular highlighting.

[hediet]

In Typescript, using the Default Dark+ theme, the right caret is being colored red in comparisons (greater than, greater than or equals), and in fat arrows (=>).

Can you share the code so I can try to reproduce? Can you inspect the token > with the "Inspect editor tokens..." command and share a screenshot?

[ysya]

same here

• Vue SFC
• lang="ts" script

greater than or less than:

[hediet]

I think I have an idea what causes this bug - unfortunately, only the root grammars unbalanced tokens are considered, not those of injected grammars (see my comment here).

I cannot promise a fix in VS Code for this month, as the VS Code textmate library is quite complex, but this bug can be fixed already in volar.

[SCG82]

const getRecommendationPercentage = (recommendation: number) => {
    if (recommendation < 0.02) {
        return 100
    } else if (recommendation > 0.1) {
        return 90
    } else if (recommendation > 0.08) {
        return 80
    }
    return 50
}

[riskoviv]

I encountered almost the same issue but with type parameter's chevrons in generic function declaration:

TypeScript don't emit an error here and this code is correct and compiles correctly, but last chevron is red and opening chevron on the left (its pair) is not colored correctly (it's white). Also in developer tools I found out that this red chevron has class unexpected-closing-bracket that gives it red color:

Editor token inspection shows this:

Other closing chevrons have these textmate scopes

with difference only in count of times meta.type.parameters.ts repeated

Also as you may have noticed, this "error" disrupts some of code colorization on lines after it, for instance it makes const and return keywords colored incorrectly:

On next lines every const, return, export keywords are colored incorrectly too.

There is a difference too:
Normal const:

const on lines after chevron error:

But if I write code this way (extract type expression to separate generic type (TypedObj here), error disappears:

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

• VS Code Version: 1.70.0
• OS Version: Windows 10 Pro 21H2

[SCG82]

As mentioned in vuejs/language-tools#1677 (comment), adding the following to settings.json can be used as a temporary workaround:

"editor.language.colorizedBracketPairs": [
    ["{", "}"],
    ["[", "]"],
    ["(", ")"]
]

[hediet]

I cannot reproduce:

Can you try to reproduce in Vs Code Insiders? Or without any extensions?

[SCG82]

I think I just figured it out. The right caret no longer appears red after I uninstalled ms-vscode.typescript-javascript-grammar

[hediet]

This looks like being fixed now.

[dsherley9]

@hediet I noticed you are using a .tsx when trying to replicate. Can you try to replicate it with a .vue extension? I'm still able to replicate it myself. The use case here is a Vue 3 SFC.

[hediet]

Can you try to replicate it with a .vue extension?

Then it is a bug in the extension that provides .vue support.