CODEWITHSUNDEEP
htmlvisual-studio-code
bob.dobbs
bob.dobbs

Reputation: 341

How do I create multi-line snippets with quotes, and get them to expand?

I'm setting up Code for html support.

None of the snippet libraries for html support seem to work for me for html snippets, so I'm trying to create my own.

HTML documents create quotes. User snippet definitions for Code require seperate lines to be quoted. I haven't been able to find documentation describing how to handle multiline snippets that contain quotes when defining my own own snippets.

Currently my own snippet is defined as follows, but this doesn't get expanded in the editor:

Console log": {
    "prefix": "html5",
    "body": [
        '<html lang="en">'
        '<head>'                                                                                             
     '<meta charset="UTF-8">' 
     '<meta name="viewport" content="width=device-width, initial-scale=1.0">'
     '<meta http-equiv="X-UA-Compatible" content="ie=edge">'
     '<title></title>'
    '</head>'
    '<body>'

    '</body>'
    '</html>'
],
    "description": "html5 document template"
}

How do I get a snippet definition like this to work?

Upvotes: 0

Views: 460

Answers (1)

hotpink
hotpink

Reputation: 3226

You need to escape the quotes with a \ (backslash). It would look like this:

"html5 document template": {
  "prefix": "html5",
  "body": [
    "<!DOCTYPE html>",
    "<html lang=\"en\">",
    "<head>",
    "  <meta charset=\"UTF-8\">",
    "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    "  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
    "  <title>${1:Document}</title>",
    "</head>",
    "<body>",
    "  ",
    "</body>",
    "</html>"
  ],
  "description": "html5 document template"
}

In any HTML document typing "html5" followed by ⇥ will expand this snippet.

However, you may not need this one, since Emmet, which is included in VS Code by default, has this one built-in. Type ! followed by ⇥ to expand it. There are many more extremely useful abbreviations, you may find this cheatsheet useful.

Upvotes: 1

Related Questions