使用VS Code可通过Live Server插件实现HTML实时预览，安装后右键选择Open with Live Server即可；也可配置tasks.json任务或使用Code Runner插件，结合start命令调用默认浏览器预览页面。
如果您在编写HTML文件时希望实时查看页面效果，可以通过VS Code结合特定插件或设置实现一键运行和实时预览功能。以下是几种常用的方法：
一、使用Live Server插件
Live Server插件可以启动一个本地开发服务器，并支持实时刷新功能，保存文件后浏览器会自动更新内容。
1、打开VS Code，点击左侧活动栏的扩展图标（或按下Ctrl+Shift+X）进入扩展市场。
2、搜索Live Server并安装由Ritwick Dey提供的官方版本。
立即学习“前端免费学习笔记（深入）”；
3、安装完成后，右键点击已打开的HTML文件，在上下文菜单中选择Open with Live Server。
4、默认浏览器将自动打开并显示当前页面，此后每次修改并保存HTML文件，页面都会自动刷新。
二、配置任务运行默认浏览器
通过自定义任务命令，可以直接调用系统默认浏览器打开HTML文件，适用于无需本地服务器的静态页面预览。
1、在VS Code中打开您的HTML项目文件夹。
2、按下Ctrl+Shift+P打开命令面板，输入并选择Tasks: Configure Task。
3、选择Create tasks.json file from template，然后选择Others。
4、在生成的tasks.json中将内容替换为以下配置：
{ “label”: “open in browser”, “type”: “shell”, “command”: “start”, “args”: [“${fileBasename}”], “options”: { “cwd”: “${fileDirname}” }, “presentation”: { “echo”: true, “reveal”: “always” } }
5、保存文件后，按下Ctrl+Shift+P并运行Run Task，选择open in browser即可在浏览器中打开当前HTML文件。
三、使用Code Runner插件快速执行
Code Runner支持多种语言的一键运行，配合简单配置也能用于HTML文件的浏览器预览。
1、在扩展市场中搜索并安装Code Runner插件。
2、安装完成后，进入设置界面（Ctrl+,），搜索code-runner.executorMap。
3、点击“Edit in settings.json”，在配置文件中添加或修改如下行：
“html”: “start $fileName”
4、打开任意HTML文件，点击右上角的“运行”按钮或右键选择Run Code，即可用默认浏览器打开预览。
以上就是Linux用VS Code怎么一键运行HTML实时预览？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1595432.html
微信扫一扫 
支付宝扫一扫 
