如何在 vs 代码中添加 Bootstrap boilerplate/starter 模板作为代码片段？

Question

我正在尝试将此 Bootstrap 5 入门模板添加为 vs 代码的片段，但没有成功。

我尝试使用 \ 转义所有 " 字符，但仍然无效。我不熟悉 JSON 个文件。

您知道如何将此代码作为片段添加到 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>

Answer 1

您的方法有几个要点。

JSON 字符串不是字符串文字，这意味着您不能简单地向它们添加新行，您必须在适用的地方使用 \n 字符；如果你想把它全部放在一个字符串中：

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

您不能在不转义的情况下在代码段中使用字符串定界符，这不是代码段甚至 vscode 特定的，这就是大多数 'language' 规则的方式：

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

当你这样做时，它实际上意味着你希望正文是：<html lang= 因为你结束了字符串然后在 en

之后重新启动它

虽然您可以将它保存在单个字符串值中，但至少为了可读性，更好的方法是使用值数组：

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

完整代码段如下所示：

"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[=13=]",
    "\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>"
  ]
}

语法：

[=17=] 表示 'end here'

\t表示'add a tab here'

\n 表示 'add a new line here'

如果您不想添加新行或新选项卡，则不必添加，如果您将 'format on save' 设置为 true，它会自行更正，但看起来确实更好包括他们。

资源

vscode 全面概述了如何使用变量创建自定义代码段和快捷方式以及高级代码段；请查看以获取进一步指导 here

如何在 vs 代码中添加 Bootstrap boilerplate/starter 模板作为代码片段？

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

visual-studio-code

code-snippets

语法：

资源