VS Code - 使智能感知“阅读更多"(建议细节)框更大或其文本更小 [英] VS Code - Make the Intellisense "read more" (suggestion details) box bigger or its text smaller

问题描述

更新:核心修复！

VS Code 在

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

原始问题

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

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

我所看到的关键问题(以及

在相同窗口大小下完成 Netbeans 代码

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

如何使详细信息框变大?

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

如何控制详情框的字体大小?

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

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

如果我被这个带有大文本的小盒子困住了，也许改变内容会在一定程度上改善这种情况.有没有配置变量来改变这些内容?

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

已回答相关问题:更改左侧的方法名称列表(树).

注意:这个问题类似于

修复前的原始答案

看起来没有核心支持，至少目前是这样

我仍然喜欢任何其他解决方案，但经过更多研究，发现

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

<块引用>

这不是一个正确的解决方案，而是一个可能会在任何情况下崩溃的黑客程序更新！

由于 VsCode 的样式主要使用 CSS 来更改您必须更改的大小只需覆盖默认值.这可以通过使用来完成自定义 CSS 和 JS 加载器"扩展并注入您自己的 CSS.

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

• 安装自定义 CSS 和 JS 加载程序 扩展
• 按照其页面上的说明进行详细而有条不紊的详细操作.此扩展程序与其他扩展程序不同，它属于某种黑客行为，因此您需要将其弄好.
• 根据扩展说明在文件中安装以下 CSS.

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

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

/* CSS 修复智能感知建议和细节框- 默认情况下它太小了，你看不到发生了什么- 当显示建议和详细信息时，每个都是父容器的 50% 宽度，即 660px 太小了.- 这使得父容器更大，所以它基本上是窗口宽度的 50%- 这允许您在建议框独立时为其设置宽度(在核心中不可能)- 这也允许您使细节框更高，因此它可以尝试在不滚动的情况下适应完整的细节- 还有一个选项可以更改详细信息框的字体大小，默认情况下已注释掉@see https://stackoverflow.com/posts/62963539/edit@see https://github.com/microsoft/vscode/issues/29126*//* 使用这些自定义属性根据需要定义框的宽度.*/:根 {/* 容器的宽度 - Tree 和 Details 都有 max-width: 这个值的 50% */--容器宽度:90%；/* 建议列表的宽度，使其更宽，将其与您最长的类名等匹配 */--tree-only-width: 35rem;/* 建议列表在树旁边时的宽度，如果您希望它小于 50% 的最大宽度，则有助于较小的窗口 */--tree-with-details-width: 25rem;/* 详细信息框的最大高度(最大宽度总是 50%)，它应该只占用每个项目需要的高度，越高越混乱 */--details-max-height: 60vh;/* 细节框中的字体大小.取消注释以激活.默认是匹配编辑器字体大小`editor.fontSize`*//* --details-font-size: 90%;*//* --details-line-height: 1;*/}/* 仅包含建议列表的容器- .suggest-widget 是其中只有 .tree 或 .tree+.details 的父容器.- 当容器中只有 .tree 时，这个默认选择器会影响容器 */.monaco-editor .suggest-widget {/* 仅供参考 */}/* 包含列表和详细信息的容器- .suggest-widget.docs-side 表示 .details 正在显示 */.monaco-editor .suggest-widget.docs-side {/* 默认情况下，它被困在 660 像素，使树和细节被困在 330 像素 *//* 宽度:660px;*//* 设置一个非常大的宽度，以便为树和细节留出空间 */宽度: var(--container-width) !important;}/* 建议单独列出- .tree 是可供选择的选项列表，这是不显示详细信息时*/.monaco-editor .suggest-widget>.tree {宽度:var(--tree-only-width);}/* 详细信息旁边的建议列表- .docs-side>.tree 表示 .detail 框也显示- 注意:在小窗口大小时，这会发生变化并且会发生烦人的事情 */.monaco-editor .suggest-widget.docs-side>.tree {/* 默认情况下，它们显示 50% 的宽度并浮动！*//* 宽度:50%；*//* 向左飘浮;*/宽度:var(--tree-with-details-width) !important;最大宽度:50%；}/* 详细信息框- .details 是阅读更多"框，总是在 .docs-side 和 .tree 旁边- 注意:在小窗口大小时，这会发生变化并且会发生烦人的事情 */.monaco-editor .suggest-widget.docs-side>.details {/* 默认情况下，它们显示 50% 的宽度并浮动！*//* 宽度:50%；*//* 向左飘浮;*/最大宽度:50%；最大高度:var(--details-max-height)！重要；}/* 详细信息框内容- 实际降价"的地方生活，万一你想设计它*/.monaco-editor .suggest-widget.docs-side>.details .body {/* 填充:.5rem;*//* 边距:1rem;*/字体大小:var(--details-font-size);行高:var(--details-line-height);}

Update: Fixed in core!

VS Code has fixed this problem in VS Code Update October 2020 with Resizeable Suggestions ! You can now use a resizing tool at the bottom right corner of the "details" window to resize the box, and that size should be saved across sessions:

So this question now relates to fixed behavior, and all the complexity is no longer needed! I'm keeping the text below for the sake of history, but if you just want to control the size of the popup intellisense box, do what the gif above shows!

Original Question

VS Code supports code completion/suggestion with the Intellisense system, which gets implemented by various extensions for various languages. It works well for offering you choices as a plain list (called .tree in the HTML), but the system to show you more details about each choice suffers from some very bad design/usability in many cases.

These "Suggestion Details" can be made visible by clicking the "read more" button on the right side of a suggestion in the "tree" list, or by invoking the keyboard shortcut for completion (CMD+space on macOS) again while viewing the list. The contents will depend on your extension, but tend to be summaries of the documentation and arguments for the suggested object, method, etc.

The key problems, as I see them (and as others have complained about on the VS Code Github for years) are that the box is always very small, and doesn't even attempt to fill the available horizontal or vertical space, resulting in cut off information that wraps to many lines and needs to be scrolled through which is very distracting and unhelpful.

Additionally, there's no way to configure the font-size of this box, it always uses the default editor font size, meaning the small box is even more overloaded by the information inside.

Note: In my case I'm using PHP via the Intelephense extension, but I think the font and box size issue is much more general and applies to any language/extension that implements this "read more"/description box.

VS Code "Suggestion Details" example

Notice how the details box is totally cut off. This happens regardless of the size of the editor, it never gets bigger than this!

Netbeans code-completion at the same window size

For comparison, here is a similar panel from Netbeans. Now Netbeans is very, very ugly, but in terms of conveying information, it gets a LOT more done both by taking up more space, and by wisely using the space it has.

How can I make the details box bigger?

Even if all else was the same, making this box larger would make it much easier to use. Are there configuration parameters or extensions that could make it larger?

How can I control the font size of the details box?

I would be happy to have smaller text in this box if it meant it held more information without scrolling. Are there configuration variables or ways of unlinking this font size from that of the editor?

Can I change the contents of the details or its order?

If I'm stuck with this tiny box with large text, maybe altering the contents would improve the situation somewhat. Are there configuration variables to change these contents?

UPDATE: The contents of the Suggestion Details box are controlled by the extension that controls the suggestions, in my case, the PHP extension Elephesense. The extension creator can't change the size of the text or box, but they do have some control over the contents and their order.

Related question already answered: Changing the left-hand list of method names (tree).

Note: This question is similar to How to make VS Code Intellisense Window Wider, but different. In that question, the OP is specifically asking about the list of names that Intellisense pops up first (the part on the left, referred to as .tree in the HTML) whereas I am asking about the "details" view that pops up to its right when you click "read more".

By default this list, like the "details" box, uses the default editor font setting configured with editor.fontSize.

If what you want is to control the list on the left (e.g. if your method names are very long and don't fit) there are two built in settings you can use to change the font size and line height:

    // 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, 

What I want is a setting like that but for the righthand box that shows the details! As far as I can tell there's no setting for that anywhere.

解决方案

Update: Fixed in core!

VS Code has fixed this problem in VS Code Update October 2020 with Resizeable Suggestions ! You can now use a resizing tool at the bottom right corner of the "details" window to resize the box, and that size should be saved across sessions:

Original Answer before the fix

Looks there's no core support, at least for now

I would still love any other solutions, but after more research, found 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

Bummer.

HACK: Use "Custom CSS and JS Loader" extension to modify the default styles

Suggestion Details expand to show the full content with my custom CSS

A comment on the ticket linked above offers a potential solution:

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.

The comment also gave some CSS, but it didn't work at all for me, BUT after some work, I got a set of CSS working that makes the Details but 1000% more useful for me personally.

• Install the Custom CSS and JS Loader extension
• Follow the instructions on it's page in excruciating and methodical detail. This extension is not like others, and it's some kind of hack so you need to get it all right.
• Install the following CSS in a file according to the extension instructions.

Sorry it's so verbose, but I wanted to include my full answer here. Obviously you can clean it up if you want to, I just wanted to help others configure it to their own liking. The CSS below allows you to control a variety of different aspects depending on your taste and your code needs, this isn't a one-size-fits-all solution.

Warning: Depending on the size of your window and where you are, some weird stuff can happen when you modify the CSS. For me the tradeoff is worth it, but you'll have to decide for yourself. If you find the "jumping around" to be a problem, you might want to remove the --details-max-height part and just live with the wider but still too short details box.

/* 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);
}

这篇关于VS Code - 使智能感知“阅读更多"(建议细节)框更大或其文本更小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！