Vertical rulers are used by editors to draw a visible vertical line for a known specified character width. A vertical line, tells the line of text to exceed characters.

Rules, for example, allow developers to set the length of code lines using vertical rulers.

Rulers in Visual Studio Code can be turned on or off using settings or a quick shortcut.

Multiple vertical rulers can also be added.

VSCode Vertical Rulers

Following are the steps to add vertical rulers

  • Go to Files > Preferences > Settings
  • It opens the Settings window
  • Type “Rulers” or “editor.rulers” in search settings
  • Click on Edit in settings.json
  • You should see default rules, if not found add the below
"editor.rulers": []
  • update with an array with 70 and save it.
"editor.rulers": [70]
  • It adds a vertical ruler with a limit of 70 characters

Adding multiple rulers and colors:

You can add multiple colors and each ruler can be customized with a different color.

Here is a code to update the editor.rulers below

  "editor.rulers": [
        {
          "column": 40,
          "color": "blue"
        },
        60,
        {
          "column": 80,
          "color": "red"
        },
      ],
}

It adds three vertical rulers.

The first Ruler is added with a limit of 40 characters and the color is blue Second Ruler, limit 40 characters with default color Third Ruler, limit to 80 characters with red color.

Shortcut command to add vertical ruler in Visual Studio Code

  • use below shortcut commands

    • Ctrl + P in Windows
    • Shift + Command+P in Mac OS

  • It opens the panel and types “Settings.json”.

  • you can see “editor.rulers”: [] in settings, if not add it

  • You can add with a limit of 50 characters

"editor.rulers": [50]