如何在VS Code中添加Bootstrap 5初始模板为代码片段？

别担心，我来一步步帮你搞定这个VS Code代码片段的问题。你之前踩的坑是把HTML的转义方式用在了JSON里，这俩的规则不一样，咱们换个正确的方式来做：

步骤1：打开VS Code的代码片段设置 #

• 按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）调出命令面板
• 输入snippets，选择Configure User Snippets选项
• 选html.json（这样只在HTML文件里触发）或者global.code-snippets（全局所有文件可用）

步骤2：粘贴正确的代码片段JSON #

把下面这段代码粘贴到打开的JSON文件里（如果文件里有示例内容，直接替换或者在现有对象后加逗号再插入）：

{
  "Bootstrap 5 Alpha Initial Template": {
    "prefix": "bs5-alpha",
    "body": [
      "<!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>"
    ],
    "description": "Bootstrap 5 Alpha starter template with CSS and JS CDN links"
  }
}

为啥这么做能成？ #

• 我把原HTML拆成了数组的每一行，避免了处理换行转义，JSON可读性更强
• JSON里的双引号需要用\"转义（你之前用的"是HTML的转义规则，不适用于JSON）
• prefix是触发片段的关键词，比如输入bs5-alpha按Tab就能生成模板
• description是片段的说明，方便你在VS Code的提示里快速找到它

验证一下 #

保存JSON文件后，打开一个HTML文件，输入bs5-alpha，VS Code会弹出这个代码片段的提示，按Tab就能自动生成完整的Bootstrap 5初始模板啦。

内容的提问来源于stack exchange，提问作者Chris Faux