如何在WebStorm中实现代码的水平和垂直同步滚动？

水平同步滚动默认不生效，因WebStorm未提供UI开关，仅在Split模式下且两编辑器为同一文件时自动触发；若启用Soft-wrap或Tab size不同则静默失效。

水平同步滚动为什么默认不生效？

很多开发者都遇到过这个情况：在WebStorm里把代码窗口左右并排，垂直滚动是联动的，但一拖动水平滚动条，另一边却纹丝不动。这其实不是故障，而是IDE的默认设计。

WebStorm默认只开启了垂直滚动的同步选项（在Editor → General → Synchronize vertical scroll里能找到开关），而水平滚动同步压根没有提供图形化设置入口。它只在特定条件下，由IDE在后台自动判断并激活。简单来说，必须同时满足几个前提：

• 两个编辑器标签页打开的是完全相同的文件（仅仅是内容相同但路径不同的副本，不算数）。
• 必须处于Split（分屏）模式。
• 内部有一个editor.config.horizontalScrollSyncEnabled的标志位，只有上述条件都符合时，它才会被悄悄设为true。

更隐蔽的“杀手”是格式设置：如果其中一个编辑器启用了Soft-wrap（软换行），或者两边的Tab size（制表符宽度）不一致，水平同步功能就会静默失效，而且不会有任何提示。

垂直同步滚动突然失效的三个常见原因

即便你确认勾选了同步设置，垂直滚动有时也会“掉链子”。这通常不是Bug，而是WebStorm对编辑器状态的“可同步性”有一套严格的内部判断逻辑。

• 专注模式干扰：只要任意一个编辑器进入了Distraction Free Mode（无干扰模式）或Focus Mode（专注模式），同步就会被自动禁用。
• 预览标签页不参与：如果一侧是从项目视图单击文件产生的Preview Tab（预览标签），它被视为临时视图，不会与常规编辑器窗口同步滚动。
• 标签页状态不一致：使用了Pin Tab（固定标签页）而另一侧是未固定的临时标签，IDE会认为两者的生命周期不同，从而拒绝同步。

有个快速的验证方法：在任意一个编辑器标签上右键，查看菜单中是否显示Synchronize Scrolling选项且已被勾选。如果这个选项根本不出现，那就说明当前的编辑器组合不满足同步的前提条件。

如何强制启用双编辑器水平+垂直同步

如果依赖自动触发不靠谱，我们可以用快捷键手动接管控制权。这个方法适用于已经处于Split状态的、打开同一文件的两个编辑器。

• 首先，将光标聚焦在左侧（或任意一侧）的编辑器。
• 按下快捷键 Ctrl+Alt+Shift+Up（Windows/Linux）或 Cmd+Option+Shift+Up（macOS）。这时会启用垂直同步。
• 再按一次同样的快捷键，就会切换到水平同步模式。成功激活后，状态栏右下角通常会显示一个HSync的提示。

这里有个关键限制需要注意：WebStorm不允许水平和垂直同步同时激活，两者是互斥的。你只能选择其中一种。这不是配置遗漏，而是IDE的明确设计。另外，在HSync模式下，滚动条位置会被强制对齐，但两个编辑器中的光标（插入点）并不会联动移动。如果需要光标也同步，那就得求助于MultiCursor这类插件了，那完全是另一种功能范畴。

用代码对比场景下如何避免同步干扰

同步滚动在对比两个不同文件时反而会帮倒忙。想象一下，你在并排比较before.js和after.js的差异，拖动左边查看时右边也跟着动，阅读动线就全乱了。这时候，你需要主动关闭同步。

• 最直接的方法：在任一编辑器标签上右键，取消勾选Synchronize Scrolling菜单项。
• 如果想一劳永逸（针对所有窗口），可以进入Settings → Editor → General，取消勾选Synchronize vertical scroll。至于水平同步，反正没有全局开关，无需额外操作。
• 对于临时性的对比需求，直接用前面提到的Ctrl+Alt+Shift+Up快捷键切换状态更高效，不必来回修改设置。

最后提一个容易踩的坑：WebStorm的同步状态不会随着窗口关闭而保存。这意味着，每次新建一个分屏视图，你都需要重新按快捷键或右键菜单来设置同步，IDE并没有提供一个“始终同步”的全局选项。了解这一点，下次遇到同步失效时，你就知道该从哪里下手了。