VS Code - 使 Intellisense“阅读更多”（建议详细信息）框更大或其文本更小

Question

更新：在核心中修复！

VS Code 在2020 年 10 月的 VS Code 更新中修复了这个问题，并提供了可调整大小的建议！您现在可以使用“详细信息”窗口右下角的调整大小工具来调整框的大小，并且该大小应跨会话保存：

所以这个问题现在与固定行为有关，不再需要所有复杂性！为了历史起见，我保留下面的文本，但是如果您只想控制弹出智能感知框的大小，请按照上面的 gif 所示操作！

原始问题

VS Code 通过 Intellisense 系统支持代码完成/建议，该系统由各种语言的各种扩展实现。它可以很好地为您提供作为简单列表的选择（.tree在 HTML 中调用），但是在许多情况下，向您显示有关每个选择的更多详细信息的系统会受到一些非常糟糕的设计/可用性的影响。

这些“建议详细信息”可以通过单击“树”列表中建议右侧的“阅读更多”按钮，或通过在查看建议时再次调用键盘快捷键完成（在 macOS 上为 CMD+空格）来显示列表。内容将取决于您的扩展，但往往是建议对象、方法等的文档和参数的摘要。

关键问题，正如我所看到的（以及其他人多年来在 VS Code Github 上抱怨的）是盒子总是非常小，甚至不尝试填充可用的水平或垂直空间，导致剪切关闭包含多行且需要滚动浏览的信息，这非常分散注意力且无益。

此外，无法配置此框的字体大小，它始终使用默认的编辑器字体大小，这意味着小框内的信息更加过载。

注意：就我而言，我通过 Intelephense 扩展使用 PHP，但我认为字体和框大小问题更为普遍，适用于实现此“阅读更多”/描述框的任何语言/扩展。

VS Code“建议详细信息”示例

注意细节框是如何被完全切断的。无论编辑器的大小如何，都会发生这种情况，它永远不会比这更大！

相同窗口大小的 Netbeans 代码完成

为了进行比较，这里有一个来自 Netbeans 的类似面板。现在 Netbeans 非常非常丑陋，但在传达信息方面，它通过占用更多空间和明智地使用它所拥有的空间来完成更多工作。

我怎样才能使细节框更大？

即使其他一切都一样，把这个盒子变大一点会更容易使用。是否有可以使其更大的配置参数或扩展？

如何控制详细信息框的字体大小？

如果这意味着它可以在不滚动的情况下包含更多信息，我会很高兴在此框中使用较小的文本。是否有配置变量或方法可以将这种字体大小与编辑器的字体大小取消链接？

我可以更改详细信息的内容或其顺序吗？

如果我被这个带有大文本的小盒子困住了，也许改变内容会在某种程度上改善这种情况。是否有配置变量来更改这些内容？

更新：建议详细信息框的内容由控制建议的扩展程序控制，在我的例子中是 PHP 扩展程序 Elephesense。扩展创建者无法更改文本或框的大小，但他们确实可以控制内容及其顺序。

相关问题已经回答：更改方法名称的左侧列表（树）。

注意：这个问题类似于How to make VS Code Intellisense Window Wider，但不同。在那个问题中，OP 专门询问 Intellisense 首先弹出的名称列表（左侧的部分，.tree在 HTML 中称为），而我询问的是在右侧弹出的“详细信息”视图你点击“阅读更多”。

默认情况下，此列表与“详细信息”框一样，使用配置的默认编辑器字体设置editor.fontSize。

如果您想要控制左侧的列表（例如，如果您的方法名称很长且不适合），您可以使用两个内置设置来更改字体大小和行高：

    // Set an override font size for the list of suggestions
    "editor.suggestFontSize": 12,
    // Set an override font size for the list of suggestions
    "editor.suggestLineHeight": 12, 

我想要的是这样的设置，但对于显示详细信息的右侧框！据我所知，任何地方都没有设置。

Answer 1

更新：在核心中修复！

VS Code 在 2020 年 10 月的 VS Code 更新中修复了这个问题，并提供了可调整大小的建议！您现在可以使用“详细信息”窗口右下角的调整大小工具来调整框的大小，并且该大小应跨会话保存：

修复前的原始答案

看起来没有核心支持，至少现在是这样

我仍然喜欢任何其他解决方案，但经过更多研究，发现此 GitHub 票证说明目前无法解决，并且社区多年来一直尝试提出修复建议但无济于事

无赖。

HACK：使用“自定义 CSS 和 JS 加载器”扩展来修改默认样式

建议详细信息展开以使用我的自定义 CSS 显示完整内容

对上面链接的票的评论提供了一个潜在的解决方案：

这不是一个正确的解决方案，而是一个在任何程序更新后可能会中断的黑客！

由于 VsCode 的样式主要使用 CSS 来更改大小，因此您必须简单地覆盖默认值。这可以通过使用“自定义 CSS 和 JS 加载器”扩展并注入您自己的 CSS 来实现。

评论也提供了一些 CSS，但它对我来说根本不起作用，但是经过一些工作，我得到了一组 CSS 工作，它使细节但对我个人更有用 1000%。

• 安装自定义 CSS 和 JS 加载器扩展
• 按照其页面上的说明进行详细而有条不紊的详细说明。这个扩展与其他扩展不同，它是某种黑客，所以你需要把它弄好。
• 根据扩展说明在文件中安装以下 CSS。

对不起，它太冗长了，但我想在这里包括我的完整答案。显然，如果您愿意，您可以对其进行清理，我只是想帮助其他人根据自己的喜好对其进行配置。下面的 CSS 允许您根据自己的喜好和代码需求控制各种不同的方面，这不是一刀切的解决方案。

警告：根据窗口的大小和您所在的位置，修改 CSS 时可能会发生一些奇怪的事情。对我来说，权衡是值得的，但你必须自己决定。如果您发现“跳来跳去”是一个问题，您可能想要移除该--details-max-height部分并只使用更宽但仍然太短的细节框。

/* CSS TO FIX INTELLISENSE SUGGESTIONS AND DETAILS BOX
- It is way too tiny by default, you can't see what's happening
- When suggestions and details are showing, each are 50% width of the parent container, which is 660px which is too small.
- This makes the parent container larger, so it's basically 50% width of the window instead
- This allows you to set a width for the suggestions box when it's on it's own (not possible in core)
- This also allows you to make the details box taller, so it can try to fit the full details without scrolling
- There's also an option to alter the details box's font-size, commented out by default 

@see https://stackoverflow.com/posts/62963539/edit
@see https://github.com/microsoft/vscode/issues/29126
*/

/* Use these custom properties to define the widths of the boxes as you need them. */
:root {
    /* Width of the container - both Tree and Details will have max-width: 50% of this value */
    --container-width: 90%;
    /* Width of suggestion list on it's own, to make it wider, match this to your longest class names etc. */
    --tree-only-width: 35rem;
    /* Width of suggestion list when it's next to tree, if you want it less than the max-width of 50%, helps with smaller windows */
    --tree-with-details-width: 25rem;
    /* max-height of details box (max-width always 50%), it should take up only the height each item needs, the taller, the more disruptive */
    --details-max-height: 60vh;
    /* Font size in details box. Uncomment to activate. Default is to match editor font size `editor.fontSize`*/
    /* --details-font-size: 90%; */
    /* --details-line-height: 1; */
}

/* CONTAINER WITH ONLY SUGGESTIONS LIST
- .suggest-widget is the parent container that has either just .tree, or .tree+.details inside. 
- This default selector affects the container when it has ONLY .tree inside */
.monaco-editor .suggest-widget {
    /* Just here for reference */
 }
 /* CONTAINER WITH BOTH LIST AND DETAILS
 - .suggest-widget.docs-side means .details is showing */
 .monaco-editor .suggest-widget.docs-side {
    /* By default this is trapped at 660px, making tree and details trapped at 330px */
    /* width: 660px; */
    /* Set a very large width so there's room for tree and details */
    width: var(--container-width) !important;
 }
/* SUGGESTIONS LIST ON ITS OWN
- .tree is the list of options to pick from, this is when details aren't showing*/
.monaco-editor .suggest-widget>.tree {
    width: var(--tree-only-width);
}
/* SUGGESTIONS LIST NEXT TO DETAILS
- .docs-side>.tree means .detail box is also showing 
- Note: at small window sizes this changes and annoying stuff happens */
.monaco-editor .suggest-widget.docs-side>.tree {
    /* By default they show 50% width and floated! */
    /* width: 50%; */
    /* float: left; */
    width: var(--tree-with-details-width) !important;
    max-width: 50%;
}
/* DETAILS BOX
- .details is the "read more" box, always inside .docs-side and next to .tree 
- Note: at small window sizes this changes and annoying stuff happens */
.monaco-editor .suggest-widget.docs-side>.details {
    /* By default they show 50% width and floated! */
    /* width: 50%; */
    /* float: left; */
    max-width: 50%;
    max-height: var(--details-max-height) !important;
}
/* DETAILS BOX CONTENTS
- Where the actual "markdown" lives, in case you want to style it */
.monaco-editor .suggest-widget.docs-side>.details .body {
    /* padding: .5rem; */
    /* margin: 1rem; */
    font-size: var(--details-font-size);
    line-height: var(--details-line-height);
}