CODEWITHSUNDEEP
visual-studio-codecode-snippets
Guy
Guy

Reputation: 13306

Snippets within JSX tags in VSCode

How do I enable snippet completion within JSX tags to add tag attributes:

<View style={styles.styleName}>

I am trying to make this snippet work but it only seems to work outside the tags:

  "style": {
    "scope": "javascript,typescript,jsx,html", 
    "prefix": "rs",
    "body": ["style={ styles.${1} }"],
    "description": "RN style"
  },

Upvotes: 2

Views: 791

Answers (2)

Jon
Jon

Reputation: 2004

VSCode added in "javascriptreact" for jsx files. (no need to install anything from the market place)

for example, if you want to write a fetch shortcut 

{
"fetch": {
        "scope": "javascriptreact,javascript",
        "prefix": "fetch",
        "body": [
            "fetch('$1', {",
            "\tmethod: '$2',",
            "\tcredentials: 'same-origin',",
            "\theaders: new Headers({",
            "\t\t'X-CSRF-Token': this.state.form_token,"
            "\t\t'Content-Type': 'application/json',",
            "\t\t'Accept': 'application/json'",
            "\t}),",
            "\tbody: JSON.stringify(body)",
            "\t}).then(res => res.json()).then(",
            "\t(result) => {$3},",
            "\t(error) => {$4}",
            ");"
        ]
    }
}

After adding this to your code-snippets file the short cut is ready for use.

fetch example

Addressing the original question. Snippets work in in a jsx tag

enter image description here

Upvotes: 2

MeltingPoint
MeltingPoint

Reputation: 82

(Untested) If you're not opposed to using keyboard shortcuts to insert snippets - assign keybindings may work.

Upvotes: 2

Related Questions