Vuetify: unrecognized tags in WebStorm

Created on 5 Aug 2017 · 6Comments · Source: vuetifyjs/vuetify

Steps to reproduce

create a template with <v-layout>, <v-flex>, <v-card>, <v-card-*> components

Versions

0.14.8

What is expected ?

v-layout and other tags should be recognized by WebStorm as known elements

What is actually happening ?

Get a warning "Unknown html tag"

Reproduction Link

screenshot: http://imgur.com/a/UOAZr

Fix

Just my guess - I didn't checked all but some of the tags that are not recognized don't have the "name" property. For example doesn't have it and it's not recognized but has and it's recognized

Edit: some components without "name" have "functional" property set to true, and those with "name" are not "functional", I'm not sure if adding "name" to "functional" components doesn't break anything

duplicate

Source

jacekkarczmarczyk

Most helpful comment

As per @jacekkarczmarczyk's comment, I found that if I added a name: entry to the functional components in the src directory of node_modules, Webstorm would then correctly detect the component. For example, in VCardTitle I added a name: 'v-card-title',.

To be fair on the Webstorm plugin, Vue is so flexible in what can be a component, it is pretty hard to detect what is a Vue component. Even working back from the Vue.component() calls in this case requires non-trivial data flow analysis/code simulation:

  Object.keys(Components).forEach(key => {
    Vue.component(key, Components[key])
  })

Note that webstorm does detect components declared with Vue.extends and Vue.component('literal-name', ...).

For reference, the part of the webstorm plugin that does the detection seems to be:
https://github.com/JetBrains/intellij-plugins/blob/9e149f9a12c6844a767aa674e7da44c2d07a4f54/vuejs/src/org/jetbrains/vuejs/codeInsight/VueFrameworkHandler.kt#L106

@ChavaSobreyra I created a Webstorm issue (https://youtrack.jetbrains.com/issue/WEB-28318), but I'm not convinced Webstorm can do a sensible job without some hints.

At the cost of adding a name property to the remaining components that don't already have one, the result would be pretty good support in Webstorm. The benefits aren't just tag detection, but also pretty good intellisense for component props/attributes (mixin props aren't detected yet though).

sdarnell on 16 Aug 2017

👍5

All 6 comments

Sound like an issue to take up with the WebStorm vue plugin team, no? Doesn't look like there's anything invalid on the vuetify side...

By the way, in Webstorm you can click on the unrecognized elements and hit alt + enter which will bring up a menu with an option add x to custom html tags

ChavaSobreyra on 5 Aug 2017

👍4

I specifically made an update recently to cover this. If it's not detecting the simple functional components, there is nothing I can do.

johnleider on 5 Aug 2017

  Object.keys(Components).forEach(key => {
    Vue.component(key, Components[key])
  })

Note that webstorm does detect components declared with Vue.extends and Vue.component('literal-name', ...).

@ChavaSobreyra I created a Webstorm issue (https://youtrack.jetbrains.com/issue/WEB-28318), but I'm not convinced Webstorm can do a sensible job without some hints.

sdarnell on 16 Aug 2017

👍5

Looks like the Webstorm team fixed this. Its fixed in 2017.3.2 scheduled to be released by the end of the year.