Implementing Multiple Vertical Rulers in Visual Studio Code

Visual Studio Code (VS Code) is a popular code editor known for its extensive customization capabilities. One useful feature for developers who work with coding standards and style guides is the ability to display multiple vertical rulers within the editor. These rulers help developers adhere to line length guidelines, enhancing readability and consistency across projects.

Introduction

By default, VS Code provides a single vertical ruler that can be configured to appear at any column width you specify. However, more complex development scenarios may require multiple rulers, each aligned with different style or project-specific guidelines. This tutorial will guide you through setting up multiple vertical rulers in VS Code and customizing their appearance.

Setting Up Multiple Vertical Rulers

To display multiple vertical rulers in VS Code, follow these steps:

1. Access Settings:

   • Open the Command Palette by pressing Shift + Cmd + P on macOS or Ctrl + Shift + P on Windows/Linux.
   • Type "Preferences: Open Settings (JSON)" and select it to open your settings.json file.

2. Configure Rulers:

   • Add an array of numbers to the "editor.rulers" key in settings.json. Each number represents a column where a vertical ruler will be drawn. For example, to set rulers at columns 80, 120, and 140, your configuration should look like this:

     {
       "editor.rulers": [80, 120, 140]
     }
     

   • This setup will display three vertical lines in the editor at the specified column numbers.

Customizing Ruler Appearance

You can further customize each ruler’s appearance by specifying colors. Starting from VS Code version 1.43, you can assign different colors to each ruler individually:

1. Color Configuration:

   • In settings.json, modify the "editor.rulers" array to include objects with column and color properties for colored rulers. For example:

     {
       "editor.rulers": [
         { "column": 80, "color": "#ff00FF" },
         100, // Default color or customized color
         { "column": 120, "color": "#ff0000" }
       ]
     }
     

   • The default ruler color can be set using the "workbench.colorCustomizations" key:

     {
       "workbench.colorCustomizations": {
         "editorRuler.foreground": "#ffffffaa" // Optional transparency
       }
     }
     

Language-Specific Rulers

VS Code allows configuring rulers on a per-language basis, which is particularly useful when different languages adhere to different style guidelines. For example, you might want a 79-character limit for Python and a 50-character limit for Git commit messages:

1. Per-Language Settings:

   • In settings.json, use language-specific keys to define rulers per language:

     {
       "[python]": {
         "editor.rulers": [79, 120]
       },
       "[git-commit]": {
         "editor.rulers": [50]
       }
     }
     

Conclusion

By configuring multiple vertical rulers in VS Code, you can enhance your coding workflow and maintain adherence to various style guides effortlessly. This guide has walked you through setting up these rulers and customizing their appearance to suit your needs.

Remember to save your settings.json file after making changes to apply them within the editor. With these tools at your disposal, managing code readability across different projects becomes much more manageable.