fix(syntax): highlight Vue setup scripts and component templates #4250
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,60 +5,55 @@ detect: | |
|
|
||
| rules: | ||
| - default: | ||
| start: "<script.* lang=(ts|'ts'|\"ts\").*>$" | ||
| end: "</script>" | ||
| rules: | ||
| - include: "typescript" | ||
|
|
||
| - default: | ||
| start: "<script.*>$" | ||
| end: "</script>" | ||
|
Collaborator
There was a problem hiding this comment. Not sure why you got rid of this? Now the script tag is not highlighted.
Author
There was a problem hiding this comment. With 
Collaborator
There was a problem hiding this comment. That is a bug. I've opened an issue for it: #4252 |
||
| rules: | ||
| - include: "javascript" | ||
|
|
||
| - default: | ||
| start: "<style[^>]*>" | ||
| end: "</style>" | ||
| rules: | ||
| - include: "css" | ||
|
|
||
| - comment.block: | ||
| start: "<!--" | ||
| end: "-->" | ||
| rules: | ||
| - todo: "(TODO|FIXME|NOTE):?" | ||
|
|
||
| - default: | ||
| start: "{{" | ||
| end: "}}" | ||
| rules: | ||
| - include: "javascript" | ||
|
|
||
| # Match any html or vue component closing tag | ||
| - symbol.tag: "</[A-Za-z][A-Za-z0-9_.:-]*[ \\t]*>" | ||
|
|
||
| # A region allows attributes on later lines and arbitrary component names. | ||
| - symbol.tag: | ||
| start: "<[A-Za-z][A-Za-z0-9_.:-]*" | ||
| end: "/?>" | ||
| # Skip quoted attribute values so `>` inside them does not end the tag region. | ||
| skip: >- | ||
| "[^"]*"|'[^']*' | ||
|
Comment on lines
+45
to
+46
Collaborator
There was a problem hiding this comment. Can't say I'm a fan of this yaml trickery, it took me a moment to understand wtf is going on but I guess the |
||
| rules: | ||
| # non-vue attributes | ||
| - identifier: "[A-Za-z_][A-Za-z0-9_.:@#\\[\\]-]*" | ||
| # built-in vue directives, including v-on:click.stop.prevent, v-slot:header, etc | ||
| - special: '(^|[ \t])v-(else-if|text|html|show|if|else|for|on|bind|model|slot|pre|once|memo|cloak)(:[A-Za-z_][A-Za-z0-9_-]*)?(\.[A-Za-z_][A-Za-z0-9_-]*)*\b' | ||
| # vue directives with shorthand like @click.once, :class, etc | ||
| - special: '(^|[ \t])[@:#][A-Za-z_][A-Za-z0-9_-]*(\.[A-Za-z_][A-Za-z0-9_-]*)*\b' | ||
| - symbol: "=" | ||
| # attributes string content | ||
| - constant.string: '"([^"\\]|\\.)*"' | ||
| - constant.string: "'([^'\\\\]|\\\\.)*'" | ||
|
Comment on lines
+56
to
+57
Collaborator
There was a problem hiding this comment. Does Vue actually support using backslashes to escape things inside string attributes? I know html does not so that would be surprising to me. |
||
|
|
||
| - special: "&([A-Za-z][A-Za-z0-9]*|#[0-9]+|#[xX][0-9a-fA-F]+);" | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.*is greedy so if you have eg.<script>console.log("hello")</script>this will match the whole line instead of just the start tag. I think the$should also not be there?[^>]*would work better (it would still fail if you have something like<script src="src/>.js">but that's hopefully rare!).There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The
.*>$is meant to work with anything like this:<script setup generic="T extends Record<string, unknown>">. Note the extra>from the generic. Matching the last>on the line means we don't need to worry about anything that goes inside the script tag, even>.<script>console.log("hello")</script>should be very uncommon. Thescripttag in vue is always supposed to be on a single line. It's technically valid VueJS to write<script>console.log("hello")</script>but I have never seen this in the wild. Actually the default vue linter rules gives meA line break is required before '</script>'. eslint[vue/block-tag-newline](https://eslint.vuejs.org/rules/block-tag-newline.html)if I try.I initially had a much more complex regex that would cover both cases but it seemed like this very simple one would actually cover almost all cases and remain simple.
Here is the original one Astra came up with which I imagine is a lot more robust but completely unreadable:
start: "<script\\s+(?:(?:[^>\"']|\"[^\"]*\"|'[^']*')*\\s)?lang\\s*=\\s*(?:\"ts\"|'ts'|ts\\b)(?:[^>\"']|\"[^\"]*\"|'[^']*')*>"When asked to simplify I got this
start: "<script(?:[ \t].*)?[ \t]lang[ \t]*=[ \t]*['\"]ts['\"].*>[ \t]*$".The one I landed on is my idea to avoid these wild regex and still work in all VueJS cases I've seen.