2

How to make VSCode Error highlighting look more like Sublime Error highlighting

Currently, when you make a programming error in the Visual Studio Code editor, it will underline your error using a small red squiggly line. VS Code offers a few setting options to customize this error underline style, but I rather have my errors outlined not underlined. Finding a solution to this was pretty important for me, because I find the squiggly lines to be far too difficult to see when scrolling through a file.

I have found a way to change these red squiggly lines into looking more like the way Sublime Text outlines its errors. Now I find errors easier to catch in VS Code!

Steps

1

We are going to need to install the Custom CSS and JS Loader extension.

Follow the instructions listed on that page, so the extension can function correctly. Don't forget to add the correct file path to point to your CSS sheet in your VS Code JSON settings. For example, my file path looks like this:


"vscode_custom_css.imports": ["file:///Users/ianizaguirre/.vscodestyles.css"],

2

Go to your .vscodestyles.css file, and add the following code and then save your changes:


.monaco-editor .squiggly-error {
    border: 1px solid red;
    border-bottom-width: 2px;
    border-radius: 3px;
    background: none !important;
    background-color: RGBA(255, 97, 136, 0.5) !important;
}


3

Open your command palette and run the command Reload Custom CSS and JS

Thats it, It should work now! Oh, because you installed the "Custom CSS and JS Loader" extension, you might see the word "[Unsupported]" in your title bar. If you think thats annoying, then you can install the Fix VSCode Checksums extension to fix it.

2
Leave a Reply

avatar
newest oldest
Fabricio
Guest
Fabricio

Is it possible to highlight the error on the minimap?