VS Code
Coding
Code Editing
Software Development
Programming Tools

How can I have multiple vertical rulers in VS Code?

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

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

Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions