Typescript Snippets on Visual Studio - visual-studio

I would like to know if any of you guys know a way to enable the following feature on Visual Studio (either a hidden setting or an extension):
I'm used to javascript development on Visual Studio where if I type:
"if" on the text editor, it shows me a popup ("code snippet for an if statement"). Pressing ENTER the following is added:
if (true) {
}
This is not available for typescript files!
These snippets are really useful and this is just a simple example
Another basic feature I'm missing is "braces auto completion".
I am not sure if there is a way to enable it or not, but really would like these basic features available.
This also applies for the newly released Visual Studio 2015. On the other hand, Visual Studio Code seems to handle it very well.

There is an issue on Github about being able to use Javascript snippets in Typescript files, and to make the Snippet Code Manager being able to recognize Typescript as a Language.
https://github.com/Microsoft/TypeScript/issues/312

Related

How to turn ON visual studio debugger inline watch in vs 2015?

I saw some developer have visual studio inline watch without using any third party plugin. I searched in settings to turn this ON but I can not understand what option will allow me this.
I can get this feature using Entrain Inline watch but this is a paid software and I know the visual studio has a built-in feature for this. Can you let me know how can I turn this on?
See the screenshot, I can see the variable values in line using entrain third-party plugin but I want to use the visual studio's built-in option
For future referrence, I would like to share one tool that I have found useful, that is Entrian Inline Watch visual studio extension, very useful.
I'm afraid the answer is negative.
For now, Visual Studio2015 doesn't support for watching inline values in debug mode.Please check this document,it describes several ways to watch values in debug mode without using third-party plugin.
I saw some developer have visual studio inline watch without using any
third party plugin.
As I know, VS2015 doesn't have this option. But VS Code seems to support this feature now. I'm not sure if the developer you mentioned has some extension like Resharper or what. It also provides this feature like Entrain Inline watch.
If you have a requirement to achieve this feature in VS2015, I suggest you post your suggestion on DC by Help=>Send feedback=>Provide a Suggestion, if it gets enough votes, the product team would consider it.

Why Snippet Manager doesn't works?

I really want to use this plugin. But once I do "Export as Snippet", I can't see a new tab where I can manage the snippet, set the Shourcut and such (as shown in the video). I only see this popup:
What is going on? Add new item?
I've updated to the last (update 3) version of Visual Studio 2015, and I've Snippet Designer 1.6.2.
UPDATE - WORKAROUND, AND POSSIBLE FUTURE FIX
I have tested Snippet Designer with Web Forms (Web Site Projects), and it does not work as described in the video, i.e. with the snippet file being automatically created.
However, it is possible to continue working with Snippet Designer, by selecting the Project Item named Code Snippet, as follows:
Create or open a Web Site project.
Select the text you wish to make a Snippet. Right click and select Export as Snippet.
In the New File Dialog window that opens, you need to locate the File Type Code Snippet. The easiest way in a long list of installed File Templates is to use the search feature, typing snippet.
Click Add. The file will be added to your project, and now Snippet Designer will activate, and function as normal.
NOTE: This is creating a default C# Code Snippet file, not the snippet file that is included within the Snippet Designer .vsix archive; it makes no difference as both files are empty, and Snippet Designer has its own code for building the contents of a snippet file according to the relevant XML schema, as specified by Microsoft.
A possible reason why Snippet Designer does not automatically create the snippet file itself, as it does with other projects, is that Web Site projects use a different approach to project metadata; for example, they do not have a .csproj file, which is typically used to list the files within a project.
It could also be that the code creating the snippet file asks Visual Studio, via Automation, to create a new instance of the snippet file Item Template; on a default Visual Studio 2015 installation, the listing of available Item Templates for a Web Site Project are located in:
C:\Program Files (x86)\Microsoft Visual Studio
14.0\Web\WebNewFileItems\NewFileItems.vsdir
Snippet Designer also includes a .vsdir file that has an entry for its own bundled snippet file, the source can be viewed here:
https://github.com/mmanela/SnippetDesigner/blob/master/src/SnippetDesigner/Templates/SnippetFile.vsdir
I would suggest the author of Snippet Designer investigate if the entry here is the source of the problem.
Microsoft provide documentation for the metadata contained in .vsdir files here: Template Directory Description (.Vsdir) Files
I do actually recommend a different product. My original answer continues below:
CURRENT SITUATION
As has been documented on the Snippet Designer GitHub Issue Tracker, there are issues with specific project types not being recognised, and therefore features not available.
The last commit to the Snippet Designer GitHub project was 1 year ago (November 2015); in view of the number of unresolved issues and lack of development, I would suggest a known working open source alternative.
WORKING ALTERNATIVE
Code Snippet Studio is another free, open source project for creating, editing and managing Snippets that fully supports Visual Studio 2015 (including Update 3), and which is actively developed and released:
Code Snippet Studio
Code Snippet Studio is an extension for Visual Studio 2015 that makes it easy to create, edit, package, and share IntelliSense code snippets for Visual Studio 2015 and Visual Studio Code. For C# and Visual Basic snippets, it also provides live Roslyn code analysis as you type to immediately detect code issues.
Note that multiple languages, including C#, VB, SQL, HTML, JavaScript are supported, among others. The image below shows VB editing.
Code Snippet Studio runs as either a Tool Window in Visual Studio 2015, or, as a standalone application (which personally I find ideal for working alongside Visual Studio Code on a laptop, or to make quick updates to my snippet packages).
Features include Roslyn based intellisense and analysis while editing snippets, specification of namespaces that need to be imported to support the Snippet, the ability to export to Visual Studio or Visual Studio Code, and optionally, create a VSIX file for installation on multiple machines.
FURTHER INFORMATION
For more information, the following links are useful:
Channel 9 - A Look Behind Code Snippet Studio (with Video)
GitHub Project
Getting started Guide
Channel9 - One code snippet at a time [and more] with the Code Snippet Studio
This is a known problem, see github issues 57, 70, 84, 109. I can only suggest that you persuade addon author to fix it, or fix it yourself :)

In Visual Studio 2012, I get warnings and squiggly lines when trying to write JSX with React JS

I am using a separate javascript file to put my React JS JSX in. When I use the example given by the documents, I get tons of Visual Studio warnings and ugly squiggly lines..
I cannot figure out a way around this.. Pretty much a deal breaker for React JS.
Visual Studio 2012 was released before ReactJs, so you can't really blame them for not supporting it.
There is some visual studio stuff here:
http://reactjs.net/
You can see support for tooling being asked here:
https://github.com/reactjs/React.NET/issues/3
with Web Essentials being one of the prime picks for asking for support (might want to add your votes!)
If you are using Resharper it might be added in the next release, JetBrains is looking to add it into WebStorm
https://youtrack.jetbrains.com/issue/WEB-10136
This is because you're essentially putting html into your javascript. I found this after a quick google search and might fix your problem: https://visualstudiogallery.msdn.microsoft.com/d65d6b29-6dd7-4100-81b1-609e5afce356
The page mentions: "Visual Studio currently doesn't have native JSX syntax support. You can edit .jsx files in regular VS JavaScript editor for now and vote for adding native JSX support in Visual Studio here (the most requested feature in WE)."

Is it possible to generate comments for TypeScript methods/classes in Visual Studio?

Is there a way to generate JSDoc comments in Visual Studio like XML comments in C#? I.g. by typing ///? There is a plugin for JavaScript. Is there something simular for TypeScript, yet?
No. There isn't anything for TypeScript yet.
You could request it as a feature either from the TypeScript Visual Studio extension, Web Essentials or write a Visual Studio extension and stick it in the library.
I've updated my extension to support JSDoc and VSDoc in both JavaScript and TypeScript for Visual Studio 2012+.
https://visualstudiogallery.msdn.microsoft.com/0cb7304b-ad78-4283-ba2b-42804657fcdd?SRC=VSIDE
DocStubsJs [Formerly known as JavaScript vsdoc Generator]
This extension's goal is to provide a simple way to add documentation
to JavaScript and TypeScript by adding comment stubs after typing in
the opening of a new documentation comment.
To make this seem like less of a shameless plug, Atomineer also supports this, though it's a paid extension (it does a lot more than just a simple stub, though)
https://visualstudiogallery.msdn.microsoft.com/7912CCF4-60B8-4132-BACE-5ACACEB7233B

How to make Roslyn Syntax Visualizer Extension work?

When Roslyn installed, it comes with a couple of great demo tools. Firstly, the most valuable I think for those who want to learn syntax trees more thoroughly is the Syntax Visualizer Tool Window which shows the syntax tree of active *.cs files.
Everything worked fine when I launched this extension and tried it in a test instance of Visual Studio. But when I have installed this extension, it's not working anymore. I still have View -> Other Windows -> Roslyn Syntax Visualizer but just an empty window tool pops up.
Does anyone have the same problem and know the solution?
I guess that maybe I need to copy DLL files which this extension produces when rebuild but I don't know where should I put it.
Later I found another interesting detail - when I launch my own extension, Syntax Visualizer Tool works! So, it works only in test instance of Visual Studio. Why it should be like that?
The Syntax Visualizer only works when you are running Visual Studio with Roslyn enabled. When you start a test instance of Visual Studio, Roslyn is automatically enabled. Manually starting Visual Studio with Roslyn can be done by adding /rootsuffix Roslyn to the shortcut, but take care that Roslyn is not finished yet. It might not be advisable to enable it by default, depending on what you are working on. Of course, you can also just create another shortcut with Roslyn, so you can choose which one you want.
If you see [Roslyn] in your code tabs in Visual Studio, then you can use the visualizer. Another way of verifying if Roslyn is enabled is to view your extensions. The Roslyn Language Services has to be there for it to work. If this is not the case, then the visualizer can be opened, but it won't show any contents.
You can find more information about the visualizer extension here.
Nico most likely has the answer. Look in the Debug properties of the Syntax Visualizer project to see that it is launching with /rootsuffix Roslyn. Also, without launching this way, you should be able to see the Syntax Visualizer in the C# REPL and C# Script editor windows; as these are Roslyn CSharp editors.

Resources