How to Customize Vertical Rulers in VS Code

Updated: February 8, 2023 By: A Goodman Post a comment

This guide shows you how to customize vertical rulers in VS Code (Visual Studio Code). Just follow a few simple steps listed below.

1. Go to:

  • Code > Preferences > Settings if you are on a Mac (Shortcut keys: Command + ,)
  • File > Preferences > Settings if you are using Windows (Shortcut keys: Ctrl + ,)

2. Type “Ruler” into the search field, then click on “Edit in settings.json” in the “Editor: Rulers” section.

3. Now you add vertical rulers by editing the array associated with “editor.rulers”. There are 2 important things you need to know:

  • Each element of the array corresponds to a ruler.
  • The value of an array element defines the number of monospace characters from the left to the corresponding ruler.
  • If the array is empty, no rulers will be drawn.

You can control the color of the rulers by modifying the “workbench.colorCustomizations” key.

For example, you can create 3 blue vertical rulers like this:

"editor.rulers": [40, 60, 80],
  "workbench.colorCustomizations": {
    "editorRuler.foreground": "#4093ff"

This screenshot clearly shows the 3 rulers we’ve made:

All of your settings will be applied immediately. If you see nothing changes, just reload or restart your VS Code.

Further reading:

You can also check out our Visual Studio Code topic page for more tips and tricks to improve your producibility and coding experience.

Notify of
Inline Feedbacks
View all comments

Related Articles