How to insert and remove vertical line in VS Code ?

👤 Diwas Poudel 🕒 25 Feb 2023 📁 TECH

VS Code is a popular code editor that is used by many developers all over the world. Developers occasionally discover that the code on the vscode is too long and want to know when to break the code if certain character lengths are reached. And vertical rulers in Visual Studio Code provide a solution for this. This setting was added to VS Code in the 0.10.11 version, which was released in February 2016.

Why Vertical Editor Rulers?
Using Single Vertical ruler in VS Code
Using Multiple Vertical rulers in VS Code
Using Multiple Vertical Ruler and Colors
Using Global Rules for Vertical Ruler
Using Multi Ruler along with Default Vertical Rulers
Using Vertical Ruler Per Langauge Level
How to remove vertical lines in VS Code?
Conclusion:

If your code takes up the entire screen and you're writing long lines of code per line, you'll have to scroll editor scrollbar to see the entire line of your code takes up the entire screen and you're writing long lines of code per line, you'll have to scroll editor scrollbar to see the entire line of code. If the developer wants to break the code if it exists at a certain width, then vertical line technically editors rulers help us to achieve this.

Why Vertical Editor Rulers?

Vertical Rulers assist developers in making their code more readable and organization by determining when to break the code if it becomes longer than the specified length.
It assists in the detection of long lines.
They are extremely useful for keeping track of lines and code blocks.
Some linters can emphasize lines that exceed a column limit that matches the vertical line. This can help you find long lines that need wrapping for readability.

Vertical rulers can be configured in a variety of ways, including single rulers, multiple rulers, ruler properties, and language-specific rulers. Ourtechroom will show you how to configure vertical rulers in VS Code.

Using Single Vertical ruler in VS Code

Here are the steps for setting Single Vertical Ruler in VS Code.

1 Open Settings.json file
Press Ctrl + Shift + P to open Command Palette and there type "Open Settings (JSON)" and select Preferences: Open Settings (JSON) from the list. This will open Setings.json.

2 Add the ruler's settings as shown below.

  "editor.rulers": [ 70 ]

3 Close VS Code and Reopen it.

Vertical lines now appear at the 70th character column.

If you want to increase characters like 80 or anything else then just replace 70 with any integer number.

Using Multiple Vertical rulers in VS Code

Here are the steps for setting multiple vertical rulers in VS Code.

1 Step 1 is the same as above

2 Type this rule in the settings.json file

"editor.rulers": [80,120]

Separate the values with a comma

3 Close vscode and reopen it.

This will insert two vertical rulers at the 80th character and 120th character column

You can keep adding more rulers like this:

"editor.rulers": [ 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 ],

Using Multiple Vertical Ruler and Colors

You can also add a different color to different vertical lines and you have to add the following in settings.json or edit editor. rulers with the following settings.

"editor.rulers": [
        {
          "column": 70,
          "color": "#1403fc"
        },
        {
          "column": 110,
          "color": "#03fc28"
        },
      ], 
}

Using Global Rules for Vertical Ruler

You can create global rules for vertical rulers in vscode as shown below.

{

"editor.rulers": [ 70,90 ],
"workbench.colorCustomizations": {
"editorRuler.foreground": "#ff4081"
}
}

Here, we set the foreground color of the editor to pink.

Using Multi Ruler along with Default Vertical Rulers

We can create multiple rulers along with default vertical rulers as shown below:

"editor.rulers": [
{
"column": 70,
"color": "#1403fc" //Blue
},
{
"column": 110,
"color": "#03fc28" //Green
},
150 // Default Vertical bar
],
}

Here we have set the default vertical bar at the 150th column along with other columns at the 70 and 100 character positions.

Using Vertical Ruler Per Langauge Level

Because each programming language has a unique syntax, the width of the syntax may vary. Many coding standards impose line length restrictions.
Assume that the syntax in Python is short and the same in Java is longer.

As a result, the Vertical Ruler must be configured based on the Programming Language. Consider the following example:

{
    "editor.rulers": 120,
    "[python]": {
        "editor.rulers": [79]
    },
     "[php]": {
        "editor.rulers": [85]
    },
     "[csharp]": {
        "editor.rulers": [90]
    }
}

In this case, we've used the 79th character column for any Python code. The 85th character column is used in PHP, while the 90th character column is used in Csharp.

To see the full list of programming languages supported, start typing "[ and see the drop-down provided by VS Code. If you have already included it in the bracket then will not be shown in the dropdown. Here, if you start typing "[" then will not show PHP, python, and csharp in the dropdown.

FAQ: