subtle-brackets | Underlined matching brackets for VSCode | Theme library

Answering my own question as finally reached to the solution from VS Codes very helpful and great team (https://github.com/microsoft/vscode/issues/88936)

And this is how got closer to the source of the problem - got this strange behaviour, in a React Component.js file when I type the snippet ('clmi' in this case) - before the React Component File's return() statement, I get the expected behaviour. But if I type the snippet ('clmi') inside the return() statement, I dont get anything. i.e. the snippet does not give me the code completion option inside the return () statment.

The source was that VSCode was not recognizing this file to be a "javascriptreact" language type.

Solution was as below

In a React Component's .js file, try the tokens inspector via "F1 > Inspect TM Scopes" and position the cursor at those insert position. That will tell you the detected, embedded language. Depending on your grammar it might be a different language

And bleow is what I am getting.

So as you can see, this not JavaScript nor JavaScript React but the jsx-attr language. So now I had to target that type with vscode snippet

So now, I put the whole snippet in the jsx-attr type target file ~/.config/Code/User/snippets/jsx-attr.json

And now the custom snippets worked as expected.