php - VS代码-将Intellisense "read more"(建议详细信息)框变大或使其文本变小

Question

更新:固定在核心!
VS Code已修复VS Code Update October 2020 with Resizeable Suggestions中的此问题!现在，您可以使用“详细信息”窗口右下角的调整大小工具来调整框的大小，并且该大小应在各个 session 之间保存:

因此，此问题现在与固定行为有关，不再需要所有复杂性!为了历史起见，我保留下面的文本，但是如果您只想控制弹出的intellisense框的大小，请执行上面的gif显示的操作!
原始问题
VS Code通过Intellisense系统支持代码完成/建议，该系统通过针对各种语言的各种扩展来实现。它可以很好地为您提供选择(作为纯列表)(在HTML中称为.tree)，但是在很多情况下，向您显示有关每个选择的更多详细信息的系统会遇到一些非常糟糕的设计/可用性。
通过单击“树”列表中建议右侧的“阅读更多”按钮，或者在查看以下内容时再次调用键盘快捷键以完成操作(macOS上为CMD + space)，可以使这些“建议详细信息”可见列表。内容将取决于您的扩展名，但往往是文档的摘要以及建议的对象，方法等的参数。
正如我所看到的(和others have complained about on the VS Code Github for years)一样，关键问题在于盒子总是很小，甚至没有尝试填充可用的水平或垂直空间，从而导致信息被切掉，这些信息会包裹到多行中，并且需要滚动浏览，这是非常分散注意力和无益的。
此外，无法配置此框的字体大小，它始终使用默认的编辑器字体大小，这意味着小框会因内部信息而更加过载。
注意:就我而言，我通过Intelephense扩展名使用PHP，但我认为字体和框大小问题更为普遍，适用于实现此“阅读更多”/说明框的任何语言/扩展名。
VS代码“建议详细信息”示例
请注意，详细信息框是如何被完全切除的。无论编辑器的大小如何，都会发生这种情况，它永远不会变得比这个更大!

在相同窗口大小下的Netbeans代码完成
为了进行比较，这是来自Netbeans的类似面板。现在，Netbeans非常非常丑陋，但是在传递信息方面，它占用了更多空间并明智地利用了它拥有的空间，从而完成了很多工作。

如何使详细信息框更大？
即使其他所有条件都相同，将其增大也可以使其更容易使用。是否有配置参数或扩展名可能会使它更大？
如何控制详细信息框的字体大小？
如果此框中的文本较小，这表示它可以容纳更多信息而无需滚动，我将很高兴。是否存在配置变量或使该字体大小与编辑器的字体断开链接的方法？
我可以更改详细信息的内容或其顺序吗？
如果我坚持使用这个带有大文本的小盒子，也许更改内容可以在某种程度上改善这种情况。是否有配置变量来更改这些内容？
更新:“建议详细信息”框的内容由控制建议的扩展名控制，在本例中为PHP扩展Elephesense。扩展程序创建者无法更改文本或框的大小，但可以对内容及其顺序进行某些控制。
已经回答了相关问题:更改方法名称(树)的左侧列表。
注意:此问题类似于How to make VS Code Intellisense Window Wider，但有所不同。在该问题中，OP特别询问的是Intellisense首先弹出的名称列表(左侧部分，在HTML中称为.tree)，而我询问的是在其右侧弹出的“详细信息” View 当您单击“阅读更多”时。
默认情况下，此列表(如“详细信息”框)使用使用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更新中解决了此问题!现在，您可以使用“详细信息”窗口右下角的调整大小工具来调整框的大小，并且该大小应在各个 session 之间保存:

解决之前的原始答案
看起来至少目前没有核心支持
我仍然会喜欢其他任何解决方案，但经过更多研究，发现this GitHub ticket that clarifies it's currently impossible to solve and that there's been a years-long attempt by the community to propose fixes to no avail
笨蛋
HACK:使用“自定义CSS和JS加载程序”扩展名修改默认样式
建议详细信息展开以显示我的自定义CSS的全部内容

comment on the ticket linked above提供了潜在的解决方案:

This is not a proper solution, but a hack that might break after any program update!

As VsCode is styled mainly using CSS to change the size you have to simply override default values. This can be accomplished by using "Custom CSS and JS loader" extension and injecting your own CSS.

该注释还提供了一些CSS，但是对我来说根本不起作用，但是经过一些工作，我得到了一组CSS工作，这些细节使Details变得有用，但对我个人而言却有用了1000％。

安装Custom CSS and JS Loader扩展

按照其页面上的说明进行详尽而有条理的详细说明。此扩展名与其他扩展名不同，它是某种hack，因此您需要正确处理。

根据扩展说明，在文件中安装以下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);
}