Make code foldable at custom locations using specific comments in Visual Studio Code? - react-native

I am working with Visual Studio Code to create react native apps. To get a better overview of my code, I would like to collapse specific code blocks. But I want to be able to decide where and what to collapse. For this, it would be really nice if a custom comment combination would trigger a folding button on the sidebar.
For example, if I write //- instead of only // at the beginning of a line it should add a collapse button on that line. Is this (or something similar) possible in Visual Studio Code?

Look at code folding by regions. See How do I collapse sections of code in Visual Studio Code for Windows?.
But I don't think you can alter the region syntax to whatever you want, it is defined by the language configuration.
Try // #region and // #endregion for javascript react. (or //#region and //#endregion)

Related

Event handler code snippet absent from PCL project in Xamarin.Forms, VS 2017

Previously in UWP apps I had used a code snippet that generated an event handler and linked it to a xaml control's event. For instance, a button and I type Click and it prompts me to create a new event handler.
In Xamarain forms, I get the same thing in UWP version of the app, but not in the MainPage.xaml inside the first project. In other words, if my app is named WorkingDemo, the snippet works in WorkingDemo.UWP project, but not in WorkingDemo. In previous versions this section was called the PCL i believe.
Also, if I type out:
Click=""
and put my cursor between the quote and hit ctrl+space nothing happens at all.
I recommend that you download Resharper for Visual Studio, it is very good and helps not only in these situations. You quickly get used to it.
About the license: I use a student license, they activate it very quickly
Almost all .Net programmers use it as their assistant
Resharper really slows down the launch and operation of visual studio. But don't always need to pay :)
As for visual studio, there is a workaround: you can write Clicked = "" in Xaml, then go to the code file and somewhere to write for example button.Clicked + = ..., then IntelliSense prompts you to generate the handler, you generate it and delete the button .Clicked + = ... from the code file.
The last thing you need to do is copy the name of the generated event handler to the xaml markup

Visual Studio Code going down to line automatically

I am using Brackets at the moment i want to switch to Visual Stuido Code but some features of Brackets are very usefull.
One of them, i use the editor narrowly, Brackets going under line automatically if it is not fit the line, but Visual Studio Code does not.
And second one also is when i design a html i can see the differences in live preview, is it possible to see it in Visual Stuido Code also?
Visual Studio Code
Brackets
You want to enable the Word Wrap in Visual Studio Code.
Go to View -> Toggle Word Wrap.
Live Preview is actually possible in every editor you use. Today's devs use task automators like Gulp or Grunt, so they are not attached to specific editor like Brackets.
Using Gulp (or Grunt) you can set up a task that will watch your files for changes and then do specific actions, like reload the page, recompile Sass files etc.
You can find more here:
https://www.youtube.com/watch?v=r5fvdIa0ETk

How do I get Visual Studio 2012 to generate code from a windows form design?

I am trying to add a simple windows form to my VB.Net project. I have used the designer to design the form how I want it with buttons, a text box and a Timer. The problem is when I try to view the code, there is only an empty class that looks like this:
Public Class MCastMain
End Class
I have set the application type to a windows form application in the project properties, and I have made a successful build of the application since doing so. I have been scrawling the internet and this forum for about half an hour now and I can't find one other person who is having this problem, nor can I find a tutorial that mentions any special steps that must be taken beyond what I have done. This is the first project I have done in Visual Studio.
I know this is probably stupid simple, but I have no idea what to do. Any help is appreciated as always.
Forms comes as partial class meaning the code is separated in two files.
The "empty" code you shown is from "mcastmain.vb" (if the file is named as the class).
With that one there is a (probably hidden) file "mcastmain.designer.vb" file which contains the generated code by the designer ; and is not meant to be modified (as any designer change will rewrite the file).
To show the hidden files you have to look in the solution explorer on the button on it's top there should be a "show all files" button. (it may be possible to do the same via the menu but I don't have VS right there to be sure where)

Code Snippet Shortcuts VB.NET

I need some small information about visual studio. Presently, I am using VS 2010. When we type "ctor + tab + tab", it will create code snippet for "Constructor" if the language Visual C#. Similarly, for prop,//,etc...
But, its not the case with VB.NET language. Can you guys provide some list of shortcuts which VS(VB.NET) supports.
Thanks in advance.
Code snippets are highly customizable code fragments intended to accomplish simple to intermediate tasks quickly; they can be inserted into your code with just a few keystrokes.
You can insert IntelliSense Code Snippets using the Code Snippet Picker or typing the shortcut name of the snippet and pressing Tab. When you know the name of the snippet you want to insert, you can do so by typing its shortcut followed by the TAB key. When you have to browse for an appropriate snippet, you can use the snippet picker, which gives you categorized lists of snippets to choose from.
Visual Basic includes a code library consisting of several hundred pieces of code, called IntelliSense code snippets, that are ready to be inserted in your application. Each snippet performs a complete programming task such as creating a custom exception, sending an e-mail message, or drawing a circle. You can insert a snippet into your source code with a few mouse clicks. You can also create your own snippets that suit your business needs, add them to the library, and then use them when needed.

Inspecting XAML in Windows 8 Store Apps / VS2012

I'm looking for a way to inspect running XAML in a Windows 8 store app. Essentially, I want firebug / chrome inspector style functionality where I can look at the XAML source generated at runtime, to debug simple layout and style issues.
I've tried Snoop, Pistachio and WPF Inspector but none work for Windows Store apps. The only one I can find which seems to work for Store apps is XAML Spy, which is €90. I can't justify that cost.
Is there any other way to inspect running XAML?
WinRT XAML Toolkit now has an actual visual - visual tree debugger.
Get it from NuGet: nuget.org/packages/winrtxamltoolkit.Debugging then call WinRTXamlToolkit.Debugging.DC.ShowVisualTree() to display the debugger tool inside of your app. It's the third option so now you can use
the WinRTXAMLToolkit.Debugging.VisualTreeDebugger class - that enables you to debug the tree in your Visual Studio
XAML Spy - which is a great commercial visual tree debugger that runs in a separate window
and now this visual tree debugger in the WinRT XAML Toolkit that works inside of your app.
The VisualTreeDebugger class from WinRT XAML Toolkit is what you could use if you want a free tool. It doesn't do as much as XAML Spy, but you get what you pay for. I thought of adding more features to it like actual visualization of what you debug, but the work required would not justify the time investment + I didn't want to step on Koen Zwikstra's turf. I am sure he is doing a great job on that tool. Anyways - VisualTreeDebugger is enough for me, so maybe it would also be enough for you.
The way you can use it is add the class to your code, add a reference in your XAML like
xmlns:debug="WinRTXamlToolkit.Debugging"
then put a hook on a control where you would like to start debugging, like
debug:VisualTreeDebugger.BreakOnLoaded="True"
which will dump the core visual tree details as text in your debugger output window (Ctrl+W,O) and break in the code that dumped your tree where you can investigate the "path" variable, which contains the list of all visual tree elements from the debugged control to the root, so you can watch their values if what you need wasn't already dumped in the output window.
Other options include
debug:VisualTreeDebugger.BreakOnTap="True"
debug:VisualTreeDebugger.BreakOnLayoutUpdated="True"
debug:VisualTreeDebugger.BreakOnLoaded="True"
debug:VisualTreeDebugger.TraceOnTap="True"
debug:VisualTreeDebugger.TraceOnLayoutUpdated="True"
debug:VisualTreeDebugger.TraceOnLoaded="True"
Since it is source code and really a single simple class - you can easily add additional things to the code to do any custom debugging you need.
XAML Spy is what you need. You find it at http://xamlspy.com.
there is a new free tool called XAML Inspector. It's available through NuGet. Just search for "xamlinspector" or get if from the project page: www.xamlinspector.com
Greetings
Christian