VS Code
Coding
Code Editing
Software Development
Programming Tools

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:

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

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:

json
1{
2    "editor.rulers": [
3        { "column": 80, "color": "#00FF0040" },
4        { "column": 120, "color": "#FF000060" }
5    ]
6}

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:

json
1{
2    "editor.rulers": [
3        80,
4        { "column": 100, "color": "#FFD70080" },
5        120
6    ]
7}

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:

json
1{
2    "editor.rulers": [80],
3
4    "[python]": {
5        "editor.rulers": [79, 99]
6    },
7
8    "[javascript]": {
9        "editor.rulers": [80, 120]
10    },
11
12    "[go]": {
13        "editor.rulers": []
14    },
15
16    "[markdown]": {
17        "editor.rulers": [
18            { "column": 80, "color": "#FFFFFF20" }
19        ]
20    }
21}

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:

json
1{
2    "editor.rulers": [
3        { "column": 100, "color": "#4FC3F7AA" },
4        { "column": 120, "color": "#EF5350AA" }
5    ]
6}

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:

json
1{
2    "workbench.colorCustomizations": {
3        "editorRuler.foreground": "#4FC3F750"
4    }
5}

This sets the default ruler color globally. Individual ruler color overrides take precedence.

Common Configurations by Language

LanguageSoft LimitHard LimitConvention
Python (PEP 8)7999Strict for public API, relaxed for implementation
JavaScript/TypeScript80120Prettier default is 80, ESLint common at 120
Java100120Google style guide
Rust100100rustfmt default
GoNoneNonegofmt handles wrapping
C/C++80120Google/LLVM style guides
json
1{
2    "[python]": {
3        "editor.rulers": [
4            { "column": 79, "color": "#4CAF5060" },
5            { "column": 99, "color": "#FF980060" },
6            { "column": 120, "color": "#F4433660" }
7        ]
8    }
9}

Using with Formatters

Rulers are visual guides only — they do not enforce line length. Pair them with formatters:

json
1{
2    "editor.rulers": [80],
3    "editor.wordWrapColumn": 80,
4    "editor.wordWrap": "wordWrapColumn",
5
6    "prettier.printWidth": 80,
7
8    "[python]": {
9        "editor.rulers": [79],
10        "editor.defaultFormatter": "ms-python.black-formatter",
11        "black-formatter.args": ["--line-length", "79"]
12    }
13}

Common Pitfalls

  • Using a single number instead of an array: "editor.rulers": 80 is 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 .tsx files, 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.json for project-specific conventions
  • Rulers are visual guides — pair with formatters and linters for enforcement
  • Add alpha transparency to ruler colors to keep them subtle

Course illustration
Course illustration