29

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.
8
  • 2
    I believe this is called the "overview ruler". Commented May 29, 2018 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? Commented May 29, 2018 at 22:16
  • 1
    Yeah, I find it a bit distracting, but I haven't given it a chance to win me over yet. Commented May 29, 2018 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. : ) Commented Jun 5, 2021 at 16:01
  • Does this answer your question? How can you disable Gutter Indicators in VS Code?
    – TylerH
    Commented Nov 30, 2023 at 17:46

4 Answers 4

28

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.
3
  • v1.45 will add editorOverviewRuler.background : only works in minimap is enabled and on the right.
    – Mark
    Commented Apr 29, 2020 at 17:09
  • 2
    Currently on VS Code 1.51.1, the setting editor.overviewRulerLanes doesn't exists anymore. Commented Dec 10, 2020 at 18:08
  • 2
    Note: The settings in the quoted bit need to be placed under a section called workbench.colorCustomizations
    – binaryfunt
    Commented Jan 18, 2021 at 17:20
21

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

5
  • 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. Commented May 29, 2018 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
    Commented May 30, 2018 at 8: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. Commented May 31, 2018 at 0: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. Commented Aug 3, 2018 at 8: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
    Commented Aug 27, 2019 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

2
  • 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
    Commented Jul 20, 2019 at 5:08
  • @angrykiwi Maybe it does both? I was referring to if it's opened a code document, not an HTML document.
    – Moffen
    Commented Jul 21, 2019 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"
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.