How to check code coverage by highlighting lines react app using visual studio code - reactjs

Is there any way to highlight all lines which has code coverage for react app. I am using Jest. my editor is visual studio code.

You can use the vscode-jest plugin, it has codeLens (enabled by default).
Beware though, it's a little slow sometimes (on the first run especially). I disable 'run all on first load' option, to avoid that. The code coverage shown might be a little off sometimes due to these perf issues. But it works good enough for me most times. At the top of the file, it even shows the % of branches and line covered.
See related issue: https://github.com/jest-community/vscode-jest/issues/181

Related

vscode reformatting react js

I have VS Code and use it to edit my ReactJS application, along with several other people. I have the React Snippets extension installed but nothing else. It seems VS Code is reformatting my code, however, so that whenever I commit something with a small change, there are 20,000 diffs to review because of whitespace changes. Does anyone know why this is happening and how to stop it?

Gatsbyjs breakpoints not hit in any custom script during debugging

I'm trying to debug my gatsbyjs code in visual studio code. I followed the docs and and tried slightly different approaches like https://github.com/Microsoft/vscode-recipes/tree/master/Gatsby-js.
I can start debugging and the site builds, but my none of my breakpoints in any of my files get hit, they get instead show up as unverified.
When pausing the debug process though, I (somewhat) randomly end up in the source code of any of the external modules, and there I am able to place breakpoints that do stop...
Is there maybe some setup step or something I'm missing to make it work on page components and other react components?
Thanks for any help!
Adding a
debugger;
statement in the JS react page components definitely works for me. But be reminded that in development mode (gatsby develop), some breakpoints will get hit on startup, while others are only hit on page request. This of course depends on where you place your breakpoints.

How to pinpoint the source of angular console errors

Note: This question will be changed to eliminate old question with lower rating.
I see AngularJS console errors as follows:
Lexer Error: Unexpected next character at columns 0-0 [#] in expression [#].
The problem now is how to locate the source of this error among thousands of lines of code?
Old Question:
NOTE: This is the old question, please ignore.
I was working with a sample application from ng-flow file upload. I then moved the developed parts to my colleague's environment who is using bootstrap for CSS. I noticed that the look and feel changed on from his environment.
I realized that my colleague is using this css file:
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
and I am using the css file the came with the download:
http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
and both work fine, but they have clear differences on how the look and feel and how layout is presented.
I included both, and it seems the application is still working fine, and the look and feel is now merged.
I am just wondering if there is documentation that explains the differences and how to decide which one to use.
Appreciate your feedback.
The reason they look different is that they're referring to different versions of Bootstrap - version 3.3.7 vs version 2.3.2. (The other difference is where the files are hosted.) 3.3.7 is more recent than 2.3.2.
Generally, you want to use the most recent version available for whatever libraries you're including, unless you need to stay compatible with an older one. You shouldn't include both, though; that's going to have your users downloading a lot of redundant css.

How to create a blank ModernWindow using ModernUI?

I have followed the MUI guide provided here: http://mui.codeplex.com/wikipage?title=How%20to%20use%20your%20own%20navigation%20framework
but that doesn't work because the BlankWindow resource is not available.
Then someone aswked about it here: http://mui.codeplex.com/workitem/19663
and the developer replied that the user should recompile the library using the latest source code.
I've downloaded the latest source code from here: http://mui.codeplex.com/SourceControl/latest
but upon compilation, the resulting library is the same that's distributed online.
So at the moment I am confused in regard to solving this issue. Could anyone provide some support please?
Do you use Resharper?
Look here, this is maybe only designer problem.
I have the same issue... But I can normaly build and run my application.
They say:
Weird. I am having the same issue on my machine (VS2012 + Resharper).
It works fine when I run it but it's failing to build in TeamCity. Ill
keep investigating...
I am running a program created via the MUI template in VS. Try to
remove it from resharper error/warning. Resharper can force a simple
warning to an error if a wrong setting is set.

Silverlight 4 Out-Of-Browser issues: app displays blank (white) screen, no exceptions thrown, no breakpoints hit

I'm having issues with Silverlight 4 Out-Of-Browser, as specified in the title.
What I did:
Update project settings to enable Out-Of-Browser. This enabled OOB, but when I ran the app in this way it just displayed a white screen.
What I have done to try to fix this:
All references to the System.Windows.Browser.HtmlPage (to avoid DOM interaction) have been removed as per various sources including this SO question and this blog post.
Remove any references to SizeChangedEventHandler as per this SO question.
Clean projects/solution, including ideas such as deleting *.suo files as per this blog post
Uninstalling the installed OOB app, reinstalling
Also:
As commented on by "kobruleht" here, attempting to attach the debugger does not appear to work. Visual Studio (2010, SP1) reports that it is attached without help from me, but breakpoints are not being hit.
And so:
Can anyone advise on other courses of action? At the very least I'd like to be able to step through and hit breakpoints (or even break on Exceptions!)
OK, I have a resolution.
In AppManifest.xml I specified assemblies to be loaded, one of these was not loading correctly, which meant that App.xaml.cs->App()was never reached. The problem is difficult to diagnose because the program runs, with no errors or exceptions, but then displays a white screen - quite misleading.
For anyone experiencing the same problem, the simplest debugging steps to take in this case is to run the app in in-browser mode, copy the results from the Output window, then compare the results from the Output window when you try to run in OOB mode. Any discrepancies will give a good hint to the problem.
I should also mention, that I have not had trouble with SizeChangedEventHandler as mentioned above.

Resources