How to Customize Vertical Rulers in VS Code

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:

• VS Code: How to Position/Align the Bottom Panel
• VS Code: 3 Ways to Move the Side Bar to the Right/Left
• VS Code: Quickly Move Focus between Code File and Terminal
• VS Code & Javascript/TypeScript: Place Curly Braces on New Line
• VS Code: 3 Ways to Change Terminal Font SIze

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