Vscode: 增强的滚动条(添加小地图)

创建于 2016-04-01  ·  105评论  ·  资料来源: microsoft/vscode

功能要求

将 VS 2013 和 VS 2015 中的增强滚动条功能添加到 VS Code 中。 这是在文件中移动的一种非常有效的方式,并且将是 VS Code 中的一个很棒的功能。

如果这已经是一个扩展或选项,我找不到它。

editor feature-request

最有用的评论

关于这一点的更新

我们正在努力实现此功能:

  • 部分工作在next分支上的vscode-textmate完成 -- https://github.com/Microsoft/vscode-textmate/tree/next
  • 现在我们可以得到(以二进制编码格式)标记化 + 主题匹配的结果。 即我们从分词器中获得了直接的颜色、字体样式等,它现在可以获取主题信息(即主题应用程序可以在代码中完成,而不是通过 CSS)
  • 我们需要在vscode采用这种新格式。

    • 这意味着我们也需要为其他标记化提供程序采用这种新格式(总共有 3 个:textmate、monarch 和 manual)。 最后两个在monaco-editor中起作用。

    • 我们正在清理独立编辑器令牌.css ,以便将其转换为 JS 数据结构(请参阅 https://github.com/Microsoft/vscode/commits/master/src/vs/editor/browser/独立/媒体/独立令牌.css)

    • 我们已经完成了monaco-languages标记的对齐,以便它们都发出经典样式的标记。

剩下要做的:

  • [x] 转换君主/手动标记器以在 JS 中使用主题匹配(而不是在 CSS 中)并生成与vscode-textmate相同的二进制格式。
  • [x] 在编辑器模型中采用新的标记化二进制格式
  • [x] 在编辑器视图中采用新的标记化格式
  • [x] 开始实现这个功能

TL;DR我们正在研究它,只是有时需要在引擎盖下进行大量工作才能获得华丽的东西。

所有105条评论

@jschraub您能否指出您喜欢或帮助您从 VS 2013/2015 的增强滚动条中更有效地移动的特定功能?

当然,@alexandrudima。 能够一目了然地获得文档/代码的可视化表示。 拥有“10,000 英尺视图”可以轻松浏览您的文档并立即单击您正在查找的代码段。 虽然来自 VS 2013/2015 的增强滚动条提供了更多功能,但我并没有使用其中的很多功能。

许多其他代码编辑器具有类似的功能,包括 Sublime 和 Atom,它们都有不同的子功能,但我认为提供快速浏览文档的“10,000 英尺视图”的功能,比文本编辑器具有更大的优势没有相应的功能。

请让我知道这是否是您要找的,或者您需要更好/不同的细节。

很棒的描述! 谢谢!

@alexandrudima

我猜这将是某种阅读编辑器模型并在画布中绘制它的小地图表示。 是吗?

@nojvek我们将在下周末起草并发布 9 月计划。 鉴于此问题上升到我们用来跟踪社区请求的此查询的顶部 (https://github.com/Microsoft/vscode/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc ),它有很大的变化,使其在 9 月计划中。

敬请期待 :)

贝塔位请! 这是我最喜欢的功能,也是唯一让我被 Sublime Text 束缚的功能。

很快™

👍 非常想念小地图功能

我也很想念它。

+无限

@+1 Minimap 是我必备的功能之一,它在带有许多插件的 atom 上效果很好。

参见 kate 的小地图,我认为这是一个很好的例子: https :

+1 用于小地图。 滚动的“按住鼠标中键”(滚动条按钮)也很棒

如果我们有 git 状态、错误、当前单词的其他出现、查找结果、peek 预览窗口指示,基本上 Sublime 的所有 minimap 都有 + VSCode 当前滚动条的所有,它将是巨大的!

slice

capture

如果 VS 可以,我不明白为什么 VS Code 不能。

这将是一个巨大的胜利,也是 sublime holdover 最后缺失的功能之一

我最近发现了这个用途,等不及它实施了

+1 迫不及待地想在 VSCode 中实现这一点......

+1 请尽快添加。

+1 请添加小地图

我不敢相信这不是第一个版本的功能?!

请为 VSCode 添加 MiniMap

+1 请添加小地图

+1

我很伤心这在 1.6.0 中没有实现:( 请尽快添加这个

似乎也没有制定 10 月份的计划。 我猜十月手指交叉。 看起来它现在位于请求列表的顶部,所以这非常令人兴奋。

+1

+10

+1

+1

请不要再 +1 评论。 改为支持原始问题。
订阅此线程的人希望在取得进展时收到通知,而不是在您 +1 时收到通知。

你们可以将对话锁定给合作者。

感谢和问候,
迪普

2016 年 10 月 13 日星期四晚上 9:13,Pine [email protected]写道:

请不要再 +1 评论。 改为支持原始问题。
订阅此线程的人希望在取得进展时收到通知
已制作,而不是在您 +1 时。


您收到此消息是因为您发表了评论。
直接回复本邮件,在GitHub上查看
https://github.com/Microsoft/vscode/issues/4865#issuecomment -253552567,
或静音线程
https://github.com/notifications/unsubscribe-auth/ABDlF49KaIi-Lgu1cKv8Zhn1Tjoa-Hruks5qzlGkgaJpZM4H93xs
.

+1

即使我真的没有错过@code上的小地图,如果我需要选择,我可以说我真的很喜欢 Atom 上的小地图方法(另外,代码是操作系统)。 不是代码的缩小版本,而是示意图。 这很聪明,因为您想要的是快速识别代码的各个部分而不是代码本身,并且您可以在视觉上改进使这成为可能的关键元素,例如颜色、线长、空白...

2016-10-21_09h34_59

在我进行切换之前,几乎只是等待这个。

也可以让它显示git diff并突出显示当前位置?

对此的快速更新:

目前,一行源代码的渲染通过以下方式工作:

1. 渲染大量跨度,每个跨度都将生成的 TM 范围作为类名:

<span class="token block ts meta arrow expr var leading whitespace" style="width:38.53125px">→&nbsp;&nbsp;&nbsp;</span>
<span class="token block ts meta other constant arrow expr var">TO_USER_SETTINGS_MAP</span>
<span class="token block ts meta arrow brace square expr array literal var">[</span>
<span class="token block ts meta variable other arrow object expr array literal var">KeyCode</span>
<span class="token block ts punctuation meta arrow accessor expr array literal var">.</span>
<span class="token block ts meta variable other arrow property expr array literal var">DownArrow</span>
<span class="token block ts meta arrow brace square expr array literal var">]</span>
<span class="token block ts meta arrow expr var">&nbsp;</span>
<span class="token block ts meta keyword operator arrow assignment expr var">=</span>
<span class="token block ts meta arrow expr var">&nbsp;</span>
<span class="token block ts punctuation definition string quoted single begin meta arrow expr var">'</span>
<span class="token block ts string quoted single meta arrow expr var">Down</span>
<span class="token block ts punctuation definition string quoted single end meta arrow expr var">'</span>
<span class="token block ts punctuation terminator statement meta arrow expr var">;</span>

2.从TM主题生成大量css规则

.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.comment { color: rgba(117, 113, 94, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.string { color: rgba(230, 219, 116, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.constant.numeric { color: rgba(174, 129, 255, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.constant.language { color: rgba(174, 129, 255, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.constant.character { color: rgba(174, 129, 255, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.constant.other { color: rgba(174, 129, 255, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.variable {  }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.keyword { color: rgba(249, 38, 114, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.storage { color: rgba(249, 38, 114, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.storage.type { font-style: italic; color: rgba(102, 217, 239, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.entity.name.type.class { text-decoration: underline; color: rgba(166, 226, 46, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.entity.other.inherited-class { font-style: italic; text-decoration: underline; color: rgba(166, 226, 46, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.entity.name.function { color: rgba(166, 226, 46, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.variable.parameter { font-style: italic; color: rgba(253, 151, 31, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.entity.name.tag { color: rgba(249, 38, 114, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.entity.other.attribute-name { color: rgba(166, 226, 46, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.support.function { color: rgba(102, 217, 239, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.support.constant { color: rgba(102, 217, 239, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.support.type { font-style: italic; color: rgba(102, 217, 239, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.support.class { font-style: italic; color: rgba(102, 217, 239, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.support.other.variable {  }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.invalid { color: rgba(248, 248, 240, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.invalid.deprecated { color: rgba(248, 248, 240, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.meta.structure.dictionary.json.string.quoted.double.json { color: rgba(207, 207, 194, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.meta.diff { color: rgba(117, 113, 94, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.meta.diff.header { color: rgba(117, 113, 94, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.deleted { color: rgba(249, 38, 114, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.inserted { color: rgba(166, 226, 46, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.changed { color: rgba(230, 219, 116, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.constant.numeric.line-number.find-in-files.-.match { color: rgba(174, 129, 255, 0.63); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.entity.name.filename.find-in-files { color: rgba(230, 219, 116, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.quote { color: rgba(249, 38, 114, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.list { color: rgba(230, 219, 116, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.bold { color: rgba(102, 217, 239, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.italic { color: rgba(102, 217, 239, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.inline.raw { color: rgba(253, 151, 31, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.heading { color: rgba(166, 226, 46, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.markup.heading.setext { color: rgba(166, 226, 46, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .monaco-editor-background { background-color: rgba(39, 40, 34, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .glyph-margin { background-color: rgba(39, 40, 34, 1); }
.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .monaco-workbench .monaco-editor-background { background-color: rgba(39, 40, 34, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token { color: rgba(248, 248, 242, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .cursor { background-color: rgba(248, 248, 240, 1); border-color: rgba(248, 248, 240, 1); color: rgba(7, 7, 15, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .token.whitespace { color: rgba(59, 58, 50, 1) !important; }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .lines-content .cigr { background: rgba(72, 71, 62, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .current-line { background-color: rgba(62, 61, 50, 1); border: none; }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .focused .selected-text { background-color: rgba(73, 72, 62, 1); }
.monaco-editor.vs-dark.vscode-theme-monokai-themes-Monokai-tmTheme .selected-text { background-color: rgba(73, 72, 62, 0.5); }

3. 让浏览器发挥它的魔力 :)

image

讨论

这是非常低效的:

  • 我们需要为每个令牌存储所有这些范围(高内存使用率——这样向上/向下滚动将是一个内存查找操作,而不是使用 TM 进行标记化的调用)
  • 我们需要绘制所有这些范围(只需查看 HTML 的巨大尺寸即可呈现一行)
  • 我们向浏览器施加压力以匹配所有这些 CSS

这是在我们不使用 TM 的时候实现的,这是拥有一些标记器仍然是手动编写的世界的最佳方式,而其他标记器则是用 TM 完成的。 现在我们已经完成了 json、css、less、scss、html、razor 和 handlebars 到扩展的移动,我们可以再次开始优化:)。

我想将其更改为模型,其中:

  • 我们立即(靠近标记化发生的地方)解析每个标记的样式
  • 仅存储那些样式(这意味着更改主题将删除所有缓存的令牌)
  • 仅使用这些样式进行渲染(例如,如果主题中没有规则会选择它,则不需要渲染block类名),我们可以内联它们(即style="..." )或生成定制的类名(具有简短的唯一名称,有望帮助浏览器更快地发挥其魔力)。

最后,这将使我们能够快速知道某个标记的颜色/大胆/重点。 然后我们可以使用这些信息来绘制(使用<canvas> )近似文本形状的矩形。 矩形只能为保证从左到右的文本绘制(这是我们几天后跟踪的内容)。 Bi-Di / RTL 文本不会得到小地图,因为我们的文本布局是由浏览器完成的,它会完全关闭。 同样值得怀疑的是我们应该如何处理比例字体。

抱歉,这篇长文章,只是想让您知道这是我们的雷达,并且由于可能的性能胜利,它可能会被优先考虑。

+1

+1

+1

Github 有一种让赞许计数的方法。 请使用那个。 +1 是
真的把线程弄乱了。

2016 年 11 月 3 日星期四上午 10:46,Filiphe Vilar Figueiredo <
[email protected]> 写道:

+1


你收到这个是因为你被提到了。
直接回复本邮件,在GitHub上查看
https://github.com/Microsoft/vscode/issues/4865#issuecomment -258219634,
或静音线程
https://github.com/notifications/unsubscribe-auth/AA-JVK1A3zeRm0CUCePdrkPdqtRdbtMfks5q6h3ZgaJpZM4H93xs
.

伙计们,这方面有什么进展吗? 社区可以提供帮助吗?

请停止使用 +1s,FFS 向线程发送垃圾邮件。 当我们关注此问题时,我们希望获得有关此功能进度的相关信息,而不是收到 +1 的垃圾邮件。 请改用对原始评论的点赞反应或对 UserVoice 的投票。

我在想,如果我们能像在 Microsoft Edge 或 Visual Studio 等浏览器中一样单击鼠标中键并在编辑器中导航,那就太好了。 上下滚动很棒,但左右滚动会更好! 我希望能够单击鼠标中键来调出上、下、左、右滚轮并通过移动鼠标在屏幕上移动。 在 Edge 中尝试一下,看看我在说什么!

我应该在新的东西下发布这个吗?

我不会做 +1,为了得到投票,请在即将到来的 11 月构建之后尝试解决这个问题,这样我们就可以在 1 月看到这个,我很想念这个。
更新:我也得到了很多反对票,哈哈

所有@jschraub都在说我们需要一个鸟瞰图

我将 Sublime 与 VSCode 结合使用,只是因为我没有办法查看我的千行代码。

我糊涂了。 该团队似乎一直在使用反应来判断兴趣并确定功能请求的优先级……他们甚至在上一篇博客中提到了“热退出”,获得了 ~332。 然而,目前排名第一(我相信)超过 600 的“增强型滚动条”还没有进入里程碑吗? 那么怎么了,为什么开发团队不同意我们的观点?

对于它的价值......这是我留在 Atom 的主要原因之一...... Atom 的小地图和它的第 3 方插件真是太棒了......毫无疑问它具有最好的实现(因为有一个完整的api)

关于这一点的更新

我们正在努力实现此功能:

  • 部分工作在next分支上的vscode-textmate完成 -- https://github.com/Microsoft/vscode-textmate/tree/next
  • 现在我们可以得到(以二进制编码格式)标记化 + 主题匹配的结果。 即我们从分词器中获得了直接的颜色、字体样式等,它现在可以获取主题信息(即主题应用程序可以在代码中完成,而不是通过 CSS)
  • 我们需要在vscode采用这种新格式。

    • 这意味着我们也需要为其他标记化提供程序采用这种新格式(总共有 3 个:textmate、monarch 和 manual)。 最后两个在monaco-editor中起作用。

    • 我们正在清理独立编辑器令牌.css ,以便将其转换为 JS 数据结构(请参阅 https://github.com/Microsoft/vscode/commits/master/src/vs/editor/browser/独立/媒体/独立令牌.css)

    • 我们已经完成了monaco-languages标记的对齐,以便它们都发出经典样式的标记。

剩下要做的:

  • [x] 转换君主/手动标记器以在 JS 中使用主题匹配(而不是在 CSS 中)并生成与vscode-textmate相同的二进制格式。
  • [x] 在编辑器模型中采用新的标记化二进制格式
  • [x] 在编辑器视图中采用新的标记化格式
  • [x] 开始实现这个功能

TL;DR我们正在研究它,只是有时需要在引擎盖下进行大量工作才能获得华丽的东西。

我只是希望您考虑将小地图中突出显示的选择和搜索结果作为一项功能显示出来。

+1

现在它的状态是什么,有人总结一下。

这正是 Visual Studio Code 所缺少的。

@charlesmilette :“请停止用 +1s 发送垃圾邮件,FFS。当我们关注这个问题时,我们希望获得有关此功能进展的相关信息,而不是被 +1s 发送垃圾邮件。使用对原始评论的赞许反应或改为对 UserVoice 投票。”

请使用👍反应请。 不要评论+1。

+1

完全偏离主题,但在收到 +1 回复的垃圾邮件后,出于多种原因,我不能为此责怪用户:

  • Github 移动版没有用于反应的 UI,我不得不切换到桌面 UI 才能看到它们。
  • 评论用户界面位于页面底部,反应用户界面附在顶部的第一篇文章中。 应将反应快捷方式附加到评论 UI 并自动链接到第一篇文章。
  • “+1”帖子应该通过简单的解析自动检测并转换为反应,或者至少建议用户这样做。
  • Github 应该建议接收最少 n 个字符的帖子通知。

很高兴听到小地图功能正在开发中,这让我从 sublime text 转过来的我更有信心继续使用 vs 代码。

有什么理由不能作为扩展来实现吗? 如果可用 - 这听起来像是扩展的完美选择。

扩展将是临时解决方案不是一个好的解决方案。 您真的想通过扩展单独安装基本功能吗? 首先下载 VScode,然后这里是 30 个扩展的列表,它们可能根本无法协同工作,但需要提供最基本的功能。 (1. 复制/粘贴 v3.0, 2. 制表符, 3. 自动缩进, 4. tabstospace, 5. 自动保存, 6. 颜色荧光笔,...... 28.birdeyeview_by_dx3ee_v1.0.1 ...)

等待这个 minimap 函数的实现从 Atom 切换。

@techsin这不是一个真正的基本功能..更多的是个人喜好。
然而,据我所知,到目前为止,API 还不允许将自定义元素呈现到这种程度,因此即使尝试创建这样的扩展也不太可行。

@sapiraz我同意你的看法,它对于文本编辑器来说不是必需的,但我也认为这是 Sublime Text(或 Atom)如此受欢迎的原因之一。 这是一个让人着迷的“关键”功能! 举个例子,假设每个编辑器都有黑色文本和白色背景,一个新的文本编辑器提供了根据你的意愿进行更改的选择。 当然,对于文本编辑器的目的来说,这并不是很重要,但它极大地增强了体验,以至于人们准备将他们的好编辑器留给这个编辑器。 我认为这就是这里发生的事情。 UX 也是必不可少的 ;)

用户体验是必不可少的,它区分了良好的体验和当你觉得“这不对”或“我真的很想念那个”时的超级烦人的感觉。

这与拥有良好的快捷方式和搜索没有什么不同。 这些对编码很重要吗? 不是真的,但我可以用文本编辑器编码......

我需要在这里同意@sapiraz ,这对很多人来说可能是一个不错的功能,甚至是一个重要的功能,但不要称之为基本功能。 到目前为止,Sublime 是唯一一个将此作为默认设置的编辑器(在 Atom 上是 abe33 的扩展),而 Sublime 缺少 Code 提供的滚动条扩展功能。

对我来说,速度和稳定性是更好的特性,也是真正“基本”的特性,如果团队正在努力以最好的方式实现这一点,我会一直给他们需要的时间。

@jfcartier , @JonnyBGod当然用户体验很重要。
我也喜欢其他编辑器中的小地图功能,希望很快能在 VSCode 中看到它......但我们不要称之为它不是 - 一个基本功能。

您无法真正将其与快捷方式、搜索、复制/粘贴甚至配色方案支持进行比较,因为这些功能非常重要,并且为工作环境增添了如此明显的价值(是的,即使配色方案也很重要——我眼睛疲劳,每天坐在明亮的白色屏幕前 9 小时对我的眼睛没有任何好处)而小地图根本没有提供如此重要的可用性,以至于您离不开它。

如果有人问你小地图增加了什么价值,除了“看起来不错”之外,你能提出一个很好的论点吗? 我不能。
同样,我喜欢这个功能,在使用 Sublime text 和 Atom 之后,我真的很喜欢把它放在一边,只是为了对我的位置有一点了解。 但有必要吗? 不。
可以滚动,你可以看到你的文件的内容,你会看到当前滚动条上的一些提示,为什么在一个不可读的小版本中看到你的代码对你有用?

我现在正在多个项目上使用 VSCode,并且由于缺乏其他现代编辑器具有的真正基本功能而选择它。其中包括性能和稳定性(嗯,括号)、多语言支持(崇高)、本机支持Web 语言和 Intellisense(抱歉 Atom)甚至是原生的、易于使用的扩展安装程序(再次是 Sublime)

有人问你小地图增加了什么价值,除了“看起来不错”之外,你能提出一个好的论点吗?

是的。 它极大地帮助导航大文件。 至少这就是我非常想念它的原因。

@fredrikaverpil好吧,我认为“基本上”有点夸张,但可以肯定。
仍然无法真正将其与搜索或复制/粘贴进行比较。

@fredrikaverpil还有其他有用的方法可以导航大文件。 @sapiraz是对的,因为这不是一个基本功能,将它与真正的基本功能(如粘贴时自动缩进..来吧!)进行比较有点牵强。

也就是说,我认为我们可以_所有人_同意我们真的希望以一种或另一种方式提供它。

这个线程已经转了一个匿名者,看这是我目前在 VSCode 中想念的一个功能。 如果它可以在即将到来的版本中实现,如果不能,那将是一种耻辱,但我会努力应对。

@sapiraz我完全同意你的论点,不会仅仅为了反驳而反驳他们,因为我认为任何脚踏实地的人都会这么说。 但是有一个但是(这是我在这里的最后一篇文章,足够的垃圾邮件哈哈)

除了“看起来不错”之外,你还能提出一个好的论点吗? 我不能。
...
为什么在不可读的小版本中看到您的代码对您有用?

不要说它没有用,因为你不这么看。 通常,要判断某些东西是否有用,统计数据很有帮助,但我没有,所以我只能依靠所有不会因此而使用 VS 的人(包括我自己)! 这不是什么。 当然,我想我们都同意这显然是对变革的抵制,但我们仍然说它对我们有用,通过个人判断来降低它的重要性不是很科学。

如果我可以提供一个论点。 这是一个:
default
(精确)因为我知道我的代码,所以我知道我已经通过它的形状改变了 Db 查询。
(速度)一按,我就可以到达那里。 没有滚动。
(UX) 如果你在大文件中工作,它会有很大帮助。 它给人一种掌控一切的感觉,所以你不必搜索。

我很高兴在二月迭代计划 #20021 中看到这个功能

我们将在 3 月初满足此功能
谢谢你的工作@all

一旦发货,用户是否能够完全禁用它?

我不在乎为了渲染另一个较小的视图而将任何性能从一个地方移动到另一个地方。

我会坚持/?搜索,因为我拥有我需要的一切。

+1 用于小地图。 Rly w8ing

好像已经可以在 Insiders 版本中使用了,
不过必须在设置中启用,将“editor.minimap.enabled”设置为 true :)

我在内部人员版本中尝试了小地图,看起来很棒!

几个建议:

  • 我希望能够单击并拖动窗口区域,类似于单击并拖动滚动条。
  • 我想要一个editor.minimap.width设置来玩,小地图对我来说有点太宽了。

PS:表演太棒了,给你们点赞!

请确保高光在小地图中确实可见(例如运行查找功能),因为在 Sublime 中,即使它们被高亮显示,高光仍然非常小,以至于您几乎必须浏览整个文件......

谢谢收听😄

能够向上滚动会很好......(比如 Sublime)
目前它似乎只是点击它:-(

伟大的工作——非常感谢!

2月19日2017年21:20,姆拉登Mihajlović在[email protected]
写道:

请确保高光在小地图中确实可见(例如
运行查找函数),因为在 Sublime 中,即使它们是
突出显示,亮点是如此之小,以至于你几乎不得不去
无论如何通过整个文件......

谢谢收听😄


您收到此消息是因为您订阅了此线程。
直接回复本邮件,在GitHub上查看
https://github.com/Microsoft/vscode/issues/4865#issuecomment-280949966
或静音线程
https://github.com/notifications/unsubscribe-auth/AATV7DaFs9W2PNnpIYzmSIQQqaIDv60Sks5reLIJgaJpZM4H93xs
.

能够通过单击/拖动覆盖蒙版来滚动。 与 atom、sublime text、括号、geany 等相同

可以调整放大倍数吗? 有时我想让它更大或更小的字体大小取决于我的工作。

感谢您对此功能请求的耐心等待。

基本

  • 我们使用了与 Visual Studio 不同的小地图几何图形。
  • 我们提供两种灰度“字体”,一种字符为 4x2(4px 高和 2px 宽 - 缩写为x2 ),另一种字符为 2x1(2px 高和 1px 宽 - 缩写为x1 )。
  • 根据devicePixelRatio或缩放级别,我们将选择x2x1小地图字体。 这意味着在视网膜设备或其他高像素比设备(例如 Surface Books)上, x2字体将在zoomLevel 0 处被选择,而在其他设备上, x2字体将被选中仅在使用zoomLevel 4 及以上时才被选中。
  • 这意味着一条线在小地图中获得固定数量的垂直屏幕空间,4px 或 2px。
  • 如果文件的行数超出了小地图的容量,小地图将滚动

minimap-geometry


关于字体的注释

  • 小地图中的每个字符都是根据这些x2x1字体绘制的
  • 这是 800% 缩放的x2字体。 你能读懂那里有什么吗:

image

  • 如果您对此充满热情,我很乐意在微调这些字体方面得到您的帮助。 他们住在这里

试一试

"editor.minimap.enabled": true在内部人士频道


做了什么

字符/令牌渲染代码的形状足够好(性能方面)可以传送它:前一帧的像素根据需要复制到下一帧,使小地图渲染大部分时间低于 1 毫秒。 在某些情况下(例如缩小的自动换行文件,跳转到不同的垂直位置),它可能需要几十毫秒,但总的来说,我对字符渲染代码有些满意。

还剩下什么

还有很多事情要做。 仅举几例:

  • 小地图:实现拖动小地图滑块。 #20935
  • 小地图:2x1 字体不规则太多 #20929
  • 小地图:将其宽度限制为最大 150 像素 #20931
  • 小地图:在小地图中渲染多个字符 #20934
  • 小地图:添加选项来渲染块而不是字符 #20947

有些是花费更多时间的问题,而另一些则更具挑战性(例如,如果小地图之外的错误被绘制在某处,我们是否可以让小地图接管对概览标尺的需求等)

我们将使用标签editor-minimap跟踪所有与小地图相关的问题,此时我想关闭此问题。

让我们继续讨论涉及不同方面的具体问题,其中一些将在 2 月份完成,而我们将在稍后解决其他问题。

@alexandrudima

这个评论呢? https://github.com/Microsoft/vscode/issues/4865#issuecomment -255368352

我更喜欢它而不是不可读的小文本,它提供了我需要的信息。 我不确定这会有多困难,但从它的声音来看,您可以创建一种新字体,其中每个字符都只是一个实心方块,减去空格。

@sprinkle131313我已将您的评论提取到一个单独的问题 - #20947。

让我们继续讨论特定的单独问题,如果您没有发现现有问题,请随时创建新问题。 我将继续通过链接更新我上面的评论,以便我们都可以参与具体讨论。

谢谢! 愿意看到它稳定!

问题:是否可以让小地图也成为光标? 这是 VS 中的默认行为,这就是我认为这两个应用程序之间的主要区别。 另请注意,我确实安装了insiders版本来测试它

_编辑_
没关系,刚刚意识到有一个未解决的问题 #20935

@alexandrudima感谢#20947。 是否可以将"editor.minimap.renderCharacters": false作为默认渲染块而不是文本? IMO 它看起来更令人愉悦并且具有更好的可用性。

image

当我越过文本或块时,我希望能够进行缩放(这取决于最终方法)。 目前,我无法阅读任何内容或知道我在代码的哪一部分,如果您正在处理大量代码,这很有用。
此外,我发现如果我保持点击并尝试在小地图上滚动或移动没有任何反应,我需要停下来点击并选择代码的另一部分。

@FANMixco我在考虑你的请愿书,但我目前不确定你为什么需要这样的功能,因为如果你点击小地图,代码会滚动到那个点而不移动光标,所以它实际上是一样的作为悬停/缩放。 也许悬停比点击更有效?

@druellan ,我相信@FANMixco正在谈论一个小地图缩放功能,该功能已经在常规 Visual Studio 中,如下所示
minimap_zoom

编辑
忘了提到缩放只有在停留在小地图上 2 秒后才会显示。 如果你翻过小地图并开始滚动,缩放不会显示,你真的需要停止滚动并等待 2 秒才能看到它。

如果@ghiscoding关于@FANMixco功能是正确的,那么它绝对应该是可选的,因为我认为很多人(和我一样)不喜欢弹出窗口。

谢谢@ghiscoding ,现在更清楚了。 我仍然有点相信这不是对点击+滑动机制的巨大改进,事实上,在没有小地图的情况下,在增强的滚动条本身上看起来更有用。 一种独立的功能,而不是小地图功能的一部分。

关于@pohmelie 的建议,我完全同意,但我相信这也可以附加到快捷键修饰符上,例如滚动条/小地图上的 ctrl+hover 以触发该功能。

@druellan这也与 Atom 上的https://atom.io/packages/minimap-codeglance扩展相同。 11,000 次下载似乎表明很多人喜欢/需要它。

我个人不这样做,因此如果您确实实施了它,请将其设为可选。 触发器/热键机制听起来不错,但特别是如果它在滚动条和小地图上实现。

有没有办法像 toggle-sidebar(ctrl-b) toggle-panel(ctrl-j) 那样切换它?

我喜欢新的小地图。 我缺少的一件事是突出显示通过搜索或查找重复找到的文本。 我附上了两个截图来形象化这件事。

image
image

不错的功能家伙!

💃

@sixenvi我建议您添加我提出的单独功能请求 #21404 ,因为您的请求与我的非常相似并且是一个未解决的问题,因此至少它已被跟踪。

我不确定 VSCode 团队是否阅读了关于已关闭问题的评论或请求,就像这里的这个。

@druellan ! 是的, @ghiscoding就是我的意思,也许我们可以配置一下时间,因为它有点混乱。

嗨,大家好! 如果 VS Code 只是错过了一个功能,那就是这个,现在它已经完成了! 如此出色的实现和出色的性能。 ( @alexandrudima一如既往地让我着迷!)

我注意到的一件简单的事情:

out-of-screen-scroll

好找。 我认为您应该提交一个新的错误,因为它已关闭。 VSCode 团队
可能看不到。

在周五,2017年3月3日在上午07时51分Pouya雨霏[email protected]写道:

嗨,大家好! 如果 VS Code 只是错过了一项功能,那就是这个,并且没有
没有我希望拥有的东西! 这么好的实现和伟大的
表现。 (一如既往,你让我着迷!)

我注意到的一件简单的事情:

[图像:屏幕外滚动]
https://cloud.githubusercontent.com/assets/2157285/23557582/c264e420-0045-11e7-9ea6-8789f30db9de.gif


你收到这个是因为你被提到了。
直接回复本邮件,在GitHub上查看
https://github.com/Microsoft/vscode/issues/4865#issuecomment-283990000
或静音线程
https://github.com/notifications/unsubscribe-auth/AA-JVANXdhu57m4hlAODRcV6qhsNGzgrks5riDb3gaJpZM4H93xs
.

@nojvek啊没注意到! 好吧,还有一个问题……

我认为还有一件事会很棒 - 不要隐藏小地图上的当前位置(目前它仅在鼠标悬停时可见)。
image
可能最好在设置中再添加一个键。

@Andrfas这是在 #21404 和 #21784 下跟踪的。

作为建议,你们应该停止编写不再跟踪的已关闭问题并搜索/打开新问题。

我想要滚动条按钮。

我们可以仅在鼠标悬停在边缘时才显示地图或滚动条吗

@gauravsaini这是一个封闭的问题

有没有办法使用旧版本? 在我的一个在线课程中,老师使用了地图,它对代码块进行了分类,代码太多,侧栏上根本不可读,因此忽略看代码要好得多,但将代码按代码分类块。

@deadmann如果您想关闭小地图,只需进入您的设置并找到:

// Controls if the minimap is shown
  "editor.minimap.enabled": true,

并将其设置为false。 无需返回旧版本。

@deadmann如果您想关闭小地图,只需进入您的设置并找到:

// 控制是否显示小地图
“editor.minimap.enabled”:真,
并将其设置为false。 无需返回旧版本。

我想要小地图,其实我是激活的,但是我想要更简单的形式,当我的代码越来越长,而且线条很长时,看小地图并不简单,我的意思是,你能吗?真的读过这个吗?

x

我发现它,另一个系统,我们有一个大项目,我只是想告诉你,在这种情况下它可能无法读取,它出现的地方,可能是由于在该平台上使用了不同版本的 VS,或者因为文件太长了。 但这就是我在图像中显示的内容。

此页面是否有帮助?
0 / 5 - 0 等级