vue: Improve syntax highlighting (#11482)

close #8989

Before:

<img width="690" alt="image"
src="https://github.com/zed-industries/zed/assets/45585937/02b6f703-d54a-4e08-82f8-4ed624f37a64">

After:

<img width="571" alt="image"
src="https://github.com/zed-industries/zed/assets/45585937/9abd39d0-c4e8-426e-b0d8-62e26090332a">


Release Notes:

- Improve vue highlighting

extensions/vue/languages/vue/highlights.scm

@@ -7,8 +7,8 @@
 ((tag_name) @type
  (#match? @type "^[A-Z]"))
 
-((directive_name) @keyword
- (#match? @keyword "^v-"))
+(directive_name) @keyword
+(directive_argument) @constant
 
 (start_tag) @tag
 (end_tag) @tag

extensions/vue/languages/vue/injections.scm

@@ -1,7 +1,60 @@
-(script_element
-  (raw_text) @content
+; <script>
+((script_element
+    (start_tag) @_no_lang
+    (raw_text) @content)
+  (#not-match? @_no_lang "lang=")
   (#set! "language" "javascript"))
 
+; <script lang="js">
+((script_element
+  (start_tag
+    (attribute
+      (attribute_name) @_lang
+      (quoted_attribute_value
+        (attribute_value) @_js)))
+  (raw_text) @content)
+  (#eq? @_lang "lang")
+  (#eq? @_js "js")
+  (#set! "language" "javascript"))
+
+; <script lang="ts">
+((script_element
+  (start_tag
+    (attribute
+      (attribute_name) @_lang
+      (quoted_attribute_value
+        (attribute_value) @_ts)))
+  (raw_text) @content)
+  (#eq? @_lang "lang")
+  (#eq? @_ts "ts")
+  (#set! "language" "typescript"))
+
+; <script lang="tsx">
+; <script lang="jsx">
+; Zed built-in tsx, we mark it as tsx ^:)
+(script_element
+  (start_tag
+    (attribute
+      (attribute_name) @_attr
+      (quoted_attribute_value
+        (attribute_value) @language)))
+  (#eq? @_attr "lang")
+  (#any-of? @language "tsx" "jsx")
+  (raw_text) @content)
+
+
+; {{ }}
+((interpolation
+  (raw_text) @content)
+  (#set! "language" "typescript"))
+
+; v-
+(directive_attribute
+  (quoted_attribute_value
+    (attribute_value) @content
+    (#set! "language" "typescript")))
+
+; TODO: support less/sass/scss
 (style_element
   (raw_text) @content
   (#set! "language" "css"))