IntelliSense in JavaScript is broken when documenting a context for a function in argument (`this` replaced by `globalThis`)

Does this issue occur when all extensions are disabled?

Yes.

Platform

• Version: 1.66.0 (user setup)
• Commit: e18005f0f1b33c29e81d732535d8c0e47cafb0b5
• Date: 2022-03-30T05:50:14.623Z
• Electron: 17.2.0
• Chromium: 98.0.4758.109
• Node.js: 16.13.0
• V8: 9.8.177.11-electron.0
• OS: Windows_NT x64 10.0.19044

Steps to Reproduce

Step 1

Everything is ok in this step.

class Foo
{
	bar()
	{
		// Type `this` here: the suggestion tooltip will show `this` first, then `globalThis`.
	}
}

Step 2

Everything is ok in this step.

class Foo
{
	bar()
	{
		// Type `this` here: the suggestion tooltip will show `this` first, then `globalThis`.
	}

	baz(callback)
	{

	}
}

Step 3

The issue occurs in this step. The documentation part that exactly causes the problem is this: CallbackContext, so when we define a context for a function in argument.

class Foo
{
	bar()
	{
		// Type `this` here: the suggestion tooltip will only show `globalThis` first and never `this`.
	}

	/**
	 * @param {function(this: CallbackContext)} callback
	 */
	baz(callback)
	{

	}
}

Summary

A quick GIF to summarize the issue.

[sandersn]

I can't repro this in vs code 1.66.2 running Typescript 4.6.4 or the latest build from main [1]. I tried in a folder with only a single .js file, and in a folder with a tsconfig configured with checkJs and strict turned on.
I normally work in linux, so I also tried on 1.66.2/latest on a mac and got the same results.

Are you running any additional plugins? What version of Typescript are you running? (Check by clicking the {} in the bottom-right of the status bar.) Is there any other configuration you have that might be relevant?

[1] or emacs, but 🤷🏼

I can't repro this in vs code 1.66.2 running Typescript 4.6.4 or the latest build from main [1]. I tried in a folder with only a single .js file, and in a folder with a tsconfig configured with checkJs and strict turned on. I normally work in linux, so I also tried on 1.66.2/latest on a mac and got the same results.

Are you running any additional plugins? What version of Typescript are you running? (Check by clicking the {} in the bottom-right of the status bar.) Is there any other configuration you have that might be relevant?

[1] or emacs, but 🤷🏼

More info

• I don't use any additional plugins.
• I checked my TypeScript version: 4.6.3.

What I did

I was finally able to isolate the issue more precisely. I've disabled all the extensions with code --disable-extensions, and i've removed all the settings in the settings.json file. It seems that the issue appears because of this setting:

{
  "editor.suggest.showWords": false
}

Steps to reproduce

Step 1

• "editor.suggest.showWords": false setting : NO.
• @param {function(this: CallbackContext)} documentation : YES.

Result: this is suggested. There is no issue.

Step 2

• "editor.suggest.showWords": false setting : YES.
• @param {function(this: CallbackContext)} documentation : YES.

Result: this is NOT suggested. The issue occurs here!

Step 3

• "editor.suggest.showWords": false setting : YES.
• @param {function(this: CallbackContext)} documentation : NO.

Result: this is suggested. There is no issue.

Conclusion

I think, from the steps I described, that the issue comes from the "editor.suggest.showWords": false setting paired with a JavaScript documentation that contains the keyword this (here @param {function(this: CallbackContext)}). I hope that this time you will be able to reproduce this! Thanks for your help.

[sandersn]

Thanks, I got it to reproduce.

As far as I can tell, the problem is that the error in @param isn't reported, which causes completion to fail in some way I don't understand yet.

Here is a fourslash repro that gets rid of all the other errors except the one in @param:

/// <reference path="fourslash.ts" />
// @Filename: completionListClassThisJS.js
// @allowJs: true
/////** @typedef {number} CallbackContext */
////class Foo {
////    bar() {
////       thi/**/
////    }
////    /** @param {function (this: CallbackContext): any} */
////    baz(cb) {
////    }
////}

verify.completions({ marker: "", isNewIdentifierLocation: false, includes: [{
    name: "this",
    kind: "warning",
    sortText: completion.SortText.JavascriptIdentifiers
}] });

Turning on // @checkJs: true gives the correct completion for this:

    kind: "keyword",
    sortText: completion.SortText.GlobalsOrKeywords

[sandersn]

Completions has two quite different code paths for unchecked JS files and other files. I'll have to dig into the differences, but I suspect that's the cause of the missing this.