我可以在 VS Code 的默认 HTML 文件中添加一些额外的行吗

问题描述

我可以在由 VS Code 自动创建的 HTML 文件中添加一些额外的功能吗？我的意思是，当我输入 html:5 + TAB 时，我想获得一个 HTML 文件，其中包含我通常使用的“样式”和“脚本”标签以及一些代码（例如重置边距和填充）。感谢所有试图提供帮助的人。

解决方法

快速解决方法：

打开 Visual Studio 代码
转到“文件”>“首选项”>“用户代码段”
从菜单中选择 HTML

将其内容替换为以下内容

{
    "html 5": {
        "prefix": [
            "html:5"
        ],"body": [
            "<!DOCTYPE html>","<html lang='en'>","<head>","\t<meta charset='UTF-8'>","\t<meta http-equiv='X-UA-Compatible' content='IE=edge'>","\t<meta name='viewport' content='width=device-width,initial-scale=1.0'>","\t<title>Document</title>","<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>","<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js' integrity='sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0' crossorigin='anonymous'></script>","</head>","<body>","","</body>","</html>"
        ],"description": "HTML5 code snippet with css and scripts "
    }
}

在这里，您将覆盖 vscode 的默认“html:5”代码片段。您可以编辑此“正文”内容以适合您的收藏夹。我只是让它使用 bootstrap CSS 和 Javascript 进行演示。现在您可以输入 html:5 并按 TAB 以获取您定义的代码段

html visual-studio-code vscode-settings