Whenever I start writing code like this and I put there quotation marks the autocomplete works fine:

However, when I close it and then manually trigger the autocomplete to show up again I end up with this:

The autocomplete list still contains the correct values but there’s like a hundred snippets before. Some of them are from this extension https://github.com/ults-io/vscode-react-javascript-snippets. Why is it behaving like this? Why am I getting 2 different results for the same autocomplete and how to fix it only to have the correct options (from image 1)?

>Solution :

This mechanism of suggestions appearing as you type is called "quick suggestions". The things that are appearing when you manually trigger suggestions that you don’t want are snippets.

I’m not sure why snippets appear in this context when triggering suggestions manually but not when opening the string argument to document.querySelector. There is the possibility of it being a bug. Ex. User Snippets not showing up in quickSuggestions #19244. If you choose to raise a bug report to the VS Code team (actually, I’d encourage you to do so- just to see if it’s by-design or not), please do comment here with a link to it so I can track it as well.

At the very least, you can work around the problem by making the snippet suggestions appear at the bottom of the suggestion list by putting "editor.snippetSuggestions": "bottom" or "editor.snippetSuggestions": "none" in your settings.json file.

You can also make it so that you have to trigger suggestions less in such a context by making quick suggestions also happen for strings, which you can do with the following in a settings.json file:

"[javascript]": {
    "editor.quickSuggestions": {
        "other": "on",
        "comments": "off",
        "strings": "on"
    },
}