怎么用VSCode编HTML_VSCodeHTML开发基础与实时预览设置教程-VSCode-PHP中文网

怎么用VSCode编HTML_VSCodeHTML开发基础与实时预览设置教程

蓮花仙者

发布： 2025-08-25 13:13:01

原创

753人浏览过

答案是配置Emmet、安装Live Server等插件并优化设置可大幅提升VSCode中HTML开发效率。具体包括：使用Emmet缩写快速生成HTML结构，如输入!后按Tab键生成完整HTML5模板；安装Live Server实现保存后浏览器自动刷新的实时预览；开启“保存时格式化”功能保持代码整洁；通过Auto Rename Tag等插件增强编辑体验；利用Chrome DevTools或VSCode调试JavaScript；排查插件冲突或配置错误解决代码显示问题；结合自定义代码片段、快捷键和持续练习进一步提升效率。

怎么用vscode编html_vscodehtml开发基础与实时预览设置教程

VSCode 编写 HTML 简单来说就是：新建文件，写代码，保存，预览。但要效率更高，体验更好，还得配置一些东西。

新建 HTML 文件，输入代码，保存为

.html

登录后复制

文件，然后用浏览器打开，这就是最基础的流程。但这远远不够，我们需要更高效、更便捷的方式。

快速创建 HTML 模板

每次新建 HTML 文件都要手动输入

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

登录后复制

这样的结构，简直是浪费生命。VSCode 有一个非常棒的功能：Emmet。

Emmet 允许你用简短的缩写来生成 HTML 代码片段。比如，输入

登录后复制

然后按 Tab 键，就能自动生成一个完整的 HTML5 模板：

立即学习“前端免费学习笔记（深入）”；

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

</body>
</html>

登录后复制

还有其他很多有用的 Emmet 缩写，比如：

div.container

登录后复制

生成

<div class="container"></div>

登录后复制

```
ul>li*3
```
登录后复制
生成一个包含 3 个
```
li
```
登录后复制
的
```
ul
```
登录后复制
列表

多用 Emmet，能省下大量时间。记住这些缩写可能需要一点时间，但绝对值得。

实时预览：告别频繁刷新

写 HTML 的时候，改一点东西就要保存，然后切换到浏览器刷新，非常麻烦。VSCode 有很多插件可以实现实时预览功能。我个人比较推荐的是 "Live Server"。

安装 "Live Server" 插件后，在 HTML 文件中右键，选择 "Open with Live Server"，它就会自动启动一个本地服务器，并在浏览器中打开你的 HTML 文件。之后，你每次保存文件，浏览器都会自动刷新，实时显示你的修改。

这个插件简直是神器，谁用谁知道。当然，还有其他的实时预览插件，可以根据自己的喜好选择。

如何设置 VSCode 以更好地支持 HTML 开发？

除了安装插件，还可以通过一些设置来优化 VSCode 的 HTML 开发体验。

自动格式化代码： VSCode 可以自动格式化 HTML 代码，让代码更易读。可以在设置中搜索 "format on save"，勾选 "Editor: Format On Save" 选项。这样，每次保存文件时，VSCode 都会自动格式化代码。当然，你也可以手动格式化代码，快捷键是
```
Shift + Alt + F
```
登录后复制
(Windows) 或
```
Shift + Option + F
```
登录后复制
(Mac)。
代码提示和自动补全： VSCode 默认就提供了很好的 HTML 代码提示和自动补全功能。但如果觉得不够用，可以安装一些代码提示插件，比如 "HTML CSS Support"。

知海图Chat
知乎与面壁智能合作推出的智能对话助手

157

查看详情
自定义 Emmet 缩写： 如果觉得 Emmet 提供的缩写不够用，可以自定义 Emmet 缩写。具体方法是在 VSCode 的设置中搜索 "emmet.preferences"，然后修改 "emmet.preferences" 的值。

VSCode 中有哪些常用的 HTML 开发插件？

除了上面提到的 "Live Server" 和 "HTML CSS Support"，还有一些其他常用的 HTML 开发插件：

Beautify： 用于格式化 HTML、CSS 和 JavaScript 代码，让代码更易读。
Bracket Pair Colorizer： 用不同的颜色标记配对的括号，方便查看代码结构。
Auto Rename Tag： 自动重命名 HTML 标签，当你修改开始标签时，它会自动修改对应的结束标签。

这些插件可以根据自己的需求安装。

如何调试 HTML 代码？

HTML 本身不需要调试，但 JavaScript 代码需要调试。VSCode 提供了强大的 JavaScript 调试功能。

使用 Chrome DevTools： 在 Chrome 浏览器中打开你的 HTML 文件，然后打开 Chrome DevTools (快捷键是
```
F12
```
登录后复制
)。你可以在 DevTools 中查看 HTML 结构、CSS 样式、JavaScript 代码，并进行调试。
使用 VSCode 的调试功能： VSCode 也可以直接调试 JavaScript 代码。你需要配置一个 launch.json 文件，告诉 VSCode 如何启动调试器。具体方法可以参考 VSCode 的官方文档。

调试 JavaScript 代码是一个比较复杂的话题，需要单独学习。