Vertical rulers in Visual Studio Code

Question

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.

score 1736 · Accepted Answer · edited Mar 22 '20 at 19:19

1736

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"
}

edited Mar 22 '20 at 19:19

Peter Mortensen

28,342
21
95
123

answered Apr 30 '15 at 15:39

Dimitar Asenov

17,804
1
13
17

6

Also, you could try this extention https://marketplace.visualstudio.com/items?itemName=SirTori.indenticator – daronwolff Nov 17 '16 at 18:30
6

If a PyLint [complaint brought you here (message C0301 , enforcing PEP 8)](http://pylint-messages.wikidot.com/messages:c0301) -- notice they mention the ideal length for Python , which [PEP 8](https://www.python.org/dev/peps/pep-0008/#maximum-line-length) says is **79** – The Red Pea May 14 '17 at 16:45
I needed to re-start VS Code for this to take effect. Version 1.13.0 – Nick Breen Jun 13 '17 at 22:36
15

VS Code no longer requires a restart in order to apply this setting as of 1.31.1, probably sooner. – Tomáš Hübelbauer Feb 20 '19 at 09:37
6

What does the second number stand for? – nocibambi Jul 12 '19 at 12:29
8

@nocibambi Multiple rulers are supported. The second number will display a second ruler at column 120 – amrtn Aug 14 '19 at 11:33
@daronwolff thanks for your suggestion, I love the indicator. – Luke Feb 18 '21 at 15:51
how to make "editor.rulers": [${ColumnLimit}] which ColumnLimit is specified in .clang-format – http8086 Feb 22 '21 at 18:30
When will the second number will be used? When there is word-splitting not possible? – Timo May 22 '21 at 09:49

score 271 · Answer 2 · edited Mar 22 '20 at 19:28

271

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
    ]
}

edited Mar 22 '20 at 19:28

Peter Mortensen

28,342
21
95
123

answered Dec 13 '17 at 01:18

Jeff Widman

16,338
10
59
80

1

Thanks for the hint! I use this option for manually editing Git commit messages in the editor (rather than in command line). If you already have a default value for all other languages' file formats (for example `"editor.rulers": [ 80 ]` per Drupal coding standards) in general scope, then it's possible to overwrite only for the Git commit messages file format by adding this to the end of your `settings.json` file: ``` "[git-commit]": { "editor.rulers": [ 50 ], } ``` This way it's totally separated, does not affect other language files. – Balu Ertl Jun 01 '19 at 11:59
You can now also specify individual colours on the rulers, see [this answer](https://stackoverflow.com/a/60031111/23118) for details. – hlovdal Nov 13 '20 at 17:27

kiamlaluno · Answer 3 · 2019-09-27T18:46:56.173

132

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.

edited Sep 27 '19 at 18:46

answered Sep 22 '18 at 10:40

kiamlaluno

24,790
16
70
85

Strange, clicking on "Edit in settings.json" just opens the json and doesn't add a default entry either. I need to click on the gear icon (it only appears when hovering the setting) -> Copy Setting ID / as JSON, then paste it in the User Settings. How did you get the dual pane Default/User settings? I use VS code v1.38.1. – hsandt Sep 26 '19 at 10:50
I was using VSC 1.27.2. Version 1.38.1 doesn't show the dual panel anymore. It's similar to the settings window used from Sublime Text 3. – kiamlaluno Sep 27 '19 at 18:48
Anyway, I am using VSC on a Linux distribution (openSUSE Tumbleweed, earlier, and Ubuntu 19.04 now). – kiamlaluno Sep 27 '19 at 18:52
1

Too bad. If the default isn't shown in dual pane, they could as least insert a stub `"editor.rulers": [80]` so the user doesn't have to copy the JSON manually. The GUI settings window doesn't even show the current value for `editor.rulers`, like a few others... – hsandt Jan 21 '20 at 21:47

Mark · Answer 4 · 2020-10-16T21:30:58.160

71

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

edited Oct 16 '20 at 21:30

answered Feb 19 '20 at 03:21

Mark

63,012
11
197
207

2

Haha, they add more and more features. – nalply Feb 20 '20 at 08:37
It's indeed out in the February 2020 release (1.43.0). – hans_meine Mar 19 '20 at 14:36
3

I am very glad I scrolled to this, because it's just what I wanted. Thanks! – Mad Bernard Oct 16 '20 at 20:38
1

This should be the top answer. This is exactly what I was looking for! As @MadBernard, I'm glad I scrolled to this answer. – avetisk Dec 26 '20 at 13:03

score 55 · Answer 5 · edited Mar 22 '20 at 19:19

55

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.

edited Mar 22 '20 at 19:19

Peter Mortensen

28,342
21
95
123

answered Aug 30 '17 at 03:13

jialin wang

2,374
1
9
5

Re `Ctrl` + `P` for non-macOS users: Are you sure it is not `Shift` + `Ctrl` + `P`? – Peter Mortensen Mar 22 '20 at 19:24
Can you add a screenshot of the "panel" so it is clear what it is? – Peter Mortensen Mar 22 '20 at 19:26

score 6 · Answer 6 · edited Mar 22 '20 at 19:38

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

}

raccoon · Answer 7 · 2021-03-30T05:32:42.277

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
],

Vertical rulers in Visual Studio Code

7 Answers7

Linked