How do I get imports to show up when I press ctrl+dot in javascript in vscode?

When writing JSX (or any typescript code really) if you have an available import that's not yet imported, you get a squiggly line under it and can press ctrl+dot on it and then automatically import the code as a "refactoring."

How can I set this up in Javascript? I've seen a screenshot of someone else's VSC where it is available underneath "more options" and so I'm pretty sure it's possible, but when I press ctrl+dot I get nothing.

Note: I'm aware I can press ctrl+space. However, I don't want to do this, for two reasons. (1) alt+space is pretty bad UX because if you press it in the middle of a word it continues to autocomplete even if you already had the full name there and so you are left with an incorrect tag (e.g. if your cursor was after the d in Keyboard for a component called KeyboardRow you are left with KeyboardRowRow) and (2) I want to rebind quick fix to alt+enter to match pycharm; and I want the same hotkey & UX in both Typescript and Javascript.

I haven't worked too much with JS, mainly with TS, but I have two extensions installed in my vscode that helped me a lot while coding in vanilla JS.

Path intellisense and Auto import

You can try if My Code Actions can be used to construct a Quick Fix for these types of PROBLEMS/squiggles

I figured out an answer. Imports are with ctrl+space in javascript. Also, in order to remove some pretty bizarre behavior when your cursor is in the middle of the word, you probably want to enable the following setting in your settings.json:

"editor.suggest.insertMode": "replace",

Relavent github issue related to the user preference