How to highlight current line number in Visual Studio Code / VS Code

Question

I am in the process of migrating from Atom to VS Code, as it seems to be what all the cool kids use these days.

In atom I was able to highlight the current line number as pictured (the blue highlight in the gutter).

Is there a way to do this in VS Code? With a setting or extension? Can't find a way to do it, and really missing that obvious at-a-glance indication of where I'm working.

(I know that I can add a background to the current line itself, but this is too intrusive to the code, especially working with a variety of languages in different colours.)

Thanks!

in case anyone wants to un-highlight the line number part, "workbench.colorCustomizations": { "editorLineNumber.activeForeground": "#fff"}, Instead of #fff, you might want to put whatever color makes it work depending on the theme — Mustafa Aydın
– Mustafa Aydın, Commented Dec 12, 2020 at 11:41

vallentin · Accepted Answer · 2021-07-17 16:33:06Z

91

You could try

"editor.renderLineHighlight": "gutter"

UPDATE

In an ideal world I'd want both the gutter and the line itself highlighted, but in 2 very different colours - sadly that one doesn't seem possible, but this option is better than nothing!

Well, you may try something like settings below, liner number in different color as well as box for the line

"editor.renderLineHighlight": "all", "workbench.colorCustomizations": { "editor.lineHighlightBackground": "#00000000", "editor.lineHighlightBorder": "#0000ff" }

edited Jul 17, 2021 at 16:33

vallentin

26.5k6 gold badges70 silver badges93 bronze badges

answered Nov 17, 2020 at 17:44

Severin Pappadeux

20.4k4 gold badges45 silver badges71 bronze badges

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

3 Comments

Alex Over a year ago

Thanks, that's a setting I hadn't come across which helps! In an ideal world I'd want both the gutter and the line itself highlighted, but in 2 very different colours - sadly that one doesn't seem possible, but this option is better than nothing!

Severin Pappadeux Over a year ago

@PrimalAnomaly Glad to hear. If you're satisfied with the answer, please accept it.

Alex Over a year ago

Thank you, I couldn't get it exactly how I wanted using built in settings, but have used the gutter highlight you suggested along with a plugin called "Highlight Line" to set the code line highlight, and now it is perfect! Your tips let me set the gutter highlight colour I want. The plugin lets me set the code highlight background colour I want (I also had to set the plugin highlight line thickness to the line-height of my font). The plugin can be found here: marketplace.visualstudio.com/…

Phil · Accepted Answer · 2024-12-12 18:59:51Z

To address dark and light themes

In the settings.json file add something like:

 "workbench.colorCustomizations": { "[Default Dark+]": { "editor.lineHighlightBackground": "#00000071", }, "[Default Light+]": { "editor.lineHighlightBackground": "#0000003f", } },

If you are using a different theme, simply change the name after Default. Example:

 "workbench.colorCustomizations": { "[Default Dark Modern]": { "editor.lineHighlightBackground": "#46492d", }, "[Default Light Modern]": { "editor.lineHighlightBackground": "#f4ff93", } },

Collectives™ on Stack Overflow

How to highlight current line number in Visual Studio Code / VS Code

2 Answers 2

3 Comments

To address dark and light themes

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

To address dark and light themes

Comments

Linked

Related