What is meant by the colourful line markings on the left side of the editor in VS Code?

Question

Here are a few images showing what I'm referring to. They come in different colours, for example red blue and green below:

Red line markings

Blue line markings zoomed in

Green line markings zoomed in

Line markings

I couldn't find any answer while browsing. It might be because I am unable to search in a right manner.

Answer 1

These are "diff decorations". They indicate what has changed about a file.

Red means an existing line has been deleted/removed, green means a new line has been added, and blue means an existing line has been modified.

These are all comparing against a previous point in time, which is usually a "commit" in your Source Control Management / Version Control Software of choice (Ex. git, subversion, VS Code's Local History feature, etc.)

---

Their display is controlled by the scm.diffDecorations setting (SCM stands for "Source Control Management").

If you don't specify a scm.diffDecorations setting value, then the default value is "all", which means to display it in the gutter (the sidebar between the line numbers and the text being edited), the minimap, and the "overview" (decorations inside the scrollbar). You can also use the values "gutter", "minimap", and "overview" to only display decorations in one of them, or "none" to not display them at all.

As you already show in your screenshots, clicking on the decorations in the gutter opens an inline popup showing what has changed and offering action buttons to revert the change.

You may also be interested in the following related settings: scm.diffDecorationsGutterAction, scm.diffDecorationsGutterPattern, scm.diffDecorationsGutterVisibility, scm.diffDecorationsGutterWidth, scm.diffDecorationsIgnoreTrimWhitespace, and git.decorations.enabled.