Visual Studio 2017 Javascript linter highlight errors

Question

I am using VS17 to edit client side Javascript files.

The built-in intellisense and linter are great, but when the linter finds an error I get only a green scribble line under the error (using dark theme).

This is way too easy to miss. I end up going back to the browser etc. only to find out a syntax error way too often.

How can I get more visual cues on linter errors. I want something on the left side, something marking the whole line from end to right (as in sublime-linter), or something else that makes it super visible that something is wrong.

Answer 1

As a slight aside from the obvious requirements to see the actual error messages, Visual Studio (certainly from 2013 onward) has an excellent feature that highlights markers in the code on the scroll bar to the right; I use it all the time as a fast navigation method - it's called the 'Enhanced Scrollbar' (a simple and effective naming convention!).

This link shows the latest version, but, being a lowly public sector developer, I use VS2013, which looks like this...

It's a little difficult to see, but notice at the bottom of the section that I'm working on there's a simple error in the code, where I've put a space in a property name (d'oh!). The bar to the right looks like a miniature version of the code, showing different coloured blocks beside what you've written. Notice that there are yellow and green blocks, showing changes to the code, magenta blocks, showing questionable spelling, and, just where you can see the white bar across the width of the miniature view, there's a red box, indicating the error in your code. This arcticle goes a little more into it.

To activate this in 2017, use the link above. For 2013, go into Tools > Options. In the search box at the top of the dialog type 'scroll bar' and make sure the highlighted areas in the screenshot below are checked or unchecked as required.

Fantastic feature - I recommend it!

Answer 2

To visualize errors list to left side of your VS window more highlight follow these steps:

1. Go to left bottom side of VS and drag Error List. And Drop it in center pane icon

   

2. After this you can easily view all errors and warnings to left pane.

   

Edit:

Move Error List to left side of you window and then a new prediction will show up like: and drop it to center .

Not drop to middle center of your editor!

EDIT 2: For highlighting the error code lines in your editor, you need two add-in to be enabled:

• Enable Productivity Power Tools will highlight errors code-files (tab).

  ---

• Enable ReSharper will highlight error lines in a code-file.

  ---

EDIT 3:

After installing Productivity Power Tools then go in VS solution explorer and select errors from dropdown:

And follow this reference.

Answer 3

Have you tried changing the "Compiler Error / Other Error / Syntax Error / Warning" colors?