Vetur: Vetur 0.19 seems heavily broken - applying TypeScript checks to a non-TS project

[ffxsam]

• [X] I have searched through existing issues
• [X] I have read through docs
• [X] I have read FAQ

Info

• Platform: macOS
• Vetur version: 0.19.0
• VS Code version: 1.33.1

Problem

Reproducible Case

Closed source project, cannot share. Can't replicate in a fresh project.

[octref]

How is displayCredentialPicker bound to this instance?

If it's not props/data/methods it won't work as of yet.

[kinesias]

Can confirm. 0.19 is completely broken.

[ffxsam]

How is displayCredentialPicker bound to this instance?

If it's not props/data/methods it won't work as of yet.

It's a computed property.

[octref]

@ffxsam Can you try to create a minimal repro?

[ffxsam]

I tried, couldn't reproduce it. And now that I've been working on this Vue component more, the issue has strangely disappeared. Very odd.

[octref]

OK next time try to copy your Vue file into another file, and remove as much code as possible for minimal repros. They would be more helpful for me to diagnose the issue. Thanks!

Your issue might be fixed because you upgraded to 0.19.1 which has a few fixes.

[ffxsam]

@octref Got it. It's the usage of a template string that causes the issue:

<template>
  <div>
    <MyComponent :desc="`Some text ${hi}`" />
  </div>
</template>

<script>
export default {
  computed: {
    hi() {
      return "hi";
    }
  }
};
</script>

<style>
</style>

[ffxsam]

Another broken case below. It's underlining :msg="whatever". It's not smart enough to know that I'm manually creating it in created().

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld :msg="whatever"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  created() {
    this.whatever = 'hey';
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

[kinesias]

Shouldn’t „whatever“ be declared in the data object first?

[ffxsam]

@kinesias no, not necessarily. It's perfectly valid to set properties that are not reactive.

[octref]

<MyComponent :desc="Some text ${hi}" />

That's definitely a valid bug. You can try the command "Vetur: Show corresponding virtual file and sourcemap" and it shows this snippet:

__vlsRenderHelper(__Component, function () {
    "\n  ";
    __vlsComponentHelper("div", { props: {}, on: {}, directives: [] }, ["\n    ", __vlsComponentHelper("mycomponent", { props: { "desc": template>
  <this.hiv> }, on: {}, directives: [] }, []), "\n  "]);
    "\n           \n\n        \n                \n             \n          \n                  \n     \n   \n  \n         \n";
});

For the second case, as @kinesias said, you didn't declare whatever in your data object.