YAML Syntax Highlighting

[robertmoura]

Vue - Official extension or vue-tsc version

2.0.28

VSCode version

1.92.0

Vue version

3.4.35

TypeScript version

5.5.4

System Info

System:
  OS: macOS 14.6
  CPU: (8) arm64 Apple M1
  Memory: 434.44 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 22.1.0 - /usr/local/bin/node
  Yarn: 4.4.0 - /usr/local/bin/yarn
  npm: 10.7.0 - /usr/local/bin/npm
Browsers:
  Chrome: 127.0.6533.89
  Edge: 127.0.2651.86
  Safari: 17.6

Steps to reproduce

Put the following into a single file component:

<route lang="yaml">
property: 'value'
</route>

<template>
    <div property="3"></div>
</template>

What is expected?

The YAML code is highlighted without affecting the template highlighting.

What is actually happening?

The route block seems to be breaking the highlighting of the rest of the single file component.

It only seems to be a problem with YAML. Here's an example with JSON:

Link to minimal reproduction

No response

Any additional comments?

This issue may be related to #2060. Although I think this may be something else because it used to work but seems to have broken for me recently. Changing the Vue Extension versions doesn't seem to fix the issue either so I wonder whether it might be something else?

UPDATES 21 August 2024

See #4654 (comment)

[kermanx]

Cannot reproduce this in Vue Playground:

Please disable all other plugins and see if this still happens

[robertmoura]

Seems like this is working for me this morning 😄 Not sure why that was happening. There may be an issue but it might be an edge case that I wouldn't know how to reproduce. Closing this one.

Thanks for trying that out in the playground @kermanx.

[RedCMD]

caused by microsoft/vscode#219833

you will need to update your embedding before VSCode re-adds the new YAML grammar again

something like this will work:
it uses while instead of begin/end

"patterns": [
	{
		"begin": "\\G(?![^<]*+<)",
		"while": "^(?![^<]*+<)",
		"patterns": [ { "include": "source.yaml" } ]
	},
	{
		"match": "[^<]++",
		"captures": { "0": { "patterns": [ { "include": "source.yaml" } ] } }
	}
]

language-tools/extensions/vscode/syntaxes/vue.tmLanguage.json

Lines 570 to 601 in d24c984

	{
	"begin": "([a-zA-Z0-9:-]+)\\b(?=[^>]*\\blang\\s*=\\s*(['\"]?)yaml\\b\\2)",
	"beginCaptures": {
	"1": {
	"name": "entity.name.tag.$1.html.vue"
	}
	},
	"end": "(</)(\\1)\\s*(?=>)",
	"endCaptures": {
	"1": {
	"name": "punctuation.definition.tag.begin.html.vue"
	},
	"2": {
	"name": "entity.name.tag.$2.html.vue"
	}
	},
	"patterns": [
	{
	"include": "#tag-stuff"
	},
	{
	"begin": "(?<=>)",
	"end": "(?=<\\/)",
	"name": "source.yaml",
	"patterns": [
	{
	"include": "source.yaml"
	}
	]
	}
	]
	},

it'll also fix old bugs with the embedded language breaking out
(unclosed strings/brackets etc)

old:

fixed:

<route lang="yaml">
abc: 5
</route>

<route lang="yaml">abc: 5
abc: 5
</route>

<route lang="yaml">abc: 5
abc: 5
abc: 5</route>

<route lang="yaml">
abc: 5</route>

<route lang="yaml">abc: 5</route>

related: microsoft/vscode#224862

[robertmoura]

Based on what @RedCMD mentioned above there might be more work to do here for a future VSCode release. Reopening so that this can be looked into. See #4654 (comment)

[RedCMD]

VSCode is looking at re-adding the new YAML grammar again in the upcoming Sep 4th release
microsoft/vscode#180523 (comment)

[robertmoura]

This is now an issue again 😄