使用 `!+Tab` 快捷键创建自定义 HTML 快捷模板

2023-10-29 00:17:06

自定义 HTML 快捷模板：提升您的编码效率

引言

在编写 HTML 代码时，重复输入相同的代码片段会浪费大量时间。借助 Visual Studio Code 的自定义 HTML 快捷模板，您可以通过一个快捷键快速生成常用的代码片段，从而极大地提高编码效率。本文将指导您创建和使用自己的 HTML 快捷模板，并提供一些示例供您参考。

创建自定义 HTML 快捷模板

打开 Visual Studio Code。
按 Ctrl+K + Ctrl+S 打开“设置”面板。
在“搜索设置”框中，输入“Emmet”。
单击“Emmet: 用户片段”设置。
在“用户片段”文本框中，输入以下代码：

{
  "html": {
    "snippets": {
      "my-html-snippet": {
        "prefix": "my-html",
        "body": "<div>This is my HTML snippet.</div>"
      }
    }
  }
}

将 my-html-snippet 替换为您自己的片段名称。
将 This is my HTML snippet. 替换为您的自定义 HTML 代码。
单击“保存”按钮。

示例

以下是一些自定义 HTML 快捷模板的示例：

页眉：

{
  "html": {
    "snippets": {
      "header": {
        "prefix": "header",
        "body": "
          <header>
            <h1>My Website</h1>
            <nav>
              <a href="/">Home</a>
              <a href="/about">About</a>
              <a href="/contact">Contact</a>
            </nav>
          </header>
        "
      }
    }
  }
}

页脚：

{
  "html": {
    "snippets": {
      "footer": {
        "prefix": "footer",
        "body": "
          <footer>
            <p>Copyright &copy; 2023 My Website</p>
          </footer>
        "
      }
    }
  }
}

导航栏：

{
  "html": {
    "snippets": {
      "navbar": {
        "prefix": "navbar",
        "body": "
          <nav>
            <ul>
              <li><a href="/">Home</a></li>
              <li><a href="/about">About</a></li>
              <li><a href="/contact">Contact</a></li>
            </ul>
          </nav>
        "
      }
    }
  }
}