Я пытаюсь добавить этот стартовый шаблон Bootstrap 5 в качестве фрагмента кода vs, но безуспешно.

example

Я пытался экранировать все символы с помощью \, но все равно не работает. Я не знаком с файлами 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>
0
Chris Faux 19 Июл 2020 в 12:10

1 ответ

Лучший ответ

Есть несколько моментов для обсуждения вашего подхода.

  1. Строки JSON не являются строковыми литералами, то есть вы не можете просто добавить к ним новую строку, вы должны использовать символ \n там, где это применимо; если вы хотите сохранить все в одной строке:
"body" : "<!doctype html>\n<html lang="en">\n<head> .... etc"
  1. Вы не можете использовать разделитель строк в своем фрагменте, не экранируя его, это не относится к фрагменту или даже к vscode, вот каковы большинство «языковых» правил:
"body" : "<html lang="en">"
                     ^  ^

Когда вы это делаете, это фактически означает, что вы хотите, чтобы тело было: <html lang=, потому что вы закончили строку, а затем перезапустили ее после en

  1. Хотя вы можете сохранить его в виде одного строкового значения, лучший подход, по крайней мере для удобства чтения, - использовать массив значений:
"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$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>"
  ]
}

Синтаксис:

$0 означает "конец здесь"

\t означает "добавить сюда вкладку"

\n означает "добавить здесь новую строку"

Если вы не хотите добавлять новые строки или новые вкладки, в этом нет необходимости, если для параметра «форматировать при сохранении» установлено значение true, он исправится сам, но, похоже, лучше их включить.

Ресурсы

Vscode дает подробный обзор того, как создавать собственные сниппеты и ярлыки, а также расширенные сниппеты с использованием переменных; дополнительные инструкции см. здесь

0
soulshined 19 Июл 2020 в 17:02