attribute lang="ts" breaks IntelliSense

[lmk123]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: macOS
• Vetur version: 0.11.3
• VS Code version: 1.18.1

Vanilla VSCode, with only Vetur enabled.

Problem

It's exactly the same as #111, but it's in the lastest VS Code and Vetur.

Reproducible Case

Open Counter.vue in Veturpack.

If no lang is added, completion works:

However, lang="ts" breaks this.

[HerringtonDarkholme]

https://vuejs.org/v2/guide/typescript.html#Basic-Usage

To let TypeScript properly infer types inside Vue component options, you need to define components with Vue.component or Vue.extend

[HerringtonDarkholme]

For the curious:

We used to wrap TypeScript component export in Vue.extend call in order to get semantic completion. However, it turned to be problematic for other tools like ts-loader where no (enough) special operation is done for Vue SFC. For example, accessing properties on this will trigger errors in ts-loader if noImplicitThis is set, but Vetur requires that flag to provide completion.

So we remove auto wrapping in TS and users have to provide wrapping themselves.

[mitchell-garcia]

@HerringtonDarkholme Is the issue with intellisense missing in Vue.extend resolvable? If not, how do we wrap the component ourselves? Is it recommended we migrate to class-style components to get type-safety in .vue files? Thanks!

[HerringtonDarkholme]

@mmitchellgarcia You can always wrap component option in Vue.extend manually. noImplicitThis will type check your option object.