fix(vscode): inline html comment pattern in Vue syntax definition (#5327)

Author: zyoshoka

extensions/vscode/syntaxes/vue.tmLanguage.json

@@ -6,9 +6,6 @@
 		{
 			"include": "#vue-comments"
 		},
-		{
-			"include": "text.html.basic#comment"
-		},
 		{
 			"include": "#self-closing-tag"
 		},
@@ -1286,6 +1283,16 @@
 			"patterns": [
 				{
 					"include": "#vue-comments-key-value"
+				},
+				{
+					"begin": "<!--",
+					"captures": {
+						"0": {
+							"name": "punctuation.definition.comment.vue"
+						}
+					},
+					"end": "-->",
+					"name": "comment.block.vue"
 				}
 			]
 		},

extensions/vscode/tests/__snapshots__/grammar.spec.ts.snap

@@ -134,68 +134,71 @@ exports[`grammar > directives.vue 1`] = `
 >
 #^ 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
+#^^^^ source.vue comment.block.vue punctuation.definition.comment.vue
+#    ^^^^^^ source.vue comment.block.vue
+#          ^^^ source.vue comment.block.vue punctuation.definition.comment.vue
 ><template lang="html">
-#^^^^^^^^^^^^^^^^^^^^^^^ source.vue text
+#^ 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></div>
-#^^^^^^^^^^^^^ source.vue text
-#             ^^^^^^^ source.vue text
+#^^^^^^^^^^^^^ source.vue text.html.derivative
+#             ^^^^^^^ source.vue text.html.derivative
 >	<div @click="{}"></div>
-#^^^^^^^^^^^^^^^^^^ source.vue text
-#                  ^^^^^^^ source.vue text
+#^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+#                  ^^^^^^^ source.vue text.html.derivative
 >	<div @click="log('hello'); log('world');"></div>
-#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text
-#                                           ^^^^^^^ source.vue text
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+#                                           ^^^^^^^ source.vue text.html.derivative
 >	<div #default></div>
-#^^^^^^^^^^^^^^^ source.vue text
-#               ^^^^^^^ source.vue text
+#^^^^^^^^^^^^^^^ source.vue text.html.derivative
+#               ^^^^^^^ source.vue text.html.derivative
 >	<div #default="args"></div>
-#^^^^^^^^^^^^^^^^^^^^^^ source.vue text
-#                      ^^^^^^^ source.vue text
+#^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+#                      ^^^^^^^ source.vue text.html.derivative
 >	<div #></div>
-#^^^^^^^^ source.vue text
-#        ^^^^^^^ source.vue text
+#^^^^^^^^ source.vue text.html.derivative
+#        ^^^^^^^ source.vue text.html.derivative
 >	<div #="args"></div>
-#^^^^^^^^^^^^^^^ source.vue text
-#               ^^^^^^^ source.vue text
+#^^^^^^^^^^^^^^^ source.vue text.html.derivative
+#               ^^^^^^^ source.vue text.html.derivative
 >	<div :key></div>
-#^^^^^^^^^^^ source.vue text
-#           ^^^^^^^ source.vue text
+#^^^^^^^^^^^ source.vue text.html.derivative
+#           ^^^^^^^ source.vue text.html.derivative
 >	<div :key="{}"></div>
-#^^^^^^^^^^^^^^^^ source.vue text
-#                ^^^^^^^ source.vue text
+#^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+#                ^^^^^^^ source.vue text.html.derivative
 >	<div v-if="true"></div>
-#^^^^^^^^^^^^^^^^^^ source.vue text
-#                  ^^^^^^^ source.vue text
+#^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+#                  ^^^^^^^ source.vue text.html.derivative
 >	<div v-else-if="true"></div>
-#^^^^^^^^^^^^^^^^^^^^^^^ source.vue text
-#                       ^^^^^^^ source.vue text
+#^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+#                       ^^^^^^^ source.vue text.html.derivative
 >	<div v-else></div>
-#^^^^^^^^^^^^^ source.vue text
-#             ^^^^^^^ source.vue text
+#^^^^^^^^^^^^^ source.vue text.html.derivative
+#             ^^^^^^^ source.vue text.html.derivative
 >	<div v-for="n in []"></div>
-#^^^^^^^^^^^^^^^^^^^^^^ source.vue text
-#                      ^^^^^^^ source.vue text
+#^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+#                      ^^^^^^^ source.vue text.html.derivative
 >	<div v-if="true" v-else-if="true" v-else></div>
-#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text
-#                                          ^^^^^^^ source.vue text
+#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+#                                          ^^^^^^^ source.vue text.html.derivative
 >	<div :foo="':foo=123'"></div>
-#^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text
-#                        ^^^^^^^ source.vue text
+#^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+#                        ^^^^^^^ source.vue text.html.derivative
 >	<div :foo="[{ bar: []}]"></div>
-#^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text
-#                          ^^^^^^^ source.vue text
+#^^^^^^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+#                          ^^^^^^^ source.vue text.html.derivative
 >	<div .prop="[1, 2]"></div>
-#^^^^^^^^^^^^^^^^^^^^^ source.vue text
-#                     ^^^^^^^ source.vue text
+#^^^^^^^^^^^^^^^^^^^^^ source.vue text.html.derivative
+#                     ^^^^^^^ source.vue text.html.derivative
 ></template>
-#^^^^^^^^^^^ source.vue
+#^^ 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 text"
+#^ source.vue"
 `;
 
 exports[`grammar > generic.vue 1`] = `