Disable White Vertical Line

Question

So I've installed VS Code on my Mac and it works perfectly fine. There's just this white vertical line going down the screen which is kinda annoying.

I'm not sure if it's supposed to be some sort of guide, ruler or something. It just appeared from the start. Is there a way to disable it?

It looks like this :

indeed, that's so annoying. I hope the guy who had the idea to put this on by default from a sudden will realize most of us hate it! — Paul Pacurar
– Paul Pacurar, Commented Dec 4, 2023 at 16:39

aads · Accepted Answer · 2023-09-01 20:13:34Z

129

In the settings.json there can be 2 places, where it has "editor.rulers" . Make both empty. To find the settings json refer to this.

edited Sep 1, 2023 at 20:13

answered Aug 9, 2020 at 6:13

aads

2,5154 gold badges25 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Hisham Over a year ago

this issue always come with dart

S1r-Lanzelot Over a year ago

Let's be honest, who actually wants this "feature"?

Will59 Over a year ago

FYI in Ubuntu, find these settings in ~/.config/Code/User/settings.json

The incredible Jan Over a year ago

Windows: %appdata%\code\user\settings.json

Paul Pacurar Over a year ago

not working anymore

kwood · Accepted Answer · 2017-08-02 18:40:14Z

33

By default the ruler shouldn't be visible, but you can check for the following setting:

editor.rulers.

If set, it's an array with column numbers. If you want to turn it off, you can simply set an empty array like this:

"editor.rulers": []

answered Aug 2, 2017 at 18:40

kwood

11.3k3 gold badges33 silver badges32 bronze badges

4 Comments

StormKrow Over a year ago

So I checked my settings and "editor.rulers": [] is set exactly as you have it already. It must be something else.

kwood Over a year ago

Workspace settings would be the next place to look.

kwood Over a year ago

Another idea: It was enabled by an extension, does it go away if you start the editor from the command line with code --disable-extensions?

Adedoyin Akande Over a year ago

@StormKrow This should be marked the correct answer. e.g: "editor.rulers": [80, 100, 120] if you remove those values i.e 80, 100 and 120 you won't see the lines anymore.

Wouter · Accepted Answer · 2021-11-18 06:21:01Z

In the latest version of vscode you can follow this process to get rid of that white line

Step 1: Go to Preferences -> Settings Screenshot of the preferences panel

Step 2: Search for editor rulers and click on edit in settings.json Screenshot of the search result

Step 3: In many cases, it would be like this:

"editor.rulers": [ 80 ]

Remove 80 and make it an empty array and save it.

"editor.rulers": []

By following these steps the vertical line should be removed.

user2454182 · Accepted Answer · 2018-03-06 09:23:19Z

This was bugging me a lot as well... so I finally tracked down the setting which turned it off.

Tim Stack · Accepted Answer · 2020-08-06 07:16:59Z

12

As my dart file was having that issue. So I have added in setting.json:

"[dart]" : { "editor.rulers": [] }

edited Aug 6, 2020 at 7:16

Tim Stack

3,2483 gold badges25 silver badges46 bronze badges

answered Aug 6, 2020 at 6:18

Amit Verma

1732 silver badges6 bronze badges

Comments

Mark · Accepted Answer · 2017-08-01 22:44:27Z

If you search in your settings file - the default settings that is - you will find

// Controls whether the editor should render indent guides

"editor.renderIndentGuides": true,

Set that to false in your user settings - typically the right panel if you open "Settings' from the lower left gear icon.

You can also change the indent guides color if you wish. See Change indent color in theme for VSCode? to learn how to do so. Generally you can find a lot by opening up your Settings and then searching through the default settings.

I just tried that and it still doesn't get rid of the white line on the far right. It only removed the indentations lines. I'm not sure if the white line on the right side is some kind of ruler or column guide or something.
Sorry, you mentioned guide or ruler so I thought you were referring to the lines on the left. Is your screen split by any chance? Just on a lark does "scrollbar.shadow": "#f00", in the "workbench.colorCustomizations" make it change color?

ReversalMinutes · Accepted Answer · 2022-05-30 06:06:32Z

6

settings.json

{ "workbench.colorCustomizations": { "editorRuler.foreground": "#00000000"//transparent } }

Vertical rulers in Visual Studio Code

answered May 30, 2022 at 6:06

ReversalMinutes

1511 silver badge3 bronze badges

1 Comment

Volodymyr Kuzomenskyi Oct 6 at 10:36

The only answer that worked! Thanks

Suraj Rao · Accepted Answer · 2020-11-16 10:56:44Z

4

If u just want to get rid of the rightmost line, edit your settings.json file

"editor.rulers": [],

And if you want to get rid of the left sidelines, just make sure

edited Nov 16, 2020 at 10:56

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Nov 16, 2020 at 10:51

Tushar Gupta

512 bronze badges

2 Comments

t3chb0t Over a year ago

Indent Guides is exactly what I was looking for!

user1034912 Over a year ago

hit Ctrl + P and search for settings.json

Neeraj Tangariya · Accepted Answer · 2022-09-08 06:07:26Z

Here are some steps:

Open vs code settings.json file
then under json file search for this line of code "editor.rulers":
then remove the or blank the array like this"editor.rulers": [], and save the file.

ganesh parajuli · Accepted Answer · 2022-08-10 08:05:14Z

steps for solution:

click ctrl+, in vs code editor, or manually open the setting in vscode editor.
search for editor rulers and after a search click on Edit in settings.json enter image description here
make editor rulers empty.
close the tap enter image description here

Dragon Leon · Accepted Answer · 2021-09-17 13:54:58Z

Press Ctrl + Shift + P => Type: setting.json and then click "Open Settings (JSON)

Then change to this: "editor.rulers": [],

Martin Balverde · Accepted Answer · 2024-07-15 10:09:30Z

It is better to move the line. The default value is 80 Add in settings.json this code:

"editor.rulers": [120], "editor.wordWrapColumn": 120, "editor.wordWrap": "off", "dart.lineLength": 120,

Hope this can work for you

PD: 120 is an example put the number that you want

jack · Accepted Answer · 2023-06-15 16:13:34Z

-1

in dart language, set this enter image description here

answered Jun 15, 2023 at 16:13

jack

8631 gold badge9 silver badges12 bronze badges

1 Comment

starball Over a year ago

meta.stackoverflow.com/a/285557/11107541 code.visualstudio.com/docs/getstarted/settings#_settingsjson

Collectives™ on Stack Overflow

Disable White Vertical Line

13 Answers 13

5 Comments

4 Comments

Comments

Comments

Comments

3 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

5 Comments

4 Comments

Comments

Comments

Comments

3 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Related