Intellisense Global Identifier suggestion prevents Emmet suggestions from appearing/working properly

[webdevpchoi]

• VSCode Version: 1.30.1
• OS Version: Windows_NT x64 10.0.17134

User Setting:

Steps to Reproduce:

1. Open .js file with language mode set as Javascript React.
2. Create a React Component (in this case, Inventory.js).
   
3. Within the return statement, try to use emmet abbreviation to create a <div className="inventory"></div>
   
4. I do not get an emmet suggestion; instead, VS code suggests a series of Global Identifier suggestion. I don't want this suggestion. I want the emmet suggestion.
   
5. Hitting enter will choose the Global Identifier suggestion, and not expand Emmet.
   

Other methods I've tried:

1. Typing in .inventory, which again, suggests the filename, so Emmet doesn't expand.
   
2. Tried typing outside of return statement using .inventory, and that seemed to show the emmet suggsestion, instead of filename:
   

Would love to know how to fix this!

Update: I don't have a solution, but I can recreate this solution in any .js file by first creating an opening and closing parenthesis, and then typing in a . after, like so: (.). This drops down a list of (no clue what this list is from...how can I turn off these suggestions, and where are they coming from?).

Possible solution:

It looks like setting "javascript.suggest.names": false completely removes the dropdown list when using a period in a parenthesis, and allows me to also put in custom emmet abbreviations now within a return statement in a React component.

Is there a better way than doing this?

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

[ramya-rao-a]

Thanks for reporting @webdevpchoi

Is there a better way than doing this?

For now, after step 4 (in your initial set of steps), when you see the Global identifier in the suggestion list, press escape to get rid of the suggestions, and keep typing. You will see the suggestions again and this time it will include emmet suggestions.

Why is this happening?

When user types div. there are no emmet suggestions (which is expected), but there are suggestions from the javascript extension (which can be disabled using the javascript.suggest.names setting). #32423 tracks exactly the same issue but with the php instead of javascript.

The main root cause is #13735 which has been marked as out of scope.

@octref To fix this particular case, we can update the vscode-emmet-helper to return <div class=""></div> for the abbreviation div.

[octref]

@ramya-rao-a I think we need to trigger completion on . and return <div class=""></div>. Emmet users usually ignore the div.
When in . we missed the chance, users who continue to type .foo won't get emmet completions.

[ramya-rao-a]

I think we need to trigger completion on .

Emmet completion provider is definitely triggered at this point.

and return "<div class="">."

Yes, thats what I mentioned in the previous comment....

[octref]

@ramya-rao-a Nope, I meant on typing .inventory's first ., not the last dot on div..

At this point, Emmet did not participate on first dot and loses chances to update completion list.

Although it does have completions, if you re-trigger it with Ctrl+Space.

But I don't know what's a reliable way to tell if the . is triggered on JSX but not the JS part.

[octref]

Here's how it works now. I fixed the general issue of completion list disappear when typing the dot in span.foo too (it'll reappear after t, but I didn't like the disappear-appear).