diff --git a/extensions/vscode/package.json b/extensions/vscode/package.json
index f8bf2c5aa7..3aefe48ef3 100644
--- a/extensions/vscode/package.json
+++ b/extensions/vscode/package.json
@@ -556,6 +556,7 @@
 		"esbuild": "~0.21.0",
 		"esbuild-plugin-copy": "latest",
 		"esbuild-visualizer": "latest",
-		"semver": "^7.5.4"
+		"semver": "^7.5.4",
+		"vscode-tmlanguage-snapshot": "latest"
 	}
 }
diff --git a/extensions/vscode/tests/__snapshots__/grammar.spec.ts.snap b/extensions/vscode/tests/__snapshots__/grammar.spec.ts.snap
index 828a4eb916..00f1dbdb3e 100644
--- a/extensions/vscode/tests/__snapshots__/grammar.spec.ts.snap
+++ b/extensions/vscode/tests/__snapshots__/grammar.spec.ts.snap
@@ -9,3 +9,425 @@ exports[`grammar > basic.vue 1`] = `
 #       ^^^ source.vue entity.name.tag.div.html.vue
 #          ^ source.vue punctuation.definition.tag.end.html.vue"
 `;
+
+exports[`grammar > directives.vue 1`] = `
+"><template>
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#         ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+>	<div @click></div>
+#^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div @click="{}"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div @click="log('hello'); log('world');"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div #default></div>
+#^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div #default="args"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div #></div>
+#^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div #="args"></div>
+#^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div :key></div>
+#^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div :key="{}"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div v-if="true"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div v-else-if="true"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div v-else></div>
+#^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div v-for="n in []"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div v-if="true" v-else-if="true" v-else></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div :foo="':foo=123'"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div :foo="[{ bar: []}]"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div .prop="[1, 2]"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div v-a:[({a:1}).a]="1"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div v-a:[c]></div>
+#^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div v-a:[({a:1}).a].d="[1, 2]"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div @[({a:1}).a].d="[1, 2]" v-d:[2]="3"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div :[1]="value"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div :xlink:special.d="3"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div v-a.c.d="3"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+></template>
+#^^ source.vue punctuation.definition.tag.begin.html.vue
+#  ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#          ^ source.vue punctuation.definition.tag.end.html.vue
+>
+#^ source.vue
+><template lang="pug">
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#         ^^^^^^^^^^^ source.vue meta.tag-stuff
+#                    ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+>div(@click)
+#^^^^^^^^^^^^ source.vue
+>div(@click="{}")
+#^^^^^^^^^^^^^^^^^ source.vue
+>div(@click="log('hello'); log('world');")
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue
+>div(#default)
+#^^^^^^^^^^^^^^ source.vue
+>div(#default="args")
+#^^^^^^^^^^^^^^^^^^^^^ source.vue
+>div(#)
+#^^^^^^^ source.vue
+>div(#="args")
+#^^^^^^^^^^^^^^ source.vue
+>div(:key)
+#^^^^^^^^^^ source.vue
+>div(:key="{}")
+#^^^^^^^^^^^^^^^ source.vue
+>div(v-if="true")
+#^^^^^^^^^^^^^^^^^ source.vue
+>div(v-else-if="true")
+#^^^^^^^^^^^^^^^^^^^^^^ source.vue
+>div(v-else)
+#^^^^^^^^^^^^ source.vue
+>div(v-for="n in []")
+#^^^^^^^^^^^^^^^^^^^^^ source.vue
+>div(v-if="true" v-else-if="true" v-else)
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue
+>div(:foo="':foo=123'")
+#^^^^^^^^^^^^^^^^^^^^^^^ source.vue
+>div(:foo="[{ bar: []}]")
+#^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue
+>div(.prop="[1, 2]")
+#^^^^^^^^^^^^^^^^^^^^ source.vue
+></template>
+#^^ source.vue punctuation.definition.tag.begin.html.vue
+#  ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#          ^ source.vue punctuation.definition.tag.end.html.vue
+>
+#^ source.vue
+><template lang="pug">
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#         ^^^^^^^^^^^ source.vue meta.tag-stuff
+#                    ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+>h1.myClass(class="text-right") hello
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue
+>//- https://github.com/vuejs/language-tools/issues/1826
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue
+>h1#myId(class="text-right") hello
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue
+></template>
+#^^ source.vue punctuation.definition.tag.begin.html.vue
+#  ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#          ^ source.vue punctuation.definition.tag.end.html.vue
+>
+#^ source.vue
+><!-- TODO -->
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^ source.vue
+#  ^^ source.vue entity.name.tag.--.html.vue
+#    ^^^^^^^^ source.vue meta.tag-stuff
+#            ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+><template lang="html">
+#^^^^^^^^^^^^^^^^^^^^^^^ source.vue text
+>	<div @click></div>
+#^^^^^^^^^^^^^ source.vue text
+#             ^^^^^^^ source.vue text
+>	<div @click="{}"></div>
+#^^^^^^^^^^^^^^^^^^ source.vue text
+#                  ^^^^^^^ source.vue text
+>	<div @click="log('hello'); log('world');"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text
+#                                           ^^^^^^^ source.vue text
+>	<div #default></div>
+#^^^^^^^^^^^^^^^ source.vue text
+#               ^^^^^^^ source.vue text
+>	<div #default="args"></div>
+#^^^^^^^^^^^^^^^^^^^^^^ source.vue text
+#                      ^^^^^^^ source.vue text
+>	<div #></div>
+#^^^^^^^^ source.vue text
+#        ^^^^^^^ source.vue text
+>	<div #="args"></div>
+#^^^^^^^^^^^^^^^ source.vue text
+#               ^^^^^^^ source.vue text
+>	<div :key></div>
+#^^^^^^^^^^^ source.vue text
+#           ^^^^^^^ source.vue text
+>	<div :key="{}"></div>
+#^^^^^^^^^^^^^^^^ source.vue text
+#                ^^^^^^^ source.vue text
+>	<div v-if="true"></div>
+#^^^^^^^^^^^^^^^^^^ source.vue text
+#                  ^^^^^^^ source.vue text
+>	<div v-else-if="true"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^ source.vue text
+#                       ^^^^^^^ source.vue text
+>	<div v-else></div>
+#^^^^^^^^^^^^^ source.vue text
+#             ^^^^^^^ source.vue text
+>	<div v-for="n in []"></div>
+#^^^^^^^^^^^^^^^^^^^^^^ source.vue text
+#                      ^^^^^^^ source.vue text
+>	<div v-if="true" v-else-if="true" v-else></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text
+#                                          ^^^^^^^ source.vue text
+>	<div :foo="':foo=123'"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text
+#                        ^^^^^^^ source.vue text
+>	<div :foo="[{ bar: []}]"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text
+#                          ^^^^^^^ source.vue text
+>	<div .prop="[1, 2]"></div>
+#^^^^^^^^^^^^^^^^^^^^^ source.vue text
+#                     ^^^^^^^ source.vue text
+></template>
+#^^^^^^^^^^^ source.vue
+>
+#^ source.vue text"
+`;
+
+exports[`grammar > generic.vue 1`] = `
+"><script setup generic="T"></script>
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^^^^^^ source.vue entity.name.tag.script.html.vue
+#       ^^^^^^^ source.vue meta.tag-stuff
+#              ^^^^^^^ source.vue meta.tag-stuff meta.attribute.generic.vue entity.other.attribute-name.html.vue
+#                     ^ source.vue meta.tag-stuff meta.attribute.generic.vue punctuation.separator.key-value.html.vue
+#                      ^ source.vue meta.tag-stuff meta.attribute.generic.vue meta.type.parameters.vue punctuation.definition.string.begin.html.vue
+#                       ^ source.vue meta.tag-stuff meta.attribute.generic.vue meta.type.parameters.vue
+#                        ^ source.vue meta.tag-stuff meta.attribute.generic.vue meta.type.parameters.vue punctuation.definition.string.end.html.vue
+#                         ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+#                          ^^ source.vue punctuation.definition.tag.begin.html.vue
+#                            ^^^^^^ source.vue entity.name.tag.script.html.vue
+#                                  ^ source.vue punctuation.definition.tag.end.html.vue
+>
+#^ source.vue"
+`;
+
+exports[`grammar > inline-style.vue 1`] = `
+"><template>
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#         ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+>	<div style="width: 100%; height: auto;"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+></template>
+#^^ source.vue punctuation.definition.tag.begin.html.vue
+#  ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#          ^ source.vue punctuation.definition.tag.end.html.vue
+>
+#^ source.vue
+><template lang="pug">
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#         ^^^^^^^^^^^ source.vue meta.tag-stuff
+#                    ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+>div(style="width: 100%; height: auto;")
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue
+></template>
+#^^ source.vue punctuation.definition.tag.begin.html.vue
+#  ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#          ^ source.vue punctuation.definition.tag.end.html.vue
+>
+#^ source.vue"
+`;
+
+exports[`grammar > jsx.vue 1`] = `
+"><script lang="tsx">
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^^^^^^ source.vue entity.name.tag.script.html.vue
+#       ^^^^^^^^^^^ source.vue meta.tag-stuff
+#                  ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+>(<Foo
+#^^^^^^ source.vue
+>	class={{ 'foo': 123 }}
+#^^^^^^^^^^^^^^^^^^^^^^^^ source.vue
+>/>);
+#^^^^^ source.vue
+></script>
+#^^ source.vue punctuation.definition.tag.begin.html.vue
+#  ^^^^^^ source.vue entity.name.tag.script.html.vue
+#        ^ source.vue punctuation.definition.tag.end.html.vue
+>
+#^ source.vue
+><script lang="jsx">
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^^^^^^ source.vue entity.name.tag.script.html.vue
+#       ^^^^^^^^^^^ source.vue meta.tag-stuff
+#                  ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+>(<Foo
+#^^^^^^ source.vue
+>	class={{ 'foo': 123 }}
+#^^^^^^^^^^^^^^^^^^^^^^^^ source.vue
+>/>)
+#^^^^ source.vue
+></script>
+#^^ source.vue punctuation.definition.tag.begin.html.vue
+#  ^^^^^^ source.vue entity.name.tag.script.html.vue
+#        ^ source.vue punctuation.definition.tag.end.html.vue
+>
+#^ source.vue"
+`;
+
+exports[`grammar > namespaced.vue 1`] = `
+"><script setup lang="ts">
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^^^^^^ source.vue entity.name.tag.script.html.vue
+#       ^^^^^^^^^^^^^^^^ source.vue meta.tag-stuff
+#                       ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+>import { Component } from "vue";
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue
+>import { defineComponent } from "vue";
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue
+>const A = {
+#^^^^^^^^^^^^ source.vue
+>  B: {
+#^^^^^^^ source.vue
+>    C: defineComponent({
+#^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue
+>      setup() {
+#^^^^^^^^^^^^^^^^ source.vue
+>        return () => "";
+#^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue
+>      },
+#^^^^^^^^^ source.vue
+>    }),
+#^^^^^^^^ source.vue
+>  },
+#^^^^^ source.vue
+>};
+#^^^ source.vue
+>const C: Component & {
+#^^^^^^^^^^^^^^^^^^^^^^^ source.vue
+>  D: Component;
+#^^^^^^^^^^^^^^^^ source.vue
+>} = null!;
+#^^^^^^^^^^^ source.vue
+></script>
+#^^ source.vue punctuation.definition.tag.begin.html.vue
+#  ^^^^^^ source.vue entity.name.tag.script.html.vue
+#        ^ source.vue punctuation.definition.tag.end.html.vue
+>
+#^ source.vue
+><template>
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#         ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+>  <A.B.C> {{ A.B.C }} </A.B.C>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>  <A.B.C />
+#^^^^^^^^^^^^ source.vue text.html.derivative
+>  <C>
+#^^^^^^ source.vue text.html.derivative
+>    <C.D> 222 </C.D>
+#^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>    <C.D />
+#^^^^^^^^^^^^ source.vue text.html.derivative
+>  </C>
+#^^^^^^^ source.vue text.html.derivative
+></template>
+#^^ source.vue punctuation.definition.tag.begin.html.vue
+#  ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#          ^ source.vue punctuation.definition.tag.end.html.vue
+>
+#^ source.vue"
+`;
+
+exports[`grammar > script-tag-in-script.vue 1`] = `
+"><script>'<script></script>'</script>
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^^^^^^ source.vue entity.name.tag.script.html.vue
+#       ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+#        ^^^^^^^^^ source.vue
+#                 ^^ source.vue punctuation.definition.tag.begin.html.vue
+#                   ^^^^^^ source.vue entity.name.tag.script.html.vue
+#                         ^ source.vue punctuation.definition.tag.end.html.vue
+#                          ^ source.vue
+#                           ^ source.vue punctuation.definition.tag.begin.html.vue
+#                            ^ source.vue
+#                             ^^^^^^ source.vue entity.name.tag.script.html.vue
+#                                   ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+>
+#^ source.vue"
+`;
+
+exports[`grammar > template-expression.vue 1`] = `
+"><template>
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#         ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+>	<div v-if="var as XXX"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div v-if="var instanceof XXX"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div v-if="typeof xxx"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div v-if="typeof XXX"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+>	<div v-if="''.toString('xxx')"></div>
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+></template>
+#^^ source.vue punctuation.definition.tag.begin.html.vue
+#  ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#          ^ source.vue punctuation.definition.tag.end.html.vue
+>
+#^ source.vue"
+`;
+
+exports[`grammar > template-in-template.vue 1`] = `
+"><template>
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#         ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+>	<template>
+#^ source.vue text.html.derivative
+# ^ source.vue text.html.derivative meta.template-tag.start punctuation.definition.tag.begin.html.vue
+#  ^^^^^^^^ source.vue text.html.derivative meta.template-tag.start entity.name.tag.template.html.vue
+#          ^ source.vue text.html.derivative meta.template-tag.start punctuation.definition.tag.end.html.vue
+>		<template></template>
+#^^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end
+#  ^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end meta.template-tag.start punctuation.definition.tag.begin.html.vue
+#   ^^^^^^^^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end meta.template-tag.start entity.name.tag.template.html.vue
+#           ^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end meta.template-tag.start punctuation.definition.tag.end.html.vue
+#            ^^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end meta.template-tag.start meta.template-tag.end punctuation.definition.tag.begin.html.vue
+#              ^^^^^^^^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end meta.template-tag.start meta.template-tag.end entity.name.tag.template.html.vue
+#                      ^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end meta.template-tag.start punctuation.definition.tag.end.html.vue
+>	</template>
+#^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end
+# ^^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end punctuation.definition.tag.begin.html.vue
+#   ^^^^^^^^ source.vue text.html.derivative meta.template-tag.start meta.template-tag.end entity.name.tag.template.html.vue
+#           ^ source.vue text.html.derivative meta.template-tag.start punctuation.definition.tag.end.html.vue
+></template>
+#^^ source.vue punctuation.definition.tag.begin.html.vue
+#  ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#          ^ source.vue punctuation.definition.tag.end.html.vue
+>
+#^ source.vue
+><template lang="pug">
+#^ source.vue punctuation.definition.tag.begin.html.vue
+# ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#         ^^^^^^^^^^^ source.vue meta.tag-stuff
+#                    ^ source.vue meta.tag-stuff punctuation.definition.tag.end.html.vue
+>template
+#^^^^^^^^^ source.vue
+>	template
+#^^^^^^^^^^ source.vue
+></template>
+#^^ source.vue punctuation.definition.tag.begin.html.vue
+#  ^^^^^^^^ source.vue entity.name.tag.template.html.vue
+#          ^ source.vue punctuation.definition.tag.end.html.vue
+>
+#^ source.vue"
+`;
diff --git a/extensions/vscode/tests/grammar.spec.ts b/extensions/vscode/tests/grammar.spec.ts
index 0c5e7068ee..4790ba6431 100644
--- a/extensions/vscode/tests/grammar.spec.ts
+++ b/extensions/vscode/tests/grammar.spec.ts
@@ -1,19 +1,18 @@
 import * as path from 'path';
-import * as _fg from 'fast-glob';
+import * as fs from 'fs';
 import { describe, expect, it } from 'vitest';
 import { createGrammarSnapshot } from 'vscode-tmlanguage-snapshot';
 
-const fg: typeof _fg = (_fg as any).default;
-const fixturesDir = path.resolve(__dirname, '../../../test-workspace/grammar');
+const fixturesDir = path.resolve(__dirname, './grammarFixtures');
 const packageJsonPath = path.resolve(__dirname, '../package.json');
 
 describe('grammar', async () => {
 	const snapshot = await createGrammarSnapshot(packageJsonPath);
-	const cases = await fg(path.join(fixturesDir, "**").replace(/\\/g, "/"));
+	const fixtures = fs.readdirSync(fixturesDir);
 
-	for (const kase of cases) {
-		it(path.relative(fixturesDir, kase).replace(/\\/g, "/"), async () => {
-			const result = await snapshot(kase);
+	for (const fixture of fixtures) {
+		it.skipIf(fixture === 'snippet-import.md')(fixture, async () => {
+			const result = await snapshot(`tests/grammarFixtures/${fixture}`);
 
 			expect(result).toMatchSnapshot();
 		});
diff --git a/test-workspace/grammar/basic.vue b/extensions/vscode/tests/grammarFixtures/basic.vue
similarity index 100%
rename from test-workspace/grammar/basic.vue
rename to extensions/vscode/tests/grammarFixtures/basic.vue
diff --git a/test-workspace/language-service/syntax/directives.vue b/extensions/vscode/tests/grammarFixtures/directives.vue
similarity index 100%
rename from test-workspace/language-service/syntax/directives.vue
rename to extensions/vscode/tests/grammarFixtures/directives.vue
diff --git a/test-workspace/language-service/syntax/generic.vue b/extensions/vscode/tests/grammarFixtures/generic.vue
similarity index 100%
rename from test-workspace/language-service/syntax/generic.vue
rename to extensions/vscode/tests/grammarFixtures/generic.vue
diff --git a/test-workspace/language-service/syntax/inline-style.vue b/extensions/vscode/tests/grammarFixtures/inline-style.vue
similarity index 100%
rename from test-workspace/language-service/syntax/inline-style.vue
rename to extensions/vscode/tests/grammarFixtures/inline-style.vue
diff --git a/test-workspace/language-service/syntax/jsx.vue b/extensions/vscode/tests/grammarFixtures/jsx.vue
similarity index 100%
rename from test-workspace/language-service/syntax/jsx.vue
rename to extensions/vscode/tests/grammarFixtures/jsx.vue
diff --git a/test-workspace/language-service/syntax/namespaced.vue b/extensions/vscode/tests/grammarFixtures/namespaced.vue
similarity index 100%
rename from test-workspace/language-service/syntax/namespaced.vue
rename to extensions/vscode/tests/grammarFixtures/namespaced.vue
diff --git a/test-workspace/language-service/syntax/script-tag-in-script.vue b/extensions/vscode/tests/grammarFixtures/script-tag-in-script.vue
similarity index 100%
rename from test-workspace/language-service/syntax/script-tag-in-script.vue
rename to extensions/vscode/tests/grammarFixtures/script-tag-in-script.vue
diff --git a/test-workspace/language-service/syntax/snippet-import.md b/extensions/vscode/tests/grammarFixtures/snippet-import.md
similarity index 100%
rename from test-workspace/language-service/syntax/snippet-import.md
rename to extensions/vscode/tests/grammarFixtures/snippet-import.md
diff --git a/test-workspace/language-service/syntax/template-expression.vue b/extensions/vscode/tests/grammarFixtures/template-expression.vue
similarity index 100%
rename from test-workspace/language-service/syntax/template-expression.vue
rename to extensions/vscode/tests/grammarFixtures/template-expression.vue
diff --git a/test-workspace/language-service/syntax/template-in-template.vue b/extensions/vscode/tests/grammarFixtures/template-in-template.vue
similarity index 100%
rename from test-workspace/language-service/syntax/template-in-template.vue
rename to extensions/vscode/tests/grammarFixtures/template-in-template.vue
diff --git a/package.json b/package.json
index c82836a9d0..2e95edd2db 100644
--- a/package.json
+++ b/package.json
@@ -26,11 +26,9 @@
 		"@tsslint/cli": "latest",
 		"@tsslint/config": "latest",
 		"@volar/language-service": "~2.4.0",
-		"fast-glob": "^3.3.2",
 		"typescript": "latest",
 		"vite": "latest",
-		"vitest": "latest",
-		"vscode-tmlanguage-snapshot": "^0.1.3"
+		"vitest": "latest"
 	},
 	"pnpm": {
 		"overrides": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c54d2af350..866131ace8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,9 +35,6 @@ importers:
       '@volar/language-service':
         specifier: https://pkg.pr.new/volarjs/volar.js/@volar/language-service@28cbdee
         version: https://pkg.pr.new/volarjs/volar.js/@volar/language-service@28cbdee
-      fast-glob:
-        specifier: ^3.3.2
-        version: 3.3.2
       typescript:
         specifier: latest
         version: 5.5.3
@@ -47,9 +44,6 @@ importers:
       vitest:
         specifier: latest
         version: 2.0.3(@types/node@20.14.11)
-      vscode-tmlanguage-snapshot:
-        specifier: ^0.1.3
-        version: 0.1.3
 
   extensions/vscode:
     devDependencies:
@@ -86,6 +80,9 @@ importers:
       semver:
         specifier: ^7.5.4
         version: 7.6.2
+      vscode-tmlanguage-snapshot:
+        specifier: latest
+        version: 0.1.3
 
   packages/component-meta:
     dependencies: