28

I've recently started using VS Code, and I've noticed that there are little colored pixels that show up in the scroll bar like this:

enter image description here

They seem to indicate something about the source code, but I haven't been able to find the documentation for this. So my questions are as follows:

  • What is the name of this feature?
  • Where is it documented?
  • Can this feature be disabled, and if so, how?

EDIT:

  • After reading @idleberg's answer, I set scm.diffDecorations to "none" and restarted VS Code, reopened files, etc, but the decorations still persist.
  • I followed the link in @Moffen's answer and I set "editor.hideCursorInOverviewRuler" to true, but it turns out that controls a different feature. Also, I already had "editor.minimap.enabled" set to false, but the minimap is a different feature from the scrollbar decorations.
  • I'm running Version 1.23.1 of VS Code on Ubuntu 18.04.
Cameron Bieganek
  • 7,208
  • 1
  • 23
  • 40
  • 2
    I believe this is called the "overview ruler". – faintsignal May 29 '18 at 22:14
  • It's very handy for navigating errors, seeing relative positions of matched search text, showing local changes, etc. Do you find it distracting? – faintsignal May 29 '18 at 22:16
  • 1
    Yeah, I find it a bit distracting, but I haven't given it a chance to win me over yet. – Cameron Bieganek May 29 '18 at 22:40
  • It also shows the following -> where in the file the cursor is with a whitish pixel positions in the file where a token is found in Find & Replace in orangish pixel, the enclosing braces in a bit longer more brighter white pixel/s. Probably more meaningful information is there. Anyone reading this comment, feel free to comment. : ) – Isuru Dharmadasa Jun 05 '21 at 16:01

4 Answers4

25

The feature is called Overview Ruler. I've been unable to find specific documentation except some sparse notes:

If you open a file that has errors or warnings, they will be rendered inline with the text and in the overview ruler.

Related settings include:

// Controls if the cursor should be hidden in the overview ruler.
"editor.hideCursorInOverviewRuler": false,

// Controls if a border should be drawn around the overview ruler.
"editor.overviewRulerBorder": true,

// Controls the number of decorations that can show up at the same position in the overview ruler
"editor.overviewRulerLanes": 3

… but also some configurable colours, which is the most thorough explanation I've found:

Overview ruler

This ruler is located beneath the scroll bar on the right edge of the editor and gives an overview of the decorations in the editor.

  • editorOverviewRuler.border: Color of the overview ruler border.
  • editorOverviewRuler.findMatchForeground: Overview ruler marker color for find matches. The color must not be opaque to not hide underlying decorations.
  • editorOverviewRuler.rangeHighlightForeground: Overview ruler marker color for highlighted ranges, like by the Quick Open, Symbol in File and Find features. The color must not be opaque to not hide underlying decorations.
  • editorOverviewRuler.selectionHighlightForeground: Overview ruler marker color for selection highlights. The color must not be opaque to not hide underlying decorations.
  • editorOverviewRuler.wordHighlightForeground: Overview ruler marker color for symbol highlights. The color must not be opaque to not hide underlying decorations.
  • editorOverviewRuler.wordHighlightStrongForeground: Overview ruler marker color for write-access symbol highlights. The color must not be opaque to not hide underlying decorations.
  • editorOverviewRuler.modifiedForeground: Overview ruler marker color for modified content.
  • editorOverviewRuler.addedForeground: Overview ruler marker color for added content.
  • editorOverviewRuler.deletedForeground: Overview ruler marker color for deleted content.
  • editorOverviewRuler.errorForeground: Overview ruler marker color for errors.
  • editorOverviewRuler.warningForeground: Overview ruler marker color for warnings.
  • editorOverviewRuler.infoForeground: Overview ruler marker color for infos.
  • editorOverviewRuler.bracketMatchForeground: Overview ruler marker color for matching brackets.
Álvaro González
  • 142,137
  • 41
  • 261
  • 360
  • v1.45 will add `editorOverviewRuler.background` : only works in minimap is enabled and on the right. – Mark Apr 29 '20 at 17:09
  • 1
    Currently on VS Code 1.51.1, the setting `editor.overviewRulerLanes` doesn't exists anymore. – thiagobraga Dec 10 '20 at 18:08
  • 2
    Note: The settings in the quoted bit need to be placed under a section called `workbench.colorCustomizations` – binaryfunt Jan 18 '21 at 17:20
19

These decorators indeed indicate changes in your source. Green marks code added, red marks code removed. You can disable this in your settings under the key scm.diffDecorations (possible value: all, gutter, overview, none.)

To hide the indicators from the scrollbar, you can override the theme styles to make the indicators transparent:

"workbench.colorCustomizations": {
    // Scrollbar
    "editorOverviewRuler.addedForeground": "#0000",
    "editorOverviewRuler.modifiedForeground": "#0000",
    "editorOverviewRuler.deletedForeground": "#0000",

    // Gutter (same as tweaking scm.diffDecorations?)
    "editorGutter.addedBackground": "#0000",
    "editorGutter.modifiedBackground": "#0000",
    "editorGutter.deletedBackground": "#0000"
}

Note: the example uses the #RGBA shorthand rather than #RRGGBBAA

xxbbcc
  • 16,930
  • 5
  • 50
  • 83
idleberg
  • 12,634
  • 7
  • 43
  • 70
  • This seems like the right answer, but, oddly enough, when I set `scm.diffDecorations` to `"none"`, it has no effect, even after restarting VS Code. – Cameron Bieganek May 29 '18 at 22:37
  • 1
    Looks like a bug to me. The decorators are hidden from the overview ruler when you set it to `"gutter"`, but I guess you really want to hide those from everywhere. – idleberg May 30 '18 at 08:41
  • 1
    On my system it appears that none of the settings for `scm.diffDecorations` remove the decorations in the overview ruler/scroll bar. However, I'm using VS Code for Julia coding, and turning off the Julia linter via the `julia.runlinter` setting does get rid of the decorations in the scroll bar! I guess the Source Control is not the only process capable of decorating the scroll bar. – Cameron Bieganek May 31 '18 at 00:01
  • The scrollbar appears to display more information that just this. I get *red* marks on compilation errors, *blue* marks in almost all lines and several other indicators. – Álvaro González Aug 03 '18 at 08:33
  • 1
    This answer is talking about the diff viewer for changes done to a file under version control. The question is about the scrollbar having colored dots showing where there are warnings/errors in the code. You can change their color (possibly to black) using `"workbench.colorCustomizations": { "editor[Warning|Error].forground": "#000000"}` – Ran Lottem Aug 27 '19 at 14:38
2

The green marks are changes that you have saved, yellow marks are changes that have not been saved. Red marks the location of errors.

You can see how to disable features here

Moffen
  • 1,817
  • 1
  • 14
  • 34
  • 1
    no it's not. it marking the matches you have in tab. If you have 10 div tag, you click on one of the divs. the scroll bar will display 10 stripes with color. – angry kiwi Jul 20 '19 at 05:08
  • @angrykiwi Maybe it does both? I was referring to if it's opened a code document, not an HTML document. – Moffen Jul 21 '19 at 23:50
2

Based on the various comments made here

It seems there is no actual option disable those colors once and for all, but you can hide its border, hide the display of the cursor and set all otherwise displayed colors to a fully transparent black (invisible color).

This distilled config that you can enter in the settings' JSON view works for me (VS Code 1.74.2)

{
 "editor.hideCursorInOverviewRuler": true,
 "editor.overviewRulerBorder": false,
 "workbench.colorCustomizations": {
    "editorOverviewRuler.border": "#0000",
    "editorOverviewRuler.findMatchForeground": "#0000",
    "editorOverviewRuler.rangeHighlightForeground": "#0000",
    "editorOverviewRuler.selectionHighlightForeground": "#0000",
    "editorOverviewRuler.wordHighlightForeground": "#0000",
    "editorOverviewRuler.wordHighlightStrongForeground": "#0000",
    "editorOverviewRuler.modifiedForeground": "#0000",
    "editorOverviewRuler.addedForeground": "#0000",
    "editorOverviewRuler.deletedForeground": "#0000",
    "editorOverviewRuler.errorForeground": "#0000",
    "editorOverviewRuler.warningForeground": "#0000",
    "editorOverviewRuler.infoForeground": "#0000",
    "editorOverviewRuler.bracketMatchForeground": "#0000"
  }
}
Lukas
  • 9,752
  • 15
  • 76
  • 120