How to add a Bootstrap boilerplate/starter template as a snippet in vs code?

I'm trying to add this Bootstrap 5 starter template as a snippet on vs code but with no success.

I've tried to escape all " characters using \ but still does not work. I'm not familiar with JSON files.

Do you know how to add this code as a snippet in vscode?

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

        <title>Document</title>
    </head>
    <body>

        
        
        <!-- Optional JavaScript -->
        <!-- Popper.js first, then Bootstrap JS -->
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
    </body>
</html>

Solution

There are a few talking points on your approach.

JSON strings are not string literals, meaning you can not simply add a new line to them, you have to use a \n character where applicable; if you wish to keep it all in one string:

"body" : "<!doctype html>\n<html lang="en">\n<head> .... etc"

You can not use a string delimiter in your snippet without escaping it, that's not snippet or even vscode specific, that's just how most 'language' rules are:

"body" : "<html lang="en">"
                     ^  ^

When you do this it effectively means you want the body to be: <html lang= because you ended the string and then restarted it after en

Although you can keep it in a single string value, a better approach, for readability at least, is to use an array of values:

"body": [
  "<!doctype html>",
  "<html lang=\"en\">",
  .. etc
]

Full snippet will look like the following:

"Bootstrap 5": {
  "description": "Bootstrap 5 starter template",
  "prefix": "bootstrap",
  "body": [
    "<!doctype html>",
    "<html lang=\"en\">",
    "\t<head>",
    "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
    "\n\t\t<!-- Bootstrap CSS -->",
    "\t\t<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com\" />",
    "\n\n\t\t<title>Document</title>",
    "\t</head>",
    "\t<body>",
    "\t\t$0",
    "\n\n\n\t\t<!-- Optional JavaScript -->",
    "\t\t<!-- Popper.js first, then Bootstrap JS -->",
    "\t\t<script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>",
    "\t\t<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>",
    "\t</body>",
    "</html>"
  ]
}

Syntax:

$0 means 'end here'

\t means 'add a tab here'

\n means 'add a new line here'

If you don't want to add new lines or new tabs you don't have to, if you have the setting to 'format on save' set to true it will correct itself, but it does look better to include them.

Resources

vscode has a thorough overview of how to create custom snippets and shorcuts and advanced snippets using variables; please review for further guidance here