Auto-complete working for in JSX react but suggestions not showing


Using webstorm (see full details below).

So auto-complete with JSX react kind of work, but the suggestions are not popping up within JSX context. For example - I have `fori` as a shortcut for a javascript for loop.

function App() {
return (
// typing fo here brings up the suggestion menu, as expected, including fori for the js for-each loop
// typing the same here DOES NOT bring up the suggestion menu at all

See comments above - basically within the return statement, but outside any html tag (e.g. in a JS context), I get the suggestions. I DO NOT get them within the JSX context. HOWEVER, if I write out full "fori" in BOTH cases and hit tab, it WILL auto-complete and give me the expected fully-formed for-loop. The only different, to be 100% clear, is that I DO NOT have the suggestions within JSX. Which is most annoying. Again to be 100% clear:

Here's the context for the live template:

I've also added a few other for-loop with JSX HTML as context, just to make sure it's not something dumb like a single-suggestion not prompting the drop-down. But still no success.

So - what prevents the suggestions from appearing in the JSX context and what settings do I need to change where to make that happen? React app created by the IDE itsel from new project --> React.


WebStorm 2022.3.1
Build #WS-223.8214.51, built on December 20, 2022
Subscription is active until XXXXXXXXX, 2023.
Runtime version: 17.0.5+1-b653.23 amd64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
Linux 5.15.85-1-manjaro
GC: G1 Young Generation, G1 Old Generation
Memory: 2048M
Cores: 12
Non-Bundled Plugins: (1.2.5)
    Dummy Text Generator (1.2.0)
    CMD Support (1.0.5)
    com.lukasbach.intellij.snippets.typescriptreact (1.0.5)
    DBN (3.3.5889.0)
    com.nekofar.milad.intellij.nestjs (1.2.2)
    com.intellij.react.css.modules (1.0.1)
    com.rxliuli.vite-jetbrains-plugin (0.2.2)

Current Desktop: XFCE

1 comment

In JSX context, within the tag content, the HTML language is injected. But there are 2 limitations as compared to pure HTML here (even in JSX context):
- a closing tag is not auto-added when choosing tag from completion, the IDE expects that you will start entering attributes and thus only closes the tag on entering / or >
- abbreviations completion doesn't appear unless you enter the hit Ctrl+Space (this was the case for HTML as well until 2021.3)

If you feel that this has to be changed to work in the same way as in HTML, please feel free to file feature requests to youtrack,


Please sign in to leave a comment.