如何增大VS Code中「按文件名搜索」搜索栏的尺寸？

方法1：通过内置设置调整（无需插件） #

• 打开设置界面（快捷键Ctrl+,或Cmd+,），搜索并修改以下设置：
  • 调整快速打开面板宽度：找到workbench.commandPalette.maxWidth，设置更大的数值（比如80%或900px），直接扩大文件名搜索（Ctrl+P/Cmd+P）的面板宽度。
  • 强制显示完整文件路径：将files.simpleDialog.enable设为false，同时把workbench.list.enableCompactPaths设为false，这样搜索结果会显示完整文件路径，而非省略后的短路径。

方法2：自定义CSS（满足精细尺寸需求） #

如果内置设置不够用，可通过自定义CSS调整，注意VS Code默认禁用自定义样式，需先开启相关配置：

1. 打开settings.json（快捷键Ctrl+Shift+P输入Preferences: Open User Settings (JSON)），添加以下配置：

   "vscode_custom_css.imports": [
       "file:///你的绝对路径/custom.css"
   ],
   "vscode_custom_css.policy": true
   

2. 创建custom.css文件，写入以下代码调整搜索栏和结果列表：

   /* 增大快速打开面板宽度 */
   .quick-input-widget {
       width: 90% !important;
       max-width: 1200px !important;
   }
   /* 避免结果列表项宽度不足导致路径截断 */
   .quick-input-list-item {
       min-width: 100% !important;
   }
   /* 强制显示完整路径，不省略中间目录 */
   .monaco-list-row .label-name {
       text-overflow: unset !important;
       overflow: visible !important;
   }
   

3. 安装并启用Custom CSS and JS Loader插件，按Ctrl+Shift+P执行Reload Custom CSS and JS，重启VS Code生效。

若之前用插件未生效，大概率是settings.json里的配置路径错误，或未开启vscode_custom_css.policy，检查路径是否为绝对路径、文件权限是否正常即可。

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