CODEWITHSUNDEEP
visual-studio-code
Simpleton
Simpleton

Reputation: 6415

VS code how to show unused variables as red

My editor settings have graying out enabled for unused imports and variables: "editor.showUnused": true

But how can I change it so that instead of being grayed out, the line has a red background?

This is a Javascript file.

unused variable import in vscode

Upvotes: 23

Views: 62012

Answers (4)

LearnUseZone
LearnUseZone

Reputation: 159

You can use following settings in file settings.json.
Font color and background color cannot be changed, only opacity can be changed.
If the last 2 digits are FF, it means that Opacity is set to 1 which means completely opaque element.
It doesn't matter what are the 1st 6 digits, only the last 2 digits matters.
There's some default opacity which is overridden by this setting.
Example:

"workbench.colorCustomizations": {
    "editorUnnecessaryCode.opacity": "#000000FF"
}

In addition, we can add colored underlying.
Example:

"workbench.colorCustomizations": {
    "editorUnnecessaryCode.border": "#FF0000"
}

Note: to activate previous settings, you need to use:

{
    "editor.showUnused": true
}

Upvotes: 4

Yuvraj Patil
Yuvraj Patil

Reputation: 8774

Step 1: Open Settings Page.

  • Click on File. It will open file menu.
  • Click/Hover on Preferences(In MacOS, Preferences option is moved under Code tab). It will open Preferences menu.
  • Click on Settings option. It will open the settings page.

Step 2: Open settings.json.

  • On settings page, Click on Appearance tab (In latest VS Code, Appearance tab is moved under Workbench tab). It will show Appearance options.
  • Inside that check for Color Customizations option. It would have link Edit in settings.json. Click on that link.
  • It will open settings.json

Step 3: Update the setting.

  • Use editorUnnecessaryCode.border to update border color of Unnecessary Code.
"workbench.colorCustomizations": {
   "editorUnnecessaryCode.border": "#ff0000"
 }

Upvotes: 16

Jeff
Jeff

Reputation: 746

While messing around in the Visual Studio Code (v1.38.0) settings.json for a colorblind coworker, I found success with this setting:

"workbench.colorCustomizations": {
  "editorUnnecessaryCode.border": "#dd7aab"
},

The ^ setting does not exactly solve your desire for a red background, but it does provide an alternative that will help accentuate the unused item. This is what it looks like for us:

enter image description here

enter image description here

FYI: I had failures while playing around with the following settings:

editorUnnecessary.foreground
editorUnnecessaryCode.foreground

"workbench.colorCustomizations": {
  "editorUnnecessary.foreground": "#dd7aab"
}

"workbench.colorCustomizations": {
  "editorUnnecessaryCode.foreground": "#dd7aab"
}

The VSCode team needs to finalize the plan and documentation for the theming of the unused (unnecessary) code.

Upvotes: 53

Junhan Sui
Junhan Sui

Reputation: 36

As far as I know, It seems like this option was removed from version 1.25.

Please refer to: Improve color name editorUnnecessary.foreground

Upvotes: 2

Related Questions