如何修改VS Code中[!+Tab/ctrl+space]触发的基础HTML结构

问题描述 #

当前通过 !+Tab 或 Ctrl+Space 触发的基础HTML结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

期望修改为：

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <title>Document</title>

</head>
<body>
    
</body>
</html>

解决方案 #

方法1：通过Emmet配置覆盖默认模板 #

1. 打开VS Code设置（快捷键 Ctrl+,），搜索 Emmet: Config
2. 点击「编辑 in settings.json」，添加以下配置：

"emmet.snippets": {
  "html": {
    "snippets": {
      "!": "<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>\n    <title>Document</title>\n</head>\n<body>\n    \n</body>\n</html>"
    }
  }
}

3. 保存设置后重启VS Code，输入 ! 按Tab即可生效。

方法2：创建自定义代码片段（优先级更高） #

1. 按 Ctrl+Shift+P 打开命令面板，输入「Configure User Snippets」并选择 html.json
2. 在打开的文件中添加以下内容：

{
  "Custom HTML Boilerplate": {
    "prefix": "!",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"fr\">",
      "<head>",
      "    <meta charset=\"UTF-8\">",
      "    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>",
      "    <title>Document</title>",
      "</head>",
      "<body>",
      "    ",
      "</body>",
      "</html>"
    ],
    "description": "Custom HTML boilerplate with French lang and CSS link"
  }
}

3. 保存文件后，输入 ! 按Tab就能生成目标模板。

内容的提问来源于stack exchange，提问作者Dwimland