search

vuejs / vue-syntax-highlight

💡 Sublime Text syntax highlighting for single-file Vue components
MIT License
1.49k stars 232 forks source link

Support explicit <script> type #152

Open bjhawk opened 6 years ago

bjhawk commented 6 years ago

Our existing code standards require the use of explicitly specifying the type attribute on markup tags. As such:

<script type="text/babel">

breaks syntax highlighting for single-file vue components. Removing the attribute:

<script>

fixes it again. Is this something that can be supported for this plugin? I've seen other similar issues with plugins on other IDEs/editors for vue component highlighting as well.

skyronic commented 6 years ago

I'm not sure I understand. Can you give me some more information for why you need the type (aside from the existing standards)?

Vue components aren't "strict" html even though they're modelled similarly, and some tags might not behave the same. We rely on the existing HTML extension to provide a large amount of functionality, and this might be one a quirk as a result of that.

Since this isn't a problem with the extension itself, I don't know if we can do this without causing unforseen side effects for other users. Our goal is to adhere only to the vue component spec. Your best bet might be to add the feature yourself and maintain a separate fork for your organisation since it's required for internal guidelines.

At this time, I'm afraid I will have to close the issue, but please feel free to provide any additional information and re-open if there's any incompatibility with the official vuejs documentation.

bjhawk commented 6 years ago

Digging through other issues here to back my case up, it appears #3 (albeit much older) is related, as well as a host of other VueJS Syntax Highlighting for ES6 issues in several other editors.

The problem is, for instance, in sublime if i have the type="text/babel" attribute on my script tag, my syntax highlighting simply doesn't work. I get a large block of white text. However, in PHPStorm, if i don't have that attribute present, ES6 syntax recognition stops, and the whole block becomes full of error reports.

I'm not sure where to go with this. Most other editors support the type attribute as the preferred way of telling them what syntax to understand, and the VueJS documentation seems to just assume it'll work or rely on out-of-the-box functionality on a given editor to do the work (See: Typescript support strongly specifying VSCode and the vetur plugin). Even the Vetur plugin itself has had similar issues logged and fixed for ES6 support

While i respect the desire not to open this codebase up to anything outside the scope of the vue component spec, it seems strange to me that a perfectly symantic attribute that would otherwise simply be ignored by Vue could break the functionality of this plugin outright for (potentially) many users. This seems kind of fragile. Regardless, I respect that it's the collabs/maintainers decision so i'll leave this closed.

skyronic commented 6 years ago

I can understand your concern. Lemme re-open this and take a look over the weekend if it would be an easy fix to ignore the type attr.

mikew1 commented 5 years ago

I'm getting broken syntax highlighting on vue component files which use script attribute of type="text/ecmascript-6". Whereas, type="text/ecmascript" does not break syntax highlighting.

I'm trying to establish whether to ask the author / do a pull request to remove the -6 suffix, but need advice on whether that's really needed(?), in which case this could be something potentially absent from the syntax highlighter itself. I've searched on this but not found an answer. Thanks for any info.