Visual Studio Code中的垂直标尺？

Question

如何在Visual Studio代码中配置垂直标尺(注意复数)？

在Sublime Text 2中我做到了

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

也不

"editor.rulers": [72, 80]

也不

"editor.ruler": 80

似乎工作.

Answer 1

VS Code 0.10.10引入了这个功能.要进行配置,请转到文件 > 首选项 > 设置,然后将其添加到您的用户或工作区设置:

"editor.rulers": [80,120]

标尺的颜色可以像这样定制:

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

Answer 2

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

例如,python项目的样式指南通常指定79或120个字符.

所以,在你的git,你会说:

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

Answer 3

使用Visual Studio Code 1.27.2,当我转到文件>首选项>设置时,我得到以下选项卡.

我在搜索设置中输入标尺,我得到以下设置列表.

单击settings.json中的第一个Edit,我可以编辑用户设置.

单击默认用户设置中设置左侧显示的笔图标,我可以将其复制到用户设置并进行编辑.

Answer 4

在 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"
  },
], 

Answer 5

\xc2\xa0

\n

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

\n\n

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

\n

为了您的方便，我在每个配置示例的底部都包含了图像。这些图像允许您查看配置，然后查看配置的结果。这很重要，因为如果没有图像，您将不得不在此处和编辑器之间来回切换才能查看每个配置的外观。

\n
\n
\n
\n\n

配置 #1 | 明显的单标尺配置

\n\n

最明显的设置是已经被多次建议的设置。我会在这里提到它，只是因为它是正确的起点。

\n

\n
• 将以下JSON 属性添加到您的settings.json文件中。
\n

\n

\n{\n    "editor.rulers": [80]\n}\n\n

\n

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

\n

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

\n

\n
\n
\n\n

配置 #2 | 多个标尺

\n\n

显然，标尺将一个数组作为其指定值。该阵列允许 VSC 用户添加多个标尺。

\n

\n
• 只需在上一个示例中的配置中添加一个值（如下面的代码片段所示），我们就可以添加另一个标尺。
\n

\n

{\n    "editor.rulers": [80, 125]\n}\n

\n

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

\n

\n
\n
\n
\n\n

配置 #3 | 给尺子上色

\n\n

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

\n

{\n    "workbench.colorCustomizations": {\n        "editor-ruler.foreground": "#0099AA"\n    },\n\n    "editor.rulers": [80, 125]\n}\n

\n

下面你就可以看到太平洋蓝的魅力了！

\n

\n
\n
\n
\n\n

配置 #4 | 给标尺着色，使其可以与代码一起使用

\n\n

因此，尽管美丽的太平洋蓝色尺子很漂亮，但它们并不总是实用。不透明的 \xe2\x80\x94以及在本例中紧随其后的高度对比度的 \xe2\x80\x94 标尺条纹是可以大大降低代码可读性的代码。正是出于这个原因，开发人员通常选择将单个标尺放置在所需线长度处的配置，但是，还有另一种方法。通过稍微调整之前的配置，我们可以以一种侵入性更小的方式渲染标尺。看看下面的配置。

\n

你看到微妙的变化了吗？

\n

{\n    "workbench.colorCustomizations": {\n        "editor-ruler.foreground": "#0099AA33"\n    },\n\n    "editor.rulers": [80, 125]\n}\n

\n

下面演示了更改的位置：

\n

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

\n

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

\n

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

\n

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

\n

\n
\n
\n
\n\n

配置 #5 | 终极定制尺子

\n\n

透明标尺的问题在于它们不像其他标尺那么花哨，幸运的是，有一种方法可以两全其美。此示例使用两张图像（或屏幕截图）：一张显示配置的图像，就像您在上面查看的其他图像一样，另一张是显示我使用的配置的最终图像。我使用的配置是一种帮助您了解通过良好的标尺配置能够完成的任务的方法。

\n

下面是一种疯狂的配置......

\n

{\n    "workbench.colorCustomizations": {\n        "editorRuler.foreground": "#00999922"\n    },\n\n    "editor.rulers": [\n        20, 40, 40, 60, 60, 60, 60, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80\n    ]\n}\n\n

\n

我知道疯了对吧？！

\n
\n

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

\n
\n

这是结果：

\n

\n
\n

注意到发生了什么吗？

\n

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

\n\n
\n
\n

正如我上面所说，我将向您展示我使用此效果来配置我的环境：

\n

\n
\n

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

\n

如果我从事的项目的风格指南强制执行 80 个字符的限制，我通常会将一行放在 80 个字符处，另一行放在 90 个字符处。我编写的代码会在 80 个字符之前或之后中断，但是我个人不喜欢 80 个字符的限制，我觉得标准应该是 85 - 90 个字符。80确实让开发者感觉像是被推到了一个盒子里。因此，如果我不喜欢一行看起来 80 的方式，我会将其扩展到 90。在提交之前，我查看文件，我可以快速看到超过 80 的所有地方，我添加换行符，犯罪。然后我使用 ctrl+z 重置换行符，使其延伸超过 80。

\n

另一个目的是，当我评论时，我更喜欢在 70 处结束我的评论，它可以帮助我在视觉上区分评论和代码。当您有了额外的行时，您很有可能开始使用它们来完成各种您自己的小格式定制。

\n\n
\n
\n
\n
\n\n

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

\n

在 VS Code 中重新加载窗口

\n

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

\n

Answer 6

VS代码:版本1.14.2(1.14.2)

1. 键入Shift+ Command+ p以打开面板.
2. 输入"settings.json"打开设置文件.

3. 在默认设置下,您可以看到:

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

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

4. 在右侧窗口"用户设置"中,添加以下内容:

   "editor.rulers": [140]

保存文件,您将看到标尺.

Answer 7

1. 文件 -> 首选项 -> 设置或cntrl+,
2. 输入“rulers”并单击“编辑Settings.json”

3. 根据需要通过“,”添加尺寸值

像这样（GIF）

Answer 8

将kiamlaluno 和 Mark的答案以及 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"
        },
    ],

}

Answer 9

要扩展上述内容，您可以为每个标尺设置多个标尺和颜色。默认颜色显示为“#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
],