Multiple Vertical Rulers in VS Code: Complete Guide

VS Code supports multiple vertical rulers through the editor.rulers setting (note the plural form). You can configure multiple rulers using either a simple array format or an object format that includes custom colors for each ruler.

Contents

• Basic Configuration
• Advanced Configuration with Colors
• Language-Specific Rulers
• Troubleshooting
• Best Practices

Basic Configuration

The simplest way to configure multiple vertical rulers is by using an array of numbers in your VS Code settings (settings.json):

"editor.rulers": [80, 100, 120]

This configuration creates three vertical rulers at columns 80, 100, and 120 from the left edge of the editor. According to the official VS Code documentation, rulers are rendered as vertical lines that help you maintain consistent code formatting and readability.

The array format is straightforward:

• Each number represents the column position where a ruler will appear
• Numbers are measured in character positions from the left of the editor
• Multiple numbers in the array create multiple rulers

Note: The setting name is editor.rulers (plural), not editor.ruler (singular). The singular form was used in older versions of VS Code.

Advanced Configuration with Colors

Starting with VS Code version 1.43, you can customize the color of each ruler individually using an object format. This gives you more control over the visual appearance of your rulers:

"editor.rulers": [
  { "column": 80, "color": "#ff00ff" },  // Purple ruler at column 80
  100,                                   // Default color ruler at column 100
  { "column": 120, "color": "#ff0000" }  // Red ruler at column 120
]

Color Configuration Options

You can specify colors in several formats:

• Hex codes: "#ff00ff", "#00ff00", "#ff0000"
• RGB values: Full color customization
• Named colors: Limited support for standard web colors

For broader color customization, you can also set a default ruler color using the workbench.colorCustomizations setting:

"workbench.colorCustomizations": {
  "editorRuler.foreground": "#4093ff"
},
"editor.rulers": [80, 120]

This sets all rulers without specific color assignments to blue (#4093ff).

Language-Specific Rulers

You can configure different rulers for different programming languages. This is particularly useful when working with languages that have different recommended line lengths or formatting standards.

"[javascript]": {
  "editor.rulers": [80, 120]
},
"[python]": {
  "editor.rulers": [79, 99]
},
"[java]": {
  "editor.rulers": [100, 120]
}

This approach allows you to have language-specific rulers that automatically apply when you’re editing files of those types.

Troubleshooting

If your rulers aren’t appearing, here are some common solutions:

1. Verify Setting Name

Make sure you’re using editor.rulers (plural), not editor.ruler (singular).

2. Check JSON Syntax

Ensure your JSON syntax is correct. Common mistakes include:

• Missing commas between array elements
• Incorrect quotation marks
• Mismatched brackets

3. Reload VS Code

Sometimes VS Code needs to be reloaded for changes to take effect:

• Quick reload: Press Ctrl+Shift+P (or Cmd+Shift+P on Mac), then type “Developer: Reload Window”
• Full restart: Close and reopen VS Code

4. Check for Conflicting Settings

Some extensions might override ruler settings. Try disabling extensions temporarily to see if that resolves the issue.

5. Verify Column Positions

Ensure your column positions are within visible ranges. Extremely large values might not render properly.

Best Practices

Recommended Column Positions

• 80 characters: Common for Python and general readability
• 100 characters: Often used for JavaScript/TypeScript
• 120 characters: Maximum line length for some languages

Color Coding Strategy

Use colors to distinguish between different types of guidelines:

• Blue: General line length recommendations
• Red: Maximum line length limits
• Green: Style guide recommendations
• Purple: Language-specific conventions

Performance Considerations

• Avoid excessive numbers of rulers (more than 5-6 might become distracting)
• Use language-specific rulers only when necessary
• Consider turning off rulers when working on very wide files

Integration with Other Tools

Vertical rulers work well with other VS Code formatting features:

• Word wrap: Combine with rulers for better readability
• Indentation guides: Use rulers to monitor line length
• Format on save: Let rulers guide your formatting preferences

Sources

1. Stack Overflow - How can I have multiple vertical rulers in VS Code?
2. Bobbyhadz - Customize Vertical Rulers in VS Code
3. W3Schools - VS Code Vertical Rulers Tutorial
4. KindaCode - How to Customize Vertical Rulers in VS Code
5. DEV Community - VS Code Vertical Rulers for Prettier Code
6. Gang of Coders - Vertical Rulers in VS Code

Conclusion

Visual Studio Code fully supports multiple vertical rulers through the editor.rulers setting. You can configure rulers using either a simple array format [80, 120] or an object format with custom colors [ { "column": 80, "color": "#ff00ff" } ]. The feature has been available since VS Code version 1.31 and enhanced with color support in version 1.43. For the best experience, consider using language-specific configurations and strategic color coding to enhance your coding workflow and maintain consistent formatting standards across different programming languages.