Customize the Color of VSCode's Error Underline Squiggles

By Dave Ceddia

Here’s a quick tip. Did you know you can change the color of VSCode’s error/warning squiggles? I’m talking about these things that underline syntax and linter errors:

A TypeScript error underlined by the default red error squiggles

You can change the color of these squiggles with a few lines of config added to settings.json.

To open VSCode’s settings file:

  • On Mac, click Code > Preferences > Settings (or press Command+,)
  • On Windows, click File > Preferences > Settings

And then you’ll probably need to click this tiny button in the upper-right to open the actual JSON file:

The button to click to open VSCode's settings.json

Then, inside the braces, paste this code. I put mine at the bottom. (make sure to add a comma to keep the JSON valid – either before or after this new block)

"workbench.colorCustomizations": {
  /* error squiggles */
  "editorError.foreground": "#6060ff",

  /* warning squggles */
  "editorWarning.foreground": "#ffc400",

  /* info squiggles */
  "editorInfo.foreground": "#35ffab"
}

For reference, here are the VSCode docs where I got these properties from. There are about a bajillion (precise number, I counted) color-related properties you can customize.

To help with visualizing the color hex code, VSCode shows the little colored boxes next to each color. But even better, it’ll pop open a color picker if you hover your mouse over one of the color values (hover over the string itself, not the colored box).

VSCode color picker window

Pick whatever colors you want, and if you want to leave something as the default, remove that line.

And with that, you’ve got custom-colored error underlines:

A TypeScript error with custom error underline color blue instead of red

Enjoy!

Learning React can be a struggle — so many libraries and tools!
My advice? Ignore all of them :)
For a step-by-step approach, check out my Pure React workshop.

Pure React plant

Learn to think in React

  • 90+ screencast lessons
  • Full transcripts and closed captions
  • All the code from the lessons
  • Developer interviews
Start learning Pure React now

Dave Ceddia’s Pure React is a work of enormous clarity and depth. Hats off. I'm a React trainer in London and would thoroughly recommend this to all front end devs wanting to upskill or consolidate.

Alan Lavender
Alan Lavender
@lavenderlens