首先配置html代码模板，在VS Code中创建html-template.json文件并定义html5快捷生成结构，保存后输入html5即可补全标准HTML文档。
如果您希望在使用HTML编辑器时快速创建新文件并提高编码效率，可以通过配置代码模板来实现标准化和自动化。以下是具体操作步骤：
本文运行环境：macBook Pro，macOS Sonoma
一、配置HTML代码模板
通过预设代码模板，可以快速生成标准的HTML文档结构，避免重复编写基础代码。
1、打开您的HTML编辑器（如VS Code），进入设置界面，通常可通过菜单栏选择“文件”→“首选项”→“用户代码片段”。
立即学习“前端免费学习笔记（深入）”；
2、选择“新建全局代码片段文件”，命名模板文件为 html-template.json。
3、在json文件中输入以下内容：
{“html5“: {“prefix”: “html5”, “body”: [“<!DOCTYPE html>”, “<html lang=”zh-CN”>”, ” <head>”, ” <meta charset=”UTF-8″>”, ” <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>”, ” <title>$1</title>”, ” </head>”, ” <body>”, ” $2″, ” </body>”, “</html>”]}}
4、保存文件后，在任意html文件中输入 html5 即可自动补全完整结构。
二、使用快捷命令创建新文件
利用编辑器内置的命令或插件，可一键生成带有模板内容的新HTML文件。
1、安装常用插件，例如 VS Code 中的 “auto Create File” 或 “File Templates”。
2、配置插件默认模板路径，将预先写好的 .html 模板文件放置于指定目录。
3、使用快捷键（如 Ctrl+P）调出命令面板，输入 Create File from Template 并选择HTML模板。
4、输入新文件名称，系统将自动生成包含标准结构的HTML文件。
三、设置文件关联与默认语言模式
确保新建的文件能正确识别为HTML类型，以便语法高亮和智能提示正常工作。
1、在编辑器设置中搜索“文件关联”选项。
2、添加规则：将扩展名为 .html 的文件关联到 HTML 语言模式。
3、当创建以 .html 结尾的文件时，编辑器会自动应用HTML语法解析和代码补全功能。
4、可在 settings.json 中添加：{“files.associations”: {“*.html”: “html”}} 以固化配置。