VueJS function properties referencing the data object breaks semantic highlighting

[jonasnordlund]

• VSCode Version: 1.43.1
• OS Version: Windows_NT x64 10.0.18363

Steps to Reproduce:

1. In the VueJS function created, or any of your own within methods, use this code:

created: function() {
    this.name = getUserName();
    // code...
}

2. The property name created will be highlighted as a class and conversion from a constructor function to a class will be suggested.

Workaround is to instead use this code:

created: function() {
    var self = this; 
    self.name = getUserName();
}

This issue frequently arises within VueJS models since you are meant to access the state (the data object) via this besides in special cases like when the scope has changed and you have to use a variable self as above. For example, it just happened to one of my event handlers too.

Does this issue occur when all extensions are disabled?: Yes

[aeschli]

Can you paste the whole file?

[jonasnordlund]

Here's a (complete and standalone) sample that has the problem:

var app = new Vue({
    el: '#app',
    data: {
        id: 0,
    },

    created: function() {
        this.id = 42;
    }
});

I have a feeling it's because an assignment to this is expected to happen inside a constructor function? It's just unfortunate that I have this be pretty commonplace in VueJS code where you interact with the data object so often in that way.

[aeschli]

Reproduced with

const x = {
  xy: function () {
    this.id = 42;
  }
}

The appearance of a this makes typescript think this is a class.

[aeschli]

I created aeschli/typescript-vscode-sh-plugin#15.