THIS IS AWESOME !!!!!!!!!!!!

Blog.

How To Make VSCode Error Highlighting Look More Like Sublime Error Highlighting

Ian Izaguirre
Ian Izaguirre
Cover Image for How To Make VSCode Error Highlighting Look More Like Sublime Error Highlighting
Ian Izaguirre
Ian Izaguirre

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.

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.