如何设置VS Code的Find Widget不悬浮遮挡编辑区文件内容？

问题确认 #

• 运行环境：VS Code 1.68.0 稳定版
• 已核实editor.find.addExtraSpaceOnTop配置项为默认开启状态，相关异常属于版本原生Bug，非个人配置错误导致
• 具体异常表现：
  • Find Widget（查找控件）默认悬浮在文件编辑区上方，打开时不会自动下移编辑区内容，会直接遮挡控件下方的搜索匹配结果，无法直接查看被遮挡的匹配项
  • 控件自带的内容避让逻辑需要手动触发一次编辑区滚动（鼠标滚轮滚动）才会生效，打开控件的初始状态无避让效果
  • 成功触发避让后，按下PgUp键翻页时避让逻辑会直接失效，控件会再次遮挡顶部文本
  • 每次使用完查找控件需要手动关闭，无自动收起逻辑
• 预期效果：查找/替换输入框采用类似顶部工具栏的内嵌呈现样式，打开时自动向下推开编辑区文本，无需额外操作即可查看文件顶部的所有搜索匹配结果

可用解决方案 #

方案1：升级版本彻底修复 #

该Bug为1.68版本的已知问题，1.69及后续官方稳定版本已经完成两处针对性修复：

• 打开Find Widget时立即触发顶部内容避让，无需手动滚动触发
• 修复PgUp键翻页时避让逻辑失效的问题
  直接升级到1.69及以上稳定版即可解决所有异常，不需要修改额外配置。

方案2：1.68版本临时规避 #

如果暂时无法升级版本，可以通过以下操作临时规避问题：

• 打开查找控件后，手动滚动一次鼠标滚轮/按一次下方向键，触发顶部避让逻辑，编辑区内容会自动下移避开控件遮挡
• 翻页到文件顶部区域时，避免使用PgUp键，改用鼠标滚轮或方向键逐行/小范围滚动，防止避让逻辑失效

方案3：自定义样式实现固定工具栏效果 #

如果需要永久实现类似工具栏的内嵌展示效果，可以配合Custom CSS and JS Loader扩展注入自定义样式，将悬浮的查找控件改为编辑区顶部固定内嵌定位，核心样式代码如下：

/* 将查找控件从悬浮定位改为编辑区顶部内嵌定位 */
.monaco-editor .find-widget {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--vscode-editorWidget-border) !important;
}
/* 调整编辑器滚动装饰条位置，适配控件高度 */
.monaco-editor .scroll-decoration {
  top: 34px !important;
}

注入样式后重启VS Code即可生效，此时查找控件会固定在编辑区顶部，打开时会自动推开下方编辑内容，完全不会出现遮挡问题。
注意：使用自定义CSS注入的方式会修改VS Code原生程序文件，软件更新后自定义样式会失效，需要重新执行注入操作；首次修改后VS Code会提示“安装似乎损坏”，选择不再提示即可正常使用。

内容的提问来源于stack exchange，提问作者gertvdijk