How can I have multiple vertical rulers in VS Code?
Master System Design with Codemia
Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.
Introduction
VS Code fully supports multiple vertical rulers. You configure them through the editor.rulers setting by passing an array of column positions. Each entry can be a simple number or an object with a column and color property for colored rulers. This is useful for enforcing multiple line-length conventions in the same file, such as a soft limit at 80 characters and a hard limit at 120.
Basic Configuration
Open your settings JSON (Cmd+Shift+P or Ctrl+Shift+P → "Open User Settings (JSON)") and add:
This displays vertical lines at columns 80 and 120. The rulers use the default theme color (editorRuler.foreground).
Colored Rulers
Since VS Code 1.43+, each ruler can have its own color:
The color is a hex value with optional alpha transparency (the last two digits). #00FF0040 is green at 25% opacity, #FF000060 is red at 37% opacity.
Mixed Configuration
You can mix numbered and object entries:
Columns 80 and 120 use the default ruler color; column 100 uses gold at 50% opacity.
Per-Language Configuration
Set different rulers for different file types:
Python's PEP 8 recommends 79 characters with 99 for certain cases. Go has no line-length convention, so rulers are disabled. The language identifier is the VS Code language ID in brackets.
Workspace-Level Configuration
For project-specific rulers, add a .vscode/settings.json to your project:
Workspace settings override user settings, so teams can enforce consistent line-length guidelines.
Changing the Default Ruler Color
To change the color of all rulers without specifying per-ruler colors:
This sets the default ruler color globally. Individual ruler color overrides take precedence.
Common Configurations by Language
| Language | Soft Limit | Hard Limit | Convention |
| Python (PEP 8) | 79 | 99 | Strict for public API, relaxed for implementation |
| JavaScript/TypeScript | 80 | 120 | Prettier default is 80, ESLint common at 120 |
| Java | 100 | 120 | Google style guide |
| Rust | 100 | 100 | rustfmt default |
| Go | None | None | gofmt handles wrapping |
| C/C++ | 80 | 120 | Google/LLVM style guides |
Using with Formatters
Rulers are visual guides only — they do not enforce line length. Pair them with formatters:
Common Pitfalls
- Using a single number instead of an array:
"editor.rulers": 80is invalid. It must be an array:"editor.rulers": [80]. A single number is silently ignored. - Alpha transparency in colors: Without alpha, colored rulers can be too prominent and distracting. Use 2-digit hex alpha (e.g.,
40= 25%,80= 50%,CC= 80%) for subtle guidelines. - Language IDs: The language identifier must match VS Code's internal ID, not the file extension. Use
[typescriptreact]for.tsxfiles, not[tsx]. Check the language ID in the bottom-right status bar. - Rulers are cosmetic only: They do not prevent typing past the line. Configure your linter or formatter to enforce line length if you need hard enforcement.
- Workspace overrides user settings completely: If workspace settings define
editor.rulers, user-level rulers are completely replaced, not merged. Define all needed rulers in the workspace config.
Summary
- Set
"editor.rulers": [80, 120]in settings JSON for multiple vertical rulers - Use objects for colored rulers:
{ "column": 80, "color": "#00FF0040" } - Configure per-language rulers with
"[python]": { "editor.rulers": [79, 99] } - Use workspace
.vscode/settings.jsonfor project-specific conventions - Rulers are visual guides — pair with formatters and linters for enforcement
- Add alpha transparency to ruler colors to keep them subtle

