Visual Studio Code 中的垂直标尺

Visual Studio Code 0.10.10 引入了此功能。要对其进行配置，请转到菜单文件 → 首选项 → 设置并将其添加到您的用户或工作区设置：

"editor.rulers": [80,120]

可以像这样自定义标尺的颜色：

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

---

除了全局 "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：

当我转到文件>首选项>设置时，我得到以下选项卡我在搜索设置中键入标尺并得到以下设置列表单击settings.json中的第一个编辑，我可以编辑用户设置单击钢笔图标出现在默认用户设置中的设置左侧我可以将其复制到用户设置并进行编辑

在 Visual Studio Code 1.38.1 中，第三点显示的屏幕截图变为以下屏幕截图。

https://i.stack.imgur.com/k1Vf0.png

不再显示用于选择默认用户设置值的面板。

---

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

请参阅问题 Support multiple rulers with different colors -（在 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
}

---

Visual Studio 代码：版本 1.14.2 (1.14.2)

按 Shift + Command + P 打开调色板 对于非 macOS 用户，按 Ctrl+P 输入“settings.json”打开设置文件。在默认设置下，您可以看到： // 显示垂直标尺的列 "editor.rulers": []，这意味着空数组不会显示垂直标尺。在右侧窗口“用户设置”中，添加以下内容：“editor.rulers”：[140]

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

---

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

---

File -> Preferences -> Settings 或 cntrl+，输入“rulers”并点击 Edit Settings.json

https://i.stack.imgur.com/riSGq.png

https://i.stack.imgur.com/0pDlU.png

https://i.stack.imgur.com/K1jMn.gif

---

将 the answers of kiamlaluno and 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"
        },
    ],

}

---

自定义 VS Code 的 Char-len Ruler：

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

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

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

显而易见的设置是多次建议的设置。我会在这里提到它，只是因为它是正确的起点。

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

{
    "editor.rulers": [80]
}

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

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

https://i.stack.imgur.com/pUz5h.png

配置#2 |多个标尺

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

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

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

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

https://i.stack.imgur.com/fVo0I.png

配置#3 |给尺子上色

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

{
    "workbench.colorCustomizations": {
        "editor-ruler.foreground": "#0099AA"
    },

    "editor.rulers": [80, 125]
}

下面你可以看到太平洋蓝色的真棒！

https://i.stack.imgur.com/YEr87.png

配置#4 |为标尺着色，使其与代码一起工作

因此，尽管美丽的太平洋蓝色标尺令人敬畏，但它们并不总是实用的。不透明的（在这种情况下是高度对比的）标尺紧随其后的是可以大大降低代码可读性的代码。出于这个原因，开发人员通常选择将单个标尺放置在所需线长的配置，但是，还有另一种方法。通过稍微调整以前的配置，我们可以以一种不那么干扰的方式渲染标尺。看看下面的配置。

你看到细微的变化了吗？

{
    "workbench.colorCustomizations": {
        "editor-ruler.foreground": "#0099AA33"
    },

    "editor.rulers": [80, 125]
}

下面演示了更改的位置：

第三个配置中使用的颜色：“editor-ruler.foreground”：“#0099AA”

"editor-ruler.foreground": "#0099AA"

第 4 种配置中使用的颜色：“editor-ruler.foreground”：“#0099AA33”

"editor-ruler.foreground": "#0099AA33"

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

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

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

https://i.stack.imgur.com/BT2WD.png

配置#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
    ]
}

我知道疯了吧？！

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

结果如下：

https://i.stack.imgur.com/RuBp2.png

注意发生了什么？

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

就像我上面说的，我会告诉你我使用这个效果来配置我的环境：

https://i.stack.imgur.com/OcRzI.png

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

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

在 VS 代码中重新加载你的窗口

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

---

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

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

颜色可以定制

workbench.colorCustomizations

---