Visual Studio Code中的垂直标尺

在VS代码中渲染多个标尺

VS Code的标尺默认配置如下所示。

  "editor.ruler": 80

我在默认VS Code配置（如上图所示）中遇到的问题是它只渲染单个标尺。在崇高文本编辑器中，我可以使用以下Sublime配置渲染任意数量的标尺。

  "rulers": [72, 80, 100, 120]

是否可以在V. S.代码中渲染多个标尺。如果可能，VS代码中的多标尺配置是什么样子？

628427 次浏览
小开
最佳答案

Visual Studio Code 0.10.10引入了此功能。要配置它，请转到菜单文件→偏好→设置并将其添加到您的用户或工作区设置中：

"editor.rulers": [80,120]

尺子的颜色可以像这样定制：

"workbench.colorCustomizations": {"editorRuler.foreground": "#ff4081"}
小开

Visual Studio代码：版本1.14.2（1.14.2）

  1. 按Shift+命令+P打开调色板

    • 对于非macOS用户，请按Ctrl+P

  2. 输入settings.json打开设置文件。

  3. 在默认设置下，您可以看到：

    // Columns at which to show vertical rulers"editor.rulers": [],

    这意味着空数组不会显示垂直标尺。

  4. 在右侧窗口“用户设置”中，添加以下内容：

    "editor.rulers": [140]

保存文件，您将看到标尺。

小开

除了全局"editor.rulers"设置外，还可以在每个语言级别上设置它。

例如，Python项目的样式指南通常指定79或120个字符，而Git提交消息不应超过50个字符。

所以在你的settings.json中，你会放：

"[git-commit]": {"editor.rulers": [50]},"[python]": {"editor.rulers": [79,120]}
小开

使用Visual Studio Code 1.27.2：

  1. 当我转到文件>首选项>设置时，我得到以下选项卡

    截图

  2. 我在搜索设置中输入统治者，得到以下设置列表

    截图

  3. 点击第一个编辑settings.json，我可以编辑用户设置

    截图

  4. 单击出现在默认用户设置中设置左侧的笔图标，我可以在用户设置上复制它并编辑它

使用Visual Studio Code 1.38.1，第三点显示的屏幕截图更改为以下内容。

在此处输入图片描述

小开

在v1.43中，可以单独为垂直标尺着色。

参见问题支持多种颜色的标尺-（settings.json）：

"editor.rulers": [{"column": 80,"color": "#ff00FF"},100,  // <- a ruler in the default color or as customized (with "editorRuler.foreground") at column 100{"column": 120,"color": "#ff0000"},]

要更改标尺的默认颜色：

"workbench.colorCustomizations": {
"editorRuler.foreground": "#fffa"// or "#ffffffaa" - the a's are alpha transparency values}
小开

结合kiamlaluno的答案和马克，以及formatOnSave到Python的自动意图代码：

{"editor.formatOnSave": true,"editor.autoIndent": "advanced","editor.detectIndentation": true,"files.insertFinalNewline": true,"files.trimTrailingWhitespace": true,"editor.formatOnPaste": true,"editor.multiCursorModifier": "ctrlCmd","editor.snippetSuggestions": "top","editor.rulers": [{"column": 79,"color": "#424142"},100, // <- a ruler in the default color or as customized at column 0{"column": 120,"color": "#ff0000"},],
}
小开

要扩展上述内容，您可以为每个标尺设置多个标尺和颜色。默认颜色出现为“#5a5a5a”，如果您在末尾添加两个额外的数字，您可以调整其透明度，使一些标尺比其他标尺更暗。

这是我的尺子，以简洁的方式定义，更容易编辑。

"editor.rulers": [{"column":   0, "color": "#5a5a5a80"}, // left boundary is 50% opaque{"column":   2, "color": "#5a5a5a20"}, // tab stops are 12.5% opaque{"column":   4, "color": "#5a5a5a20"},{"column":   6, "color": "#5a5a5a20"},{"column":   8, "color": "#5a5a5a20"},{"column":  10, "color": "#5a5a5a20"},{"column":  40, "color": "#5a5a5a20"}, // center line{"column":  79, "color": "#5a5a5a20"}, // right rule minus one{"column":  80, "color": "#5a5a5a80"}, // right rule{"column": 120, "color": "#5a5a5a40"}  // extra right rule],
小开

转到菜单文件->首选项->设置并添加

"editor.rulers": [preferred-value, preferred-value]

颜色可以定制在

workbench.colorCustomizations
小开
  1. 文件->首选项->设置或cntrl+,
  2. 键入“标尺”并单击编辑Setings.json

输入图片描述3.根据需要添加大小值

输入图片描述像这样（Gif）

在此处输入图片描述

小开

 

自定义VS Code的Char-len标尺：

      因此，以下答案比该问题的其他答案更新得多；重要的是要注意，此答案包含任何其他答案所不提供的信息和内容。我将以下问题格式化为4种配置。每个配置都构建在最后一个配置之上，因此；第一个配置很简单，提供了简单的结果，而最后一个配置更复杂，提供了更多。

为了方便起见，我在每个配置示例的底部都包含了图像。图像允许您查看配置，然后查看配置的结果。这很重要，因为如果没有图像，您将不得不在此处和编辑器之间来回弹跳，以查看每个配置的样子。




配置#1|显而易见的单一标尺配置

明显的设置是已经多次提出的设置。我将在这里提到它，只是因为它是正确的起点。

  • 将以下JSON属性添加到您的settings.json文件中。
{"editor.rulers": [80]}

请注意！可能需要重新加载VS代码（从语义上讲：有些人把这称为重新加载窗口）的实例，以获取新添加的配置以按预期呈现。（要查看如何快速重新加载窗口，请滚动到此答案的末尾）。

配置完成后，您的编辑器应如下所示：

当VS Code中的editor.ruler设置配置为单个值时，图像显示结果



配置#2|多个标尺

显然，标尺将数组作为其赋值。该数组允许VSC用户添加多个标尺。

  • 在最后一个示例（如下面的片段所示）中，只需向配置添加一个值，我们就可以添加另一个标尺。
{"editor.rulers": [80, 125]}

我拍摄的屏幕截图有点短，但它很好地传达了这一点。您可以看到现在有两条垂直线，而不是一条垂直线。许多前端开发人员选择这种配置，因为125通常被用作超文本标记语言的首选线长，而80是嵌入超文本标记语言文档的JavaScript的首选线长。

当VS Code中的editor.ruler设置配置了多个值时，图像会显示结果




配置#3|为标尺着色

此配置演示了使用VS Code配置的异想天开的一面；标尺当然是VS Code附带的更异想天开的编辑器功能之一。此配置向您展示了如何为我们上面使用的配置着色。要能够自定义标尺的颜色，需要在配置中添加额外的设置，请看下面：

{"workbench.colorCustomizations": {"editor-ruler.foreground": "#0099AA"},
"editor.rulers": [80, 125]}
下面你可以看到太平洋蓝色的令人敬畏的颜色！

在此处输入图片描述




配置#4|为标尺着色，使其在代码下工作

所以，尽管漂亮的太平洋蓝色标尺很棒，但它们并不总是实用的。紧随其后的不透明的在这种情况下，高度对比标尺条纹会大大降低代码的易读性。出于这个原因，开发人员通常选择在所需的行长放置单个标尺的配置，然而，还有另一种方法。通过稍微调整之前的配置，我们可以以一种更少侵扰的方式渲染标尺。请看下面的配置。

你看到微妙的变化了吗？
{"workbench.colorCustomizations": {"editor-ruler.foreground": "#0099AA33"},
"editor.rulers": [80, 125]}

下面演示了更改的位置：

  • 第三种配置中使用的颜色：
    • "editor-ruler.foreground": "#0099AA"
  • 第四种配置中使用的颜色：
    • "editor-ruler.foreground": "#0099AA33"

新配置调整后的色度值（颜色/色调）呈现透明（或不是100%不透明度），换句话说；标尺呈现为部分透明（大约25%透明度）。

这种变化有相当显著的影响，因为不透明标尺阻碍了代码的易读性，并且会分散程序员对代码的注意力。程序员可能会选择透明标尺，因为透明标尺允许她在她选择的任何长度间隔测量代码的长度，而不会影响代码的易读性。

看到下面的透明标尺了吗？您可能希望单击图像以查看更大的视图。

在VS Code中显示彩色标尺的示例




配置#5|终极定制标尺

透明标尺的问题是它们不像其他标尺那么花哨，幸运的是，有一种方法可以两全其美。这个例子使用了两个图像（或屏幕截图）：一个图像显示配置，就像你在上面查看的其他图像一样，另一个是显示我使用的配置的最终图像。我使用的配置是为了帮助你透视一个好的标尺配置所能完成的事情。

下面是一个疯狂的配置…
{"workbench.colorCustomizations": {"editorRuler.foreground": "#00999922"},
"editor.rulers": [20, 40, 40, 60, 60, 60, 60, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80]}

我知道疯狂对吧？


这个配置看起来很疯狂，但它实际上产生了一个非常有趣的、高度定制的结果。我真的很喜欢这个例子，因为它很好地演示了标尺数组属性配置的工作原理，以及可以用它完成什么。


这就是结果：

多个透明标尺


注意到发生了什么？

每个标尺都比上一个更亮。标尺之所以这样做，是因为我们在彼此之间放置了几根透明的标尺。随着层的增加，标尺的颜色变得更加饱和。这是一个非常有趣的效果。



就像我上面说的，我将向您展示我使用这种效果来配置我的环境：

自定义环境中的自定义标尺


请注意，除了最后两个之外，我使所有的标尺都非常透明。这提供了一个时髦的环境，同时仍然保持实用。拥有多个标尺还可以帮助我格式化和组织我的代码。我现在非常习惯拥有它们，以至于我很难在没有它们的环境中工作。

如果我在一个项目中使用强制执行80个字符限制的样式指南，我经常会将一行放在80，另一行放在90。我编写代码时，它会在80个字符之前或在80个字符处中断，但我个人不喜欢80个字符的限制，我觉得标准应该是85-90个字符。80真的让开发人员感觉被推入了一个盒子。所以如果我不喜欢一行看起来像80的方式，我会将它扩展到90。在我提交之前，我查看文件，我可以很快看到我超过80的任何地方，我添加换行符，提交。然后我使用ctrl+z重置换行符，以便扩展到80。

另一个目的是，当我注释时，我更喜欢以70结束我的注释，这有助于我在视觉上区分注释和代码。当你有额外的行时，你很有可能开始使用它们来做各种你自己的小格式化习俗。





下面的资源仅适用于那些需要重新加载VS Code实例的指导的人。

在VS代码中重新加载窗口

要重新加载窗口，请按F1打开快速输入菜单。您应该看到菜单下拉打开，键入Developer: Reload Window，然后从下拉菜单中选择Developer: Reload Window选项。

小开

如果您使用的是Flutter，那么您需要编辑dart的标尺，您将从RUN命令导航到文件：%APPDATA%\code\User\settings.json

并将标尺设置为0

就像在图片中一样settings.json


提交答案