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!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles