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]


        

Answer 1

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

Answer 2

Visual Studio Code: Version 1.14.2 (1.14.2)

1. Press Shift + Command + P to open panel
   • For non-macOS users, press Ctrl+P
2. Enter "settings.json" to open setting files.

3. 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.

4. At right window "user setting", add the following:

   "editor.rulers": [140]

Save the file, and you will see the rulers.

Answer 3

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

Answer 4

Render vertical rulers after a certain number of monospace characters. Use multiple values for multiple rulers. No rulers are drawn if array is empty.

"editor.rulers": [],

Configure settings to be overridden for [git-commit] language.

  "[git-commit]": {
    "editor.rulers": [72],
    "workbench.editor.restoreViewState": false
  },

Answer 5

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

}

Answer 6

With Visual Studio Code 1.27.2:

1. When I go to File > Preference > Settings, I get the following tab

2. I type rulers in Search settings and I get the following list of settings

3. Clicking on the first Edit in settings.json, I can edit the user settings

4. 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.