【问题标题】:VS Code - Make the Intellisense "read more" (suggestion details) box bigger or its text smallerVS Code - 使 Intellisense “阅读更多”(建议详细信息)框更大或文本更小
【发布时间】:2020-11-07 17:31:21
【问题描述】:

更新:核心已修复!

VS Code 在VS Code Update October 2020 with Resizeable Suggestions 中修复了这个问题!您现在可以使用“详细信息”窗口右下角的调整大小工具来调整框的大小,并且应该跨会话保存该大小:

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

原始问题

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

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

在我看来(和others have complained about on the VS Code Github for years)的关键问题是盒子总是很小,甚至没有尝试填充可用的水平或垂直空间,导致信息被截断很多行,需要滚动浏览,这非常分散注意力且无益。

另外,这个盒子的font-size是没有办法配置的,它总是使用默认的编辑器字体大小,这意味着这个小盒子更容易被里面的信息所覆盖。

注意:在我的情况下,我通过 Intelephense 扩展使用 PHP,但我认为字体和框大小问题更为普遍,适用于实现此“阅读更多”/描述的任何语言/扩展盒子。

VS Code“建议详情”示例

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

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

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

如何让详情框变大?

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

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

如果这意味着它可以在不滚动的情况下保存更多信息,我很乐意在此框中使用较小的文本。是否有配置变量或方法可以将此字体大小与编辑器的字体大小取消关联?

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

如果我被这个带有大文本的小框卡住了,也许改变内容会在某种程度上改善这种情况。是否有配置变量可以更改这些内容?

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

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

注意:此问题与How to make VS Code Intellisense Window Wider 类似,但有所不同。在那个问题中,OP 专门询问 Intellisense 首先弹出的名称列表(左侧的部分,在 HTML 中称为 .tree),而我询问的是弹出的“详细信息”视图当你点击“阅读更多”时,它是正确的。

默认情况下,此列表与“详细信息”框一样,使用由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, 

我想要的是这样的设置但要显示细节的右侧框!据我所知,任何地方都没有设置。

【问题讨论】:

  • 这个问题已经被问过很多次了(在过去的两周内甚至多次)。 (拒绝投票的礼貌解释)
  • 没有指向重复问题的链接?
  • FWIW 我认真寻找了我能找到的每一个搜索查询。此问题使用 VSCode UI 中的单词(“阅读更多”,即打开右侧框的按钮上的内容,以及“智能感知”)。即使有其他问题与类似问题,如果他们正在搜索这些术语,这个问题也可能会帮助他们找到答案。
  • 我明白了;我误解了,我道歉并撤回了我的反对票。 this one is likely to help someone find the answer if they are searching for those terms :这是真实的但主观的,虽然我明白你想说什么。 vscode 使用的实际术语是suggestion details,至少与与之相关的 commandId 一致(即toggle.suggestionDetails)。这不是世界末日,我什至没有投票结束,只是根据 StackOverflow 礼仪解释了我的反对票。干杯
  • 谢谢!我一直在做更多的工作,并同意“详细信息”是引用它的正确方法(基于底层的 HTML 类以及 toggle. 命令)。我会进一步更新以确保显示所有这些术语。

标签: php visual-studio-code


【解决方案1】:

更新:核心已修复!

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

修复前的原始答案

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

我仍然喜欢任何其他解决方案,但经过更多研究,发现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 提供了一个潜在的解决方案:

这不是一个适当的解决方案,而是一个可能会在任何情况下破坏的 hack 程序更新!

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

评论还提供了一些 CSS,但它对我来说根本不起作用,但经过一些工作后,我得到了一组 CSS,它使细节变得更加有用,但对我个人而言 1000% 更有用。

  • 安装Custom CSS and JS Loader 扩展
  • 按照其页面上的说明进行操作,详细而有条不紊地进行操作。此扩展程序与其他扩展程序不同,它是某种 hack,因此您需要做好准备。
  • 根据扩展说明在文件中安装以下 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);
}

【讨论】:

  • 固体。只是不要忘记在/如果他们添加原生支持时更新
  • 谢谢! VS Code 团队的反应是悲伤的......而且几乎是敌对的!令人难以置信。就问题的公开时间而言,它已接近 Atlassian 的荒谬程度。
【解决方案2】:

https://stackoverflow.com/a/64492059/836330 相关,但您实际上是在询问右侧的扩展框。打开后,您可以拖动它的右边缘来增加/减少它的宽度。

来自https://github.com/microsoft/vscode/pull/109094

另请参阅https://github.com/microsoft/vscode/issues/109160(建议框:文档框不保留大小)- 对我来说,即使在重新启动后它似乎也能记住大小,但尚不清楚要记住这一点的计划是什么。

【讨论】:

  • 这只是添加到核心 VS Code 中。我的问题和答案适用于旧行为,我已更新两者以阐明新行为。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-01-08
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多