为什么 VS Code 中的 Flutter 指导线断了答案

【问题标题】：Why are the Flutter guide lines broken in VS Code为什么 VS Code 中的 Flutter 指导线断了
【发布时间】：2020-10-04 08:07:13
【问题描述】：

为什么 Flutter 的指南在 VS Code 中被分解成小块（如屏幕截图所示）。此功能来自 VS Code 的官方 Flutter 扩展。有解决办法吗？我已经尝试关闭和打开所有设置，卸载 Flutter 插件。

【问题讨论】：

你希望它们消失还是你希望它们成为一条实线？
我希望它们是实线
你检查过其他 VSCode 主题吗？也许他们正在根据您的主题进行样式设置。
是的，我已经尝试过默认的 Visual Studio 主题和 Material Theme 扩展。没有工作。

标签： flutter visual-studio-code

【解决方案1】：

在 VS Code 中，如果您前往 File->Preferences->Settings，搜索“previewFlutter”。那应该给你Dart: Preview Flutter Ui Guides 选项。确保取消选中该选项，并且在保存并重新启动 VS Code 后应该删除这些行！

编辑：

考虑到您想要线条但希望它们是实心的，前往文件->首选项->设置并将Editor: Line Height 设置为 17 使它们实心。这是我的编辑器的最佳选择，但这取决于你的字体大小（我的是 14）。确保选中Dart: Preview Ui Guides！

【讨论】：

我希望线条合并成一条实线，而不是删除它们。
哦，我明白了，在那种情况下，我相信这是编辑器行高的问题。在我的编辑器中，将行高更改为 17 会删除准则之间的空间并使其变得稳固。 17 似乎是最佳位置，但您可能需要稍微调整一下。希望对您有所帮助！
嘿嘿！谁知道字体行高会弄乱 indentGuides ！不错的收获！另外，您可以设置"editor.lineHeight" = 0 让VSCode 根据字体大小自行调整行高。不必每次都更改字体和行高。

【解决方案2】：

{
    "workbench.colorCustomizations": {
        "editorIndentGuide.activeBackground": "#ffffffa2",
        "editorIndentGuide.background": "#efefef70",
    },
    // most probably these are responsible
    "dart.previewFlutterUiGuides": false,
    "dart.previewFlutterUiGuidesCustomTracking": false
}

这里有一些设置可以添加到你的 settings.json 中，它可以帮助你解决问题。

【讨论】：

【解决方案3】：

我也在寻找这个选项。如果我更改行高，所有代码都会变得过于密集，我不喜欢它的外观。

所以，最后，当我为我的编辑器寻找更好的字体时，我突然意识到 Fira Code 解决了这个问题！

只需将 FiraCode-Regular 放入 Preferences -> Settings -> Editor: Font Family 就可以了。我希望如此。

Screenshot of solid guide lines in VSCode

【讨论】：