想在 vscode 中预览 html 文件效果，关键在于选择合适的工具并掌握快捷方式。最推荐使用 live server 插件，它支持本地服务器启动和自动刷新功能；安装后通过右键菜单选择 “open with live server” 即可在浏览器中查看。其次可选用内置的 “view in browser” 功能，适合临时查看或小项目，操作为右键 html 文件并选择 “view in browser” 或使用快捷键 alt+b。此外还可通过 ctrl+shift+p 打开命令面板运行 live server、设置默认浏览器及修改端口号等，提升开发效率。
想看 HTML 文件写的效果？VSCode 本身不直接运行 HTML，但配合插件和内置功能可以非常方便地实时预览。关键在于怎么选工具、怎么用快捷方式。
安装一个好用的扩展：Live Server
最推荐的方式是使用 Live Server 这个插件。它能启动一个本地服务器，并且支持自动刷新，改完代码马上就能看到效果。
安装方法很简单：
立即学习“前端免费学习笔记（深入）”；
- 打开 VSCode 的扩展面板（左侧第五个图标或者按
Ctrl+Shift+X） - 搜索 “Live Server”
- 找到后点击安装
安装完成后，右键你的 HTML 文件，选择 “Open with Live Server”，就会在浏览器里打开当前页面了。
小贴士：如果你有多个 HTML 文件，建议把它们放在同一个文件夹下，这样通过 Live Server 可以更方便地跳转访问。
使用内置的“在浏览器中查看”功能
如果你不想装插件，也可以借助 VSCode 自带的功能快速打开浏览器预览。
操作步骤如下：
- 确保你已经安装了 VSCode 的官方插件：View In Browser 或者类似的轻量插件
- 右键 HTML 文件 → 选择 “View in Browser” 或者快捷键
Alt+B - 默认会用系统默认浏览器打开当前 HTML 页面
这个方法简单直接，适合不需要热更新的小项目或临时查看。
快捷键和设置优化体验
别总点鼠标，几个快捷键能让你效率翻倍：
-
Ctrl+Shift+P打开命令面板，输入 “Live Server: Open with Live Server” 回车 - 设置默认浏览器（比如你想用 Chrome 而不是 Edge）：在设置里搜索 “Live Server: Settings”，找到相关选项修改
- 修改默认端口：有些时候 5500 被占用了，你可以自定义端口号
这些小调整虽然看起来不起眼，但在日常开发中能省不少麻烦。
结尾
其实运行 HTML 文件这件事本身不复杂，但用对工具能让整个流程顺畅很多。Live Server 是个很实用的帮手，再配上几个快捷键，基本就够用了。
