How can vertical rulers (note the plural) be configured in Visual Studio Code?
In Sublime Text 2 I can do
"rulers": [72, 80, 100, 120]
How does this work in Visual Studio?
"editor.ruler": 80
produces only one vertical ruler.
1043
votes
8 Answers
1792
votes
Visual Studio Code 0.10.10 introduced this feature. To configure it, go to menu File → Preferences → Settings and add this to to your user or workspace settings:
"editor.rulers": [80,120]
The color of the rulers can be customized like this:
"workbench.colorCustomizations": {
"editorRuler.foreground": "#ff4081"
}
286
votes
In addition to global "editor.rulers" setting, it's also possible to set this on a per-language level.
For example, style guides for Python projects often specify either 79 or 120 characters vs. Git commit messages should be no longer than 50 characters.
So in your settings.json, you'd put:
"[git-commit]": {"editor.rulers": [50]},
"[python]": {
"editor.rulers": [
79,
120
]
}
137
votes
With Visual Studio Code 1.27.2:
When I go to File > Preference > Settings, I get the following tab
I type rulers in Search settings and I get the following list of settings
Clicking on the first Edit in settings.json, I can edit the user settings
Clicking on the pen icon that appears to the left of the setting in Default user settings I can copy it on the user settings and edit it
With Visual Studio Code 1.38.1, the screenshot shown on the third point changes to the following one.
The panel for selecting the default user setting values isn't shown anymore.
77
votes
In v1.43 is the ability to separately color the vertical rulers.
See issue Support multiple rulers with different colors - (in 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"
},
],
56
votes
Visual Studio Code: Version 1.14.2 (1.14.2)
- Press Shift + Command + P to open panel
- For non-macOS users, press Ctrl+P
- Enter "settings.json" to open setting files.
At default setting, you can see this:
// Columns at which to show vertical rulers "editor.rulers": [],This means the empty array won't show the vertical rulers.
At right window "user setting", add the following:
"editor.rulers": [140]
Save the file, and you will see the rulers.
8
votes
Combining the answers of kiamlaluno and Mark, along with formatOnSave to autointent code for 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"
},
],
}
6
votes
To expand on the above, you can set multiple rulers and colors for each ruler. The default color appears to be "#5a5a5a", and if you tack on two additional digits to the end you can adjust its transparency to make some rulers more faint than others.
Here are my rulers, defined in a concise manner that's easier to edit.
"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
],
