如何在Visual Studio Code中实现Live Server分屏显示？

核心思路 #

你需要的是VS Code编辑器与浏览器窗口的分屏布局，而非VS Code内部的代码拆分，以下是具体操作步骤：

步骤1：确认Live Server正常运行 #

• 检查VS Code底部状态栏的「Go Live」按钮已激活，浏览器已打开Live Server对应的本地页面（通常是http://127.0.0.1:5500/这类地址）

步骤2：系统级窗口分屏（最直接方案） #

• Windows系统：
  • 点击VS Code窗口，按住Win + 左箭头，编辑器会自动吸附到屏幕左侧
  • 点击浏览器窗口，按住Win + 右箭头，浏览器会自动吸附到屏幕右侧
• Mac系统：
  • 点击VS Code窗口，按住Ctrl + Cmd + F进入全屏，鼠标移到屏幕顶部，点击窗口左上角绿色按钮，选择「将窗口平铺到左侧」
  • 对浏览器窗口执行相同操作，选择「将窗口平铺到右侧」

步骤3：VS Code内置浏览器预览（可选） #

若不想单独打开浏览器窗口，可使用内置预览功能：

• 安装「Browser Preview」扩展
• 打开HTML文件后，按Ctrl+Shift+P（Windows）/Cmd+Shift+P（Mac）打开命令面板，输入「Browser Preview: Open Preview」，即可在VS Code右侧打开内置浏览器，实现代码与预览同屏

步骤4：排查实时同步失效问题 #

如果分屏后代码修改无法同步到浏览器，检查以下设置：

• 打开VS Code设置（Ctrl+,/Cmd+,），搜索「Live Server: Settings」
• 确认「Live Server: Auto Refresh」已勾选
• 确认「Live Server: Browser」设置为你当前使用的浏览器（比如chrome）

内容的提问来源于stack exchange，提问作者Your-neigbourhood -developer