Я пытаюсь добавить этот стартовый шаблон 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>
1 ответ
Есть несколько моментов для обсуждения вашего подхода.
- Строки JSON не являются строковыми литералами, то есть вы не можете просто добавить к ним новую строку, вы должны использовать символ
\nтам, где это применимо; если вы хотите сохранить все в одной строке:
"body" : "<!doctype html>\n<html lang="en">\n<head> .... etc"
- Вы не можете использовать разделитель строк в своем фрагменте, не экранируя его, это не относится к фрагменту или даже к vscode, вот каковы большинство «языковых» правил:
"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$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 дает подробный обзор того, как создавать собственные сниппеты и ярлыки, а также расширенные сниппеты с использованием переменных; дополнительные инструкции см. здесь
En Español