Visual Studio 2017 Javascript linter highlight errors - visual-studio

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.

To visualize errors list to left side of your VS window more highlight follow these steps:
Go to left bottom side of VS and drag Error List. And Drop it in center pane icon
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.

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

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!

Related

Locate all "light bulb" actions in VS 2015

Is there a way to display all of the places where Roslyn has determined that there is a style change to be made (i.e. a light bulb shows up)? I'd like to see them all in a list similar to the errors/warnings tab.
This appears to be different than both build and Intellisense warnings/errors. For instance, if I have an unused "using" statement in my C# file, this qualifies for a quick action (i.e. light bulb), but doesn't show up in the list of warnings and errors.
Just to summarize the answer, you can see all the "light bulbs" (quick action, fix or screwdriver) in the Error List window (in View menu); you need the Messages button to be enabled (next to errors and warnings) and only the items for the documents currently opened are displayed.
You should be able to find them in the Build window (use Build + IntelliSense). You may also want to take a look at JetBrains ReSharper, it has a dedicated window for code issues and picks up a good bit more than the native VS analysis does.

Turn Off XAML error underlining

This is a simple issue, and I hope someone can help
For reasons I don't think I need to explain, my XAML thinks it has some errors in it in the Visual Studio code editor (which shows as wavy blue underlines across most of my XAML).
Does anyone know how to turn this underlining off in Visual Studio 2012 ?
It's incredibly annoying, and makes my XAML hard to read
Thanks
I would suggest setting the editor for .xaml-files manually.
Go into
Tools->Options->Text Editor->File Extension
Write xaml in the Extension field and choose XML (Text) Editor from the Editor drop down and then click Add.
Your XAML files should now open as ordinary XML files, without error underlining.
You will probably loose a lot of the nice to have features of the XAML editor, but as far as I know (I've struggled a bit with this myself) it is the only way.
Found this on MSDN. There is a specific setting to disable this.
Open the Options dialog by selecting Tools > Options, and then select
Text Editor > XAML > Miscellaneous.
Uncheck the Show errors detected
by the XAML designer check box.
Article from MSDN
It is possible to hide the SquiggleShape by making the surrounding adornment layer hidden or collapsed using the Snoop tool.
To achieve this, the Snoop crosshair tool has to be dragged on the editor window with shift and ctrl keys pressed (keep them pressed a while when releasing mouse button). You should end on some Canvas (with the editor window highlighted), and below there is some ViewStack. Inside, there are some AdornmentLayer, one of which contains multiple SquiggleShape. In the properties section on the right side of the Snoop window, scroll to the Visibility row and select the value Hidden or Collapsed. Now, the squiggle lines are not visible any more.
This involves some manual work, but as long as the file stays open, the squiggle lines are hidden. In principle, it should be possible to write an extension which hides the lines automatically. However, at the moment I don't find the time to do this...
The only decent fix for this silly bug that I can find is right click on the xaml and click open with. Select source code editor (without with encoding). Not a great fix when you consider it gets rid of important errors. But it should help you read it better for the most part.
Another Option for this is to change the color of the line under: Tools > Options > Environment > Fonts and Colors. Change it to the same as the background.
It will turn it off in all other editors also though.

Better color coding for visual studio (2013)

I'm learning both Java and C# right now. I started with Java first, back in august. The class I'm using uses BlueJ as a compiler. BlueJ has this cool color coding, where it's not just key words or such, the background changes based on what exactly you're typing in.
(Because I'm terrible at explaining things, it looks like this: http://imgur.com/HvhJUgY)
It's made it so easy on my eyes. Now that I've started coding in C#, my eyes can't seem to adjust back to not having the colors. I find myself getting lost in where an if statement begins and ends, and end up having to put ridiculous amounts of space and comments between code to help me follow it better. Does Visual studio have any options to do this, or do I just have to suck it up and learn to adjust?
The colour coding is in the Fonts and Colors options. To get there select Tools/Options. In the dialog, select Environment/Fonts and Colors. For the code, you can set the options in the text editor but you can do it for all the other windows in visual studio too.
Solution:
You can download an extension. In Visual studio code, click on the button that has four squares on the right hand side of the VS code's window. Then, in the search bar, search for "Bracket Pair Colorizer 2." This extension should aid your vision when looking at code. Here's an example
picture. Also, this extension is customizable, letting you add any color you'd like to resemble different types of lines of code.
Settings
To customize your extension, under the extension name you will find a settings dial, similar in shape to the windows settings logo. Click on that, and then click on "Extension settings". From there, you have access to many useful settings.
If this solution has solved or helped you, please mark it as an answer and upvote it. Thanks!

Is it possible to hide outline margin in Visual Studio 2012?

In Visual Studio 2012 it's a lot of margins to the left of source code text: Indicator Margin, Selection Margin and Outline Margin. As an old programmer i prefer an uncluttered text, so i want all 3 margins to be hidden from me. In Text editor settings i can hide indicator and selection margins, but i didn't found how to hide an outline margins. Outline graphics (all this "+" things and ines) can be easily hidden from "edit" menu, but margins itself remains. Is it possible to hide it or such feature is not implemented? In previous versions of Visual Studio it auto-hides if "selection margin" was disabled, but now it seems that it don't hide at all :(.
Update
A little clarification why I need it. As correctly mentioned in comments, it's very unusual to have preferences for text formatting and appearance. I agree with that. Unfortunately, in my personal case, I work with text like 10 hours per day for dozens of years and my brain is kind of trained to calculate indentation from text editor left edge. And every time I work in Visual Studio my "wrong indentation" instinct is often triggered by this empty space :). Of course i can re-train myself, but since ALL editors except Visual Studio displays text close to left edge, I will try to configure Visual Studio first.
Turn off the Indicator margin with Tools + Options, Text Editor, General, untick "Indicator margin"
Turn off the Selection margin with Tools + Options, Text Editor, General, untick "Selection margin"
Turn off the Outline bar with Edit + Outlining, Stop Outlining. That is however liable to come back when you open a new file. You can make it consistent for the C# IDE with Tools + Options, Text Editor, C#, Advanced, untick "Enter outlining mode when files open". If you want to do this for other kinds of files as well then you need to write an add-in that listens for the DocumentEventsClass.DocumentOpened event.
I've created an extension for this, it's for VS2015 but if you haven't upgraded yet it should work for VS2012 as well (assuming you're using an edition that supports extensions). The source code is only a few lines and is shown in the screenshot of the posted link.
http://blogs.msdn.com/b/saraford/archive/2007/09/13/did-you-know-you-can-hide-outlining-selection-margin-without-turning-off-outlining.aspx
Tools – Options – Text Editor – General, and uncheck Selection Margin...
This work?
Go to VisualStudio->Tools->Options
Drill down to Text Editor->C#->Advanced and uncheck "Enter outlining mode when files open"
Other language editors have similar options to disable outlining mode.
Any files you have open before changing this setting need to be re-opened, or you can turn off outlining from the context menu for each open file. Easier to just close/re-open.
Hope that helps!
Here's an extension that worked perfectly for me: https://marketplace.visualstudio.com/items?itemName=JustinClareburtMSFT.HotSettings
It has custom options to hide/show:
the entire margin
breakpoint margin
line numbers
selection margin
I can't tell if anyone actually answered your question (which is mine today!). Please see http://www.codeproject.com/Articles/109611/Color-Indicator-for-Code-Changes-Track-Changes-in and particularly the "Enable / Disable" section: "Go to Tools > Options > TextEditor. In General section, you can check or uncheck the 'Track Change' option."
Agree this feature is a big visual hassle during initial development, but it can be helpful during "maintenance" changes.
Corrected per "external link" comment.

Visual Studio 2010 - cannot find color setting for identifier-matching

I am looking for the option to set the background/highlight color for identifier-matches on Visual Studio.
For example, if I have an identifier:
int myNumber=0
Now, I put my cursor on into the middle of myNumber. Visual Studio highlights all other occurrances of myNumber on the page.
I cannot, for the life of me, find the color settings for this highlighting. At the moment in my color scheme it looks very much like the color for selected text. So, it is confusing and affects my productivity.
If anyone can track this down, you will be my hero.
It's a few months late, but the setting you're looking for is Highlighted Reference.
Since this comes up in the first Google search result, I'll also add that you may also have to enable the option if the colour you have selected isn't working. This is located in various places:
Text Editor, [Basic, C#], Advanced, "Highlight references to symbol under cursor"
Text Editor, C++, Advanced, "Disable Reference Highlighting"

Resources