vscode-language-babel | VSCode syntax highlighting for today 's JavaScript

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.

I found the answer here. Copy pasting the linked answer below.

On Windows:

1. Select the lines.

2. Alt-Shift-I (will add multiple cursors)

3. Shift-Home (will go at the beginning of each line and be selected)

On Mac :

1. Select the lines.

2. alt-shift-I (will add multiple cursors)

3. cmd-shift-← (will go at the beginning of each line and be selected)

Try to reinstall vscode. And select 'no and never' button when you change name file it will show the pop up look like this "Automatically update imports for moved file"

https://github.com/Microsoft/vscode/issues/53832