git clone https://github.com/vuejs/vue-hackernews-2.0 && cd vue-hack* && yarn && webstorm .
shift-shift "Item" should show https://i.imgur.com/AV1bbXG.png
And `this.$store.` should show the proper completions:
It's possible that I've been getting along without the features that some other editor provides. Does VSCode have better Vue integration?
Here is Webstorm complaining about in a legit Vue v-for statement in a .vue single-page component.
And second image is what it does when I try to use PostCSS variables.
Vue's tooling is context aware. It knows when you're within a <style scoped> tag. I see that there's a PostCSS plugin: https://i.imgur.com/JTPlIEk.png
Theoretically, the tooling should be able to use that plugin's lexer rules. PostCSS already registers itself as a language (pcss) so Vue's tooling logic should be: "are we within a <style scoped> tag? search for PostCSS tooling; if if none found, use vanilla CSS."
It already does this for <style lang="scss">, so postcss should definitely work. The logic happens in https://github.com/JetBrains/intellij-plugins/tree/master/vu... if you want to explore it.
But it's flawed. PostCSS is itself a host for plugins. So a WebStorm PostCSS plugin would need to allow user to select the PostCSS plugins that they are using.
Case in point: I use postcss-simple-vars but the WebStorm plugin assumes I use postcss-custom-properties. And so it fails me.
Yeah for a repro you just just need to do this: https://imgur.com/a/N2S2r
And you can see the warning when you hover over choices in the second image.
I'll try repro'ing it.
I think we should open a ticket in the appropriate place though. There's a good chance that a plugin maintainer can look into this and fix it quickly. It's such a clear example of brokenness, and should be pretty easy to fix.
I'm not quite sure where to raise the issue though. And I'm falling asleep, so that's all for now.
https://youtrack.jetbrains.com/issues/WEB?q=vue
So I figure it'll get fixed some day... probably after I move to another framework.
But I can not praise its abilities as you do. My experience has been mixed. Sure it's cool when it works well, but then its bugs are all the more painful. You expect intelligence and you get the opposite.
Take this bug I reported two years ago: https://youtrack.jetbrains.com/issue/WEB-19183
It thinks "y" is a global if I put "x.y = ..." anywhere in my code. Genius!
Also, It's lacking in its support for Vue Js. I get lots of red squiggles all over my code for perfectly valid Vue props, and PostCSS within single-page Vue component also is weak (no $variables support).