How to Customize Vertical Rulers in VS Code

Last updated on August 24, 2021 A Goodman Loading... 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 (Shotcut keys: Command + ,).
  • File > Preferences > Settings if you are using Windows (Shotcut 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 coressponding 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 by 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.

Happy coding!

Notify of
Inline Feedbacks
View all comments

Related Articles