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 :

aads · Answer 1 · 2023-09-01T20:13:34.167

109

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 01 '23 at 20:13

answered Aug 09 '20 at 06:13

aads

2,255
4
24
25

6

this issue always come with dart – Hisham Dec 09 '20 at 06:34
24

Let's be honest, who actually wants this "feature"? – S1r-Lanzelot Jan 27 '21 at 01:16
1

FYI in Ubuntu, find these settings in `~/.config/Code/User/settings.json` – Will59 Aug 01 '22 at 08:49
1

Windows: %appdata%\code\user\settings.json – The incredible Jan Nov 09 '22 at 11:55

score 29 · Answer 2 · answered Aug 02 '17 at 18:40

29

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 02 '17 at 18:40

kwood

9,854
2
28
32

4

So I checked my settings and "editor.rulers": [] is set exactly as you have it already. It must be something else. – StormKrow Aug 04 '17 at 09:21
5

Workspace settings would be the next place to look. – kwood Aug 05 '17 at 05:25
2

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`? – kwood Aug 05 '17 at 05:26
1

@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. – Adedoyin Akande Jan 11 '19 at 07:18

score 23 · Answer 3 · edited Nov 18 '21 at 06:21

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.

score 22 · Accepted Answer · answered Mar 06 '18 at 09:23

22

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

answered Mar 06 '18 at 09:23

score 12 · Answer 5 · edited Aug 06 '20 at 07:16

12

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

"[dart]" : {

"editor.rulers": []
}

edited Aug 06 '20 at 07:16

Tim Stack

3,209
3
18
39

answered Aug 06 '20 at 06:18

Amit Verma

153
2
6

score 7 · Answer 6 · answered Aug 01 '17 at 22:44

7

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.

answered Aug 01 '17 at 22:44

Mark

143,421
24
428
436

2

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. – StormKrow Aug 02 '17 at 06:36
1

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? – Mark Aug 02 '17 at 14:35
1

I just tried that and it didn't get ride of the white line. – StormKrow Aug 04 '17 at 09:20

score 5 · Answer 7 · answered May 30 '22 at 06:06

5

settings.json

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

Vertical rulers in Visual Studio Code

answered May 30 '22 at 06:06

ReversalMinutes

101
1
2

score 3 · Answer 8 · edited Nov 16 '20 at 10:56

3

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 '20 at 10:56

Suraj Rao

29,388
11
94
103

answered Nov 16 '20 at 10:51

Tushar Gupta

41
2

_Indent Guides_ is exactly what I was looking for! – t3chb0t Feb 16 '21 at 20:34
hit Ctrl + P and search for settings.json – user1034912 Apr 24 '21 at 02:04

score 1 · Answer 9 · answered Aug 10 '22 at 08:05

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

score 1 · Answer 10 · answered Sep 08 '22 at 06:07

1

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.

answered Sep 08 '22 at 06:07

Neeraj Tangariya

1,159
1
17
29

score 0 · Answer 11 · answered Sep 17 '21 at 13:54

0

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

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

answered Sep 17 '21 at 13:54

Dragon Leon

11
1

score -1 · Answer 12 · answered Jun 15 '23 at 16:13

-1

in dart language, set this enter image description here

answered Jun 15 '23 at 16:13

jack

663
1
8
11

1

https://meta.stackoverflow.com/a/285557/11107541 https://code.visualstudio.com/docs/getstarted/settings#_settingsjson – starball Jun 16 '23 at 01:27

score -1 · Answer 13 · edited Aug 24 '23 at 12:00

-1

Open the Run command by pressing Windows+R
In the Run command window, type %APPDATA%\Code\User\settings.json and press Enter
This will open the settings.json file in Visual Studio Code.
In the settings.json file, find the following line editor.rulers = []
Remove the 80 in editor.rulers[]
Save the settings.json file. Image of VSCode settings here

edited Aug 24 '23 at 12:00

Emma

658
10
20

answered Aug 19 '23 at 15:17

Chamal Senarathna

1

This is already well covered in the existing answers. Please don't repeat answers. – ChrisGPT was on strike Aug 27 '23 at 01:51

Disable White Vertical Line

13 Answers13

Linked