Visual Studio 代码中的垂直标尺
Vertical rulers in Visual Studio Code
如何在Visual Studio代码中配置垂直标尺（注意复数）？
在 Sublime Text 2 中我可以做到
"rulers": [72, 80, 100, 120]
这在 Visual Studio 中如何运作？
"editor.ruler": 80
只生成一个垂直标尺。
Visual Studio 代码 0.10.10 引入了此功能。要配置它，请转到菜单 File → Preferences → Settings 并将其添加到您的用户或工作区设置：
"editor.rulers": [80,120]
尺子的颜色可以这样定制：
"workbench.colorCustomizations": {
"editorRuler.foreground": "#ff4081"
}
Visual Studio 代码：版本 1.14.2 (1.14.2)
按Shift + Command + P打开调色板
- 对于非 macOS 用户，请按 Ctrl+P
输入“settings.json”打开设置文件。
在默认设置下，您可以看到：
// Columns at which to show vertical rulers
"editor.rulers": [],
这意味着空数组不会显示垂直标尺。
在右侧window“用户设置”，添加如下内容：
"editor.rulers": [140]
保存文件，您将看到标尺。
除了全局 "editor.rulers" 设置外，还可以在每种语言级别上进行设置。
例如，Python 项目的风格指南通常指定 79 或 120 个字符，而 Git 提交消息不应超过 50 个字符。
所以在你的 settings.json 中，你会输入：
"[git-commit]": {"editor.rulers": [50]},
"[python]": {
"editor.rulers": [
79,
120
]
}
使用 Visual Studio 代码 1.27.2:
当我转到 文件 > 首选项 > 设置 时，我得到以下选项卡
我在搜索设置中输入rulers，我得到以下设置列表
点击第一个Edit in settings.json，我可以编辑用户设置
点击默认用户设置设置左侧出现的笔图标，我可以将其复制到用户设置并进行编辑
随着Visual Studio代码1.38.1，第三点的截图变成了下面的截图。
不再显示用于选择默认用户设置值的面板。
在 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
}
将 与 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
- 文件 -> 首选项 -> 设置或 cntrl+,
- 键入“标尺”并单击编辑Setings.json
3.按','添加尺寸值随心所欲
喜欢这个(Gif)
自定义 VS Code 的 Char-len 标尺：
以下答案比为该问题提供的其他答案更新的多，因此；请务必注意，此答案包含任何其他答案未提供的信息和内容。我已将以下问题格式化为 4 个配置。因此，每个配置都建立在最后一个配置之上；第一个配置很简单，并提供简单的结果，而最后一个配置更复杂，提供更多。
为方便起见，我在每个配置示例的底部都包含了图像。这些图像允许您查看配置，然后查看配置的结果。这很重要，因为如果没有图像，您将不得不在此处和您的编辑器之间来回切换以查看每个配置的外观。
配置 #1 |明显的单标尺配置
显而易见的设置是建议了很多次的设置。我会在这里提到它，只是因为它是正确的起点。
- 将以下 JSON 属性 添加到您的
settings.json 文件中。
{
"editor.rulers": [80]
}
请注意！ 可能需要重新加载 VS Code 的实例（语义上：some将此称为重新加载正在配置的 window) 以使新添加的配置按预期呈现。 （要查看如何快速重新加载 window，请滚动到此答案的末尾）。
配置完成后，您的编辑器应如下所示：
配置 #2 |多个统治者
很明显，标尺的赋值是一个数组。该数组允许 VSC 用户添加多个标尺。
- 只需在上一个示例中的配置中添加一个值（如下面的代码片段所示）我们可以添加另一个标尺。
{
"editor.rulers": [80, 125]
}
我拍的屏幕截图有点短，但它很好地传达了这一点。您可以看到现在有两条垂直线，而不是单条线。许多 front-end 开发人员选择此配置，因为 125 通常用作 HTML 的首选 line-length，而 80 是嵌入 JavaScript 的首选 line-length =227=] 文档。
配置 #3 |给尺子上色
此配置展示了使用 VS Code 配置的奇思妙想；并且标尺肯定是 VS Code 附带的更异想天开的 editor-features 之一。此配置向您展示了如何为我们上面使用的配置着色。为了能够自定义标尺的颜色，需要在配置中添加额外的设置，请看下面：
{
"workbench.colorCustomizations": {
"editor-ruler.foreground": "#0099AA"
},
"editor.rulers": [80, 125]
}
下面就可以看出太平洋蓝的厉害了！
配置 #4 |为标尺着色，使其可以使用代码
因此，尽管 pacific-blue 尺子很漂亮，但它们并不总是实用的。不透明的——，在本例中是高度对比的——紧随其后的标尺是可以大大降低代码可读性的代码。出于这个原因，开发人员通常选择将单个标尺放置在所需线长处的配置，但是，还有另一种方法。通过稍微调整之前的配置，我们可以以一种更少干扰的方式呈现标尺。看看下面的配置。
看到细微的变化了吗？
{
"workbench.colorCustomizations": {
"editor-ruler.foreground": "#0099AA33"
},
"editor.rulers": [80, 125]
}
下面演示了更改的位置：
- 第三种配置使用的颜色：
"editor-ruler.foreground": "#0099AA"
- 第四种配置使用的颜色：
"editor-ruler.foreground": "#0099AA33"
新配置的调整后的色度值（color/hue）呈现透明（或不是 100% 不透明度），in-other-words；标尺呈现为部分透明（大约 25% 透明度）。
此更改具有相当显着的效果，因为不透明的标尺会妨碍可读性，并且会分散程序员对她的代码的注意力。程序员可能会选择透明标尺，因为透明标尺允许她以她选择的任何长度间隔测量代码的长度，而不会影响代码的可读性。
看到下面的透明尺了吗？ 您可能需要单击图像以查看大图。
配置 #5 |终极定制尺子
透明的问题t 统治者是他们不像其他统治者那样花哨，幸运的是，有一种方法可以两全其美。此示例使用两张图片（ 或 screen-shots）：一张图片显示配置，就像您在上面查看的其他图片一样，另一张是最终图片显示我使用的配置。我使用的配置显示为一种方法，可帮助您了解使用良好的标尺配置可以实现的目标。
下面是一种疯狂的配置...
{
"workbench.colorCustomizations": {
"editorRuler.foreground": "#00999922"
},
"editor.rulers": [
20, 40, 40, 60, 60, 60, 60, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80
]
}
我知道疯了吗？！
此配置看起来 nutter-butter，但它实际上产生了一种非常有趣且高度自定义的结果。我真的很喜欢这个例子，因为它很好地展示了 ruler array-property 配置是如何工作的，以及用它可以完成什么。
这是结果:
注意到发生了什么？
每一个标尺都比上一个更亮。标尺这样做是因为我们将几个透明的标尺相互重叠。随着图层的增加，标尺颜色变得更加饱和。这是一个非常有趣的效果。
就像我上面说的，我会告诉你我用这个效果来配置我的环境：
请注意，除了最后两个之外，我将所有标尺都设置得非常透明。这提供了一个时髦的环境，同时仍然保持实用性。拥有多个标尺还可以帮助我格式化和组织我的代码。我现在已经习惯拥有它们，以至于我几乎无法忍受没有它们的环境。
以下资源仅适用于那些需要有关重新加载 VS Code 实例的说明的用户。
正在 VS 代码中重新加载您的 WINDOW
要重新加载 window，请按 F1 打开 Quick-input 菜单。您应该会看到打开的下拉菜单，键入 Developer: Reload Window，然后 select drop-down 菜单中的 Developer: Reload Window 选项。
如何在Visual Studio代码中配置垂直标尺（注意复数）？
在 Sublime Text 2 中我可以做到
"rulers": [72, 80, 100, 120]
这在 Visual Studio 中如何运作？
"editor.ruler": 80
只生成一个垂直标尺。
Visual Studio 代码 0.10.10 引入了此功能。要配置它，请转到菜单 File → Preferences → Settings 并将其添加到您的用户或工作区设置：
"editor.rulers": [80,120]
尺子的颜色可以这样定制：
"workbench.colorCustomizations": {
"editorRuler.foreground": "#ff4081"
}
Visual Studio 代码：版本 1.14.2 (1.14.2)
按Shift + Command + P打开调色板
- 对于非 macOS 用户，请按 Ctrl+P
输入“settings.json”打开设置文件。
在默认设置下，您可以看到：
// Columns at which to show vertical rulers "editor.rulers": [],这意味着空数组不会显示垂直标尺。
在右侧window“用户设置”，添加如下内容：
"editor.rulers": [140]
保存文件，您将看到标尺。
除了全局 "editor.rulers" 设置外，还可以在每种语言级别上进行设置。
例如，Python 项目的风格指南通常指定 79 或 120 个字符，而 Git 提交消息不应超过 50 个字符。
所以在你的 settings.json 中，你会输入：
"[git-commit]": {"editor.rulers": [50]},
"[python]": {
"editor.rulers": [
79,
120
]
}
使用 Visual Studio 代码 1.27.2:
当我转到 文件 > 首选项 > 设置 时，我得到以下选项卡
我在搜索设置中输入rulers，我得到以下设置列表
点击第一个Edit in settings.json，我可以编辑用户设置
点击默认用户设置设置左侧出现的笔图标，我可以将其复制到用户设置并进行编辑
随着Visual Studio代码1.38.1，第三点的截图变成了下面的截图。
不再显示用于选择默认用户设置值的面板。
在 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
}
将
{
"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
- 文件 -> 首选项 -> 设置或 cntrl+,
- 键入“标尺”并单击编辑Setings.json
自定义 VS Code 的 Char-len 标尺：
以下答案比为该问题提供的其他答案更新的多，因此；请务必注意，此答案包含任何其他答案未提供的信息和内容。我已将以下问题格式化为 4 个配置。因此，每个配置都建立在最后一个配置之上；第一个配置很简单，并提供简单的结果，而最后一个配置更复杂，提供更多。
为方便起见，我在每个配置示例的底部都包含了图像。这些图像允许您查看配置，然后查看配置的结果。这很重要，因为如果没有图像，您将不得不在此处和您的编辑器之间来回切换以查看每个配置的外观。
配置 #1 |明显的单标尺配置
显而易见的设置是建议了很多次的设置。我会在这里提到它，只是因为它是正确的起点。
- 将以下 JSON 属性 添加到您的
settings.json文件中。
{
"editor.rulers": [80]
}
请注意！ 可能需要重新加载 VS Code 的实例（语义上：some将此称为重新加载正在配置的 window) 以使新添加的配置按预期呈现。 （要查看如何快速重新加载 window，请滚动到此答案的末尾）。
配置完成后，您的编辑器应如下所示：
配置 #2 |多个统治者
很明显，标尺的赋值是一个数组。该数组允许 VSC 用户添加多个标尺。
- 只需在上一个示例中的配置中添加一个值（如下面的代码片段所示）我们可以添加另一个标尺。
{
"editor.rulers": [80, 125]
}
我拍的屏幕截图有点短，但它很好地传达了这一点。您可以看到现在有两条垂直线，而不是单条线。许多 front-end 开发人员选择此配置，因为 125 通常用作 HTML 的首选 line-length，而 80 是嵌入 JavaScript 的首选 line-length =227=] 文档。
配置 #3 |给尺子上色
此配置展示了使用 VS Code 配置的奇思妙想；并且标尺肯定是 VS Code 附带的更异想天开的 editor-features 之一。此配置向您展示了如何为我们上面使用的配置着色。为了能够自定义标尺的颜色，需要在配置中添加额外的设置，请看下面：
{
"workbench.colorCustomizations": {
"editor-ruler.foreground": "#0099AA"
},
"editor.rulers": [80, 125]
}
下面就可以看出太平洋蓝的厉害了！
配置 #4 |为标尺着色，使其可以使用代码
因此，尽管 pacific-blue 尺子很漂亮，但它们并不总是实用的。不透明的——，在本例中是高度对比的——紧随其后的标尺是可以大大降低代码可读性的代码。出于这个原因，开发人员通常选择将单个标尺放置在所需线长处的配置，但是，还有另一种方法。通过稍微调整之前的配置，我们可以以一种更少干扰的方式呈现标尺。看看下面的配置。
看到细微的变化了吗？
{
"workbench.colorCustomizations": {
"editor-ruler.foreground": "#0099AA33"
},
"editor.rulers": [80, 125]
}
下面演示了更改的位置：
- 第三种配置使用的颜色：
"editor-ruler.foreground": "#0099AA"
- 第四种配置使用的颜色：
"editor-ruler.foreground": "#0099AA33"
新配置的调整后的色度值（color/hue）呈现透明（或不是 100% 不透明度），in-other-words；标尺呈现为部分透明（大约 25% 透明度）。
此更改具有相当显着的效果，因为不透明的标尺会妨碍可读性，并且会分散程序员对她的代码的注意力。程序员可能会选择透明标尺，因为透明标尺允许她以她选择的任何长度间隔测量代码的长度，而不会影响代码的可读性。
看到下面的透明尺了吗？ 您可能需要单击图像以查看大图。
配置 #5 |终极定制尺子
透明的问题t 统治者是他们不像其他统治者那样花哨，幸运的是，有一种方法可以两全其美。此示例使用两张图片（ 或 screen-shots）：一张图片显示配置，就像您在上面查看的其他图片一样，另一张是最终图片显示我使用的配置。我使用的配置显示为一种方法，可帮助您了解使用良好的标尺配置可以实现的目标。
下面是一种疯狂的配置...
{
"workbench.colorCustomizations": {
"editorRuler.foreground": "#00999922"
},
"editor.rulers": [
20, 40, 40, 60, 60, 60, 60, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80
]
}
我知道疯了吗？！
此配置看起来 nutter-butter，但它实际上产生了一种非常有趣且高度自定义的结果。我真的很喜欢这个例子，因为它很好地展示了 ruler array-property 配置是如何工作的，以及用它可以完成什么。
这是结果:
注意到发生了什么？
每一个标尺都比上一个更亮。标尺这样做是因为我们将几个透明的标尺相互重叠。随着图层的增加，标尺颜色变得更加饱和。这是一个非常有趣的效果。
就像我上面说的，我会告诉你我用这个效果来配置我的环境：
请注意，除了最后两个之外，我将所有标尺都设置得非常透明。这提供了一个时髦的环境，同时仍然保持实用性。拥有多个标尺还可以帮助我格式化和组织我的代码。我现在已经习惯拥有它们，以至于我几乎无法忍受没有它们的环境。
以下资源仅适用于那些需要有关重新加载 VS Code 实例的说明的用户。
正在 VS 代码中重新加载您的 WINDOW
要重新加载 window，请按 F1 打开 Quick-input 菜单。您应该会看到打开的下拉菜单，键入 Developer: Reload Window，然后 select drop-down 菜单中的 Developer: Reload Window 选项。