search

postalservice14 / vuejs-plugin

[DEPRECATED] Vue.js features for the Intellij Platform (WebStorm, RubyMine, Intellij, etc)
139 stars 20 forks source link

Syntax support for `.vue` files #1

Closed Morgul closed 8 years ago

Morgul commented 8 years ago

This a feature request. Right now, webstorm is pretty stupid about it's support for .vue files; first, you need to tell it that they're html files, and then you need to do several hacks to get ES6 support in the <script> tag. You can't even get less or scss support working for the <style> tag at all.

This plugin could help alleviate that by registering .vue as a filetype it can highlight, and then correctly highlighting the various portions of the file. (I know nothing of WebStorm plugin development, just that I've seen things like this done before.)

mindplay-dk commented 8 years ago

+1 this was the main thing I was hoping to get from this plugin. (I also have no Java skills to speak of, so I can't help out either, sorry.)

mindplay-dk commented 8 years ago

For now, check this out - you can configure custom language injections in IDEA, so for .vue files, it should be possible to define what language injection is indicated by e.g. <style lang="sass"> etc.

mindplay-dk commented 8 years ago

Hmm, okay, I tried setting this up, and it doesn't really work, because .vue files aren't valid XML - they have multiple root tags, so everything highlights in red.

I was able to configure the language injections though - using an xpath query like e.g. //style[@lang='sass'] works nicely, and you'd need to set this up only once for the languages you use in your components.

It's too bad, since (by the looks of it) we could have had proper IDE support for .vue files right now.

Vue would need to support a valid XML format - does it do that already? I couldn't find anything in the documentation that says so.

Ideally, it would need to support XML documents with a valid DTD, with the <template>, <style> and <script> tags (and attributes) formally defined as child-nodes of an e.g. <vue> root-element.

Probably we'd need an alternative file-extension, maybe .vue.xml, to distinguish the valid XML version of Vue files from the lightweight, non-valid format currently supported.

Thoughts?

Should I open a feature request?

Or is valid XML possibly already supported but just undocumented?

Morgul commented 8 years ago

@mindplay-dk I'd say open a feature request against vueify.

mindplay-dk commented 8 years ago

Opened against vue-loader since that's the recommended tool.

mindplay-dk commented 8 years ago

So much for that idea.

Well, what this tells us, is that .vue files weren't intended to be treated like XML in the first place, they're actually more like HTML5 files.

Sadly, that means language injections can't be configured in IDEA - user-defined language injections are only available for XML files. Maybe this is something the plug-in needs to do?

Currently, with the plug-in installed and .vue files configured as HTML file-type, v- attributes are still highlighed with an inspection saying e.g. "attribute v-show is not allowed here", so I'm not sure I understand what this plug-in was supposed to do.

Does it work?

Do I need to configure something else to get it to work?

If so, maybe a short README could be added to the project describing how to configure it?

postalservice14 commented 8 years ago

@mindplay-dk this plugin is still a work-in-progress. You can see some of the work I'm doing on the develop branch. The code on the develop branch does have the v- attributes working, but I'm still working on getting basic functionality with the .vue files working.

postalservice14 commented 8 years ago

I just wanted to get something out there that I was working on, hoping there were others wishing to help. This is my first IntelliJ plugin, so it's very much a learn as I go thing. Help is much appreciated.

mindplay-dk commented 8 years ago

Yeah, I'm not much help when it comes to Java, sorry.

Hey, is that Kotlin? Cool, that's the first time I've seen it in the wild :-)

postalservice14 commented 8 years ago

@mindplay-dk yeah, that's Kotlin. Wanted to play around with it. :-)

On another note, I've included basic support for *.vue files. More to come. If you have more ideas around this, feel free to open another issue. Thanks guys.