Configure JSX User Snippets in VS Code

Question

Is there a way to create my own JSX user snippets in VS Code? I tried configuring the javascriptreact.json file, but inside the return statement of a React component it does not work. It does work using the javascript.json file, but I don't want to see those snippets while using plain Javascript. I also don't want to use global or project snippets. Here is an example of a JSX-Snippet:

"Create contact list": {
    "prefix": "cl",
    "body": [
        "<div>",
        "\t<ListContacts",
        "\t\tcontacts={this.state.contacts}",
        "\t\tonDeleteContact={this.removeContact}",
        "\t/>",
        "</div>"
    ],
    "description": "Creates JSX code for contact component",
}

Using the "Inspect Editor Tokens ans Scopes" from the command palette, the language seems to be jsx-tags, but I can't find a json file for it.

Answer 1

Since your snippet - located in javascriptreact.json - works fine for me in a jsx file I suspect that you are trying to insert it within backticks.

If that is the case you will need to modify the editor.quickSuggestions setting to include strings otherwise vscode will not surface your snippet inside the backticks. So try:

"editor.quickSuggestions": {
  "other": true,
  "comments": false,
  "strings": true
},