在 Visual Studio Code 中自定义 HTML 模板

7 阅读1分钟

在 Visual Studio Code (VSCode) 中自定义 HTML 模板可以通过使用代码片段方式实现:

使用代码片段(Snippets)

VSCode 支持为特定语言添加代码片段,以下是自定义 HTML 模板的步骤:

打开用户代码片段设置:

  • Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(macOS)。
  • 输入 Preferences: Configure User Snippets 并选择该选项。
  • 在弹出的列表中选择 html

编辑 HTML 代码片段文件:

  • 如果文件不存在,会自动创建。

  • 添加如下代码来定义一个自定义模板:

{
	"Custom HTML Template": {
    "prefix": "!h",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"zh-CN\">",
      "",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "  <title></title>",
      "</head>",
      "",
      "<body>",
      "  ",
      "</body>",
      "",
      "</html>"
    ],
    "description": "自定义 HTML 模版"
  }
}

使用模板:

  • 在 HTML 文件中,输入 !h 然后按 Tab 键即可插入模板。