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.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles