在VSCode中创建HTML文件需新建空白文件并命名为.html结尾，保存后自动启用语法高亮；2. 输入!或html:5后按Tab键可快速生成HTML5模板；3. 推荐安装Live Server、Auto Rename Tag和IntelliSense等扩展提升开发效率；4. 通过设置开启保存时格式化、选择格式化工具、调整缩进和启用自动换行优化编码体验。
在 VSCode 中创建和配置 HTML 文件非常简单，只需几个步骤即可快速开始编写网页代码。下面介绍详细的操作方法和实用配置建议。
创建 HTML 文件
打开 VSCode 后，按照以下步骤操作：
- 点击左侧资源管理器中的“新建文件”按钮，或使用快捷键 Ctrl + N（Windows）/ Cmd + N（Mac）新建一个空白文件。
- 将文件命名为 index.html 或其他以 .html 结尾的名称，例如 page.html。
- 保存文件（Ctrl + S），选择合适的项目文件夹路径。
- VSCode 会自动识别 .html 扩展名，并启用 HTML 语法高亮和智能提示。
快速生成 HTML 模板
手动编写标准 HTML 结构较繁琐，可使用 Emmet 快速生成基础模板：
- 在空白的 .html 文件中输入 ! 或 html:5。
- 按下 Tab 键或 Enter，VSCode 会自动生成完整的 HTML5 文档结构。
- 生成的内容包括 <!DOCTYPE html>、<html>、<head>、<body> 等基本标签。
安装实用扩展提升效率
通过扩展增强 HTML 开发体验：
立即学习“前端免费学习笔记（深入）”；
- Live Server：右键点击 HTML 文件，选择“Open with Live Server”，可在浏览器中实时预览页面，修改后自动刷新。
- Auto Rename Tag：修改开始或结束标签时，另一端会同步更新，避免出错。
- IntelliSense for CSS class names：在 HTML 中输入 class 时，自动提示已定义的 CSS 类名。
基本设置优化编码体验
进入 VSCode 设置（文件 > 首选项 > 设置），可进行如下配置：
- 启用 Format on Save，保存时自动格式化 HTML 代码。
- 设置默认格式化工具为 Prettier 或内置的 HTML 格式化器。
- 调整缩进为 2 或 4 个空格，保持代码整洁。
- 开启 Word Wrap，避免代码过长影响阅读。
基本上就这些。完成以上步骤后，你就可以在 VSCode 中高效地编写和调试 HTML 文件了。配置一次，后续项目都能受益，不复杂但容易忽略细节。
