在Linux系统中使用VS Code开发HTML页面时，实现一键运行并实时预览可以大幅提升开发效率，不需要手动刷新浏览器就能看到代码修改后的效果。下面介绍具体的实现方法。
安装必要插件
首先需要安装Live_Server插件，这是实现HTML实时预览的核心工具。打开VS Code后，点击左侧边栏的扩展图标，在搜索框输入Live Server，找到对应插件后点击安装即可。
一键运行HTML文件
安装完成插件后，打开需要预览的HTML文件，有两种方式可以一键启动预览：
- 右键点击编辑器内的HTML文件内容区域，选择Open with Live Server选项
- 使用快捷键
Alt+L然后按Alt+O快速启动服务
启动后会自动打开默认浏览器，展示当前HTML页面的预览效果，服务默认运行在5500端口，地址格式为http://127.0.0.1:5500/你的文件名.html。
实现实时预览效果
Live Server插件默认开启了实时监听功能，当你修改HTML、CSS或者JavaScript文件并保存后，浏览器会自动刷新展示最新内容，不需要手动操作。如果需要关闭自动刷新，可以修改插件配置：
{
"liveServer.settings.port": 5500, // 服务端口，可自定义
"liveServer.settings.autoRefresh": false // 设置为false关闭自动刷新
}
常见问题解决
端口被占用无法启动
如果5500端口已经被其他程序占用，可以在上述配置中修改liveServer.settings.port的值，更换为其他未被占用的端口即可。
修改后没有自动刷新
首先检查是否保存了文件，VS Code默认开启自动保存，但如果手动关闭了该功能，需要按Ctrl+S保存后才会触发刷新。另外确认插件配置中autoRefresh是否为true。
Linux下浏览器没有自动打开
可以在VS Code设置中搜索liveServer.settings.CustomBrowser，设置为你常用的浏览器名称，比如firefox或者chromium，之后启动服务就会自动调用指定浏览器。
简单示例验证
可以创建一个简单的HTML文件测试功能是否正常：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试页面</title>
<style>
.content {
color: #333;
font-size: 16px;
}
</style>
</head>
<body>
<div class="content">
这是测试内容，修改这段文字保存后浏览器会自动刷新
</div>
<script>
// 修改这里的代码保存后也会触发自动刷新
console.log("页面加载完成");
</script>
</body>
</html>
保存上述文件后按照之前的方法启动Live Server，修改页面中的文字或者样式，保存后就能看到浏览器自动更新内容，说明配置成功。