I want to add a few custom React.js code snippets in VSCode. I realize there are two files in VSCode for this. javascript.json and javascriptreact.json. javascript.json works just fine but when I move the snippets to javascriptreact.json, VSCode doesn't recognize them.

It'll be great if I could isolate these snippets in javacriptreact.json file because I also write server side JavaScript.

I'm guessing that VSCode doesn't recognize the app as a React app. Is there anyway to fix this?

I want to add a few custom React.js code snippets in VSCode. I realize there are two files in VSCode for this. javascript.json and javascriptreact.json. javascript.json works just fine but when I move the snippets to javascriptreact.json, VSCode doesn't recognize them.

It'll be great if I could isolate these snippets in javacriptreact.json file because I also write server side JavaScript.

I'm guessing that VSCode doesn't recognize the app as a React app. Is there anyway to fix this?

• javascript
• json
• reactjs
• visual-studio-code
• code-snippets

3 Answers 3

save file with.jsx extension instead of .js. i.e. code snippets you are seeing in javascript.json is because you are editing a .js file

I very recently was getting this issue in Ubuntu 18.04, after including the below code for my "react-classnames" snippet in vscode file (which was not giving me the expected result when I type inside a React file in vscode)

~/.config/Code/User/snippets/javascriptreact.json

  "react-classnames": {
    "prefix": "clmi",
    "body": [
      "className={classes.}"
    ],
    "description": "react-classname"
  },

So, in a React ponent .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 pletion 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.

When I added the react snippet to jsx.json file the configuration worked. It did not work when added to js.json.

This worked: ~/.config/Code/User/snippets/jsx.json

This did not work: ~/.config/Code/User/snippets/js.json