VSCode user snippet doesn't works inside jsx

Question

I have a some snippet:

"JSON stringify": {
        "prefix": "jst",
        "body": [
            "<pre>{JSON.stringify($1, null, 2)}</pre>"
        ]
    },

and it works inside js scope, but when I'm trying to do same trick inside jsx render - it dont want to be working.

How to tell my VSCode, that I want to do same things inside jsx?

Leomaleon

Answer 1

Putting that snippet into your global snippets file should work.

Gear Icon/User Snippets/ myGlobalSnippets.code-snippets

Wargo

Answer 2

Maybe adding "scope" to your snippet:

"scope": "javascript,typescript,javascriptreact,typescriptreact",

javascriptreact ---> jsx files

It should be like this...

"JSON stringify": {
  "scope": "javascript,typescript,javascriptreact",
  "prefix": "jst",
  "body": [
    "<pre>{JSON.stringify($1, null, 2)}</pre>"
  ]
},

Note: The snippet should be a New Global Snippet file.

scope breakdown:

• javascript => .js
• typescript => .ts
• javascriptreact => .jsx
• typescriptreact => .tsx

Stonehenge

...and typescriptreact for .tsx files. – Jurkoic

this is the real solution by changing scope values worked as expected – Annihilation

read moẻ Snippets in Visual Studio Code – Dowry

List of all filetype IDs at: code.visualstudio.com/docs/languages/identifiers – Disrespect

Answer 3

In vscode Press the gear button then choose User Snippets then type javascriptreact if you are using "javascript" or typescriptreact for"typescript" then past the snippet code that you want :D

Telemechanics

Answer 4

I had to put "scope": "javascript,jsx,jsx-attr". Perhaps there's a neater way but that did it for me.

Osmious

Answer 5

It looks like inside jsx, the type of proposed snippets is not "javascript" but "jsx":

When you go to File / Preferences / User snippets you can look for the jsx format (file name jsx.json)

If you put your snippet in that file, it should be available inside your jsx

Trainee

Answer 6

just remove scope key from object, it worked for me

"JSON stringify": {
  "scope": "javascript,typescript,javascriptreact",
  "prefix": "jst",
  "body": [
    "<pre>{JSON.stringify($1, null, 2)}</pre>"
  ]
}

to

"JSON stringify": {
  "prefix": "jst",
  "body": [
    "<pre>{JSON.stringify($1, null, 2)}</pre>"
  ]
}

Sfumato