Linux用VS Code怎么一键运行HTML实时预览？

使用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。

一览运营宝

一览“运营宝”是一款搭载AIGC的视频创作赋能及变现工具，由深耕视频行业18年的一览科技研发推出。

41

查看详情

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实时预览？的详细内容，更多请关注php中文网其它相关文章！