VS code how to show unused variables as red

Question

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.

Answer 1

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:

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.

Answer 2

Step 1: Open Settings Page.

• Click on File. It will open file menu.
• Click/Hover on Preferences. 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. 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"
 }

Answer 3

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

Please refer to: Improve color name editorUnnecessary.foreground