TypeScript snippets in VS

[craigktreasure]

Moving this over from CodePlex (23 votes, assigned to jonturner, http://typescript.codeplex.com/workitem/938):

I would really like to be able to use a TypeScript version of the JavaScript code snippets when writing TypeScript in Visual Studio.

[RyanCavanaugh]

What kind of snippets would you like to see?

[craigktreasure]

I think all of the existing snippets for the JavaScript language would be a good start.
JSDoc snippets and auto completion would be a huge win! I would love it if TypeScript code was as quick and easy to document as it is in C# today. For example, a /// is all it takes to generate the documentation scaffolding and then I just need to add descriptions.

Also, TypeScript doesn't appear as a language in the Code Snippets Manager, so I can't add custom snippets (that i'm aware of anyways).

[NightkingCH]

I miss the language too within the Code Snippets Manager. So for me it would be great if I just could add custom snippets. That's all what I need.

[knazeri]

What kind of snippets would you like to see? @RyanCavanaugh

For starter I love /// to create a template of a documentation comment and fill in the parameters and other information. There are loads of different snippets that could make coding quicker and easier:

• ctor
• prop
• switch
• for
• try
• tryf

And a shortcut to launch the Insert Snippet menu (ie. CTRL+K, X) would be nice.
I also miss the magical smart tag (ctrl + .) to automatically import, implement interfaces, etc.. like everyday when I'm coding TypeScript in VS!

[mhegazy]

@KamyarNazeri /// comments template support should be an issue by itself. Just having snippets will not give you what you are looking for.

[knazeri]

@mhegazy What kind of issue are we talking about?

[danquirk]

He just means it's a separate feature from code snippets and should be tracked in a separate issue on the issue tracker.

[mhegazy]

yup. thanks @danquirk for the clarification, we need two issues here :)

[frodegil]

AngularJS code snippets for controllers, services, directives, etcetera would be really nice to have available in VS.

[NoelAbrahams]

@frodegil, AngularJS and code snippets for other frameworks will need to be handled by custom snippets. A custom snippet for JavaScript is defined as follows:

<CodeSnippet Format="1.0.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
    <Header>
        <Title>Closure</Title>
        <Author>Me</Author>
        <Shortcut>closure</Shortcut>
        <Description>Code snippet for a JavaScript closure</Description>
        <SnippetTypes>
            <SnippetType>Expansion</SnippetType>
            <SnippetType>SurroundsWith</SnippetType>
        </SnippetTypes>
    </Header>
    <Snippet>
        <Code Language="JavaScript">
            <![CDATA[(function () {
  $selected$
})($end$);]]>
        </Code>
    </Snippet>
</CodeSnippet>

I believe this request is for TypeScript files to support the following:
(a). Launch the "Insert Snippet" dialogue on Control+K, Control+X.
(b). Provide a set of built-in snippets (for if, try etc)
(c). Permit defining custom snippets as above.

[danquirk]

Personally I don't think snippets should be in their own menu with a long, awkward key chord to invoke. There's no reason they can't be treated like any other completion result as many other languages/editors do.

[NoelAbrahams]

Personally I don't think snippets should be in their own menu with a long, awkward key chord to invoke. There's no reason they can't be treated like any other completion result as many other languages/editors do.

:+1:

[sumitkm]

I second @NightkingCH ! If TypeScript were visible as a language in Snippet Manager we could create our own snippets and use them. Currently I if make TS snippets as JavaScript they are not usable in TS files :-(

[CodeZombieCH]

Totally agree with @NightkingCH .

[vilic]

Here's a dark way to make JS snippets work in TS... But certainly we won't use it in practice, just for fun.

1. Create a JS file and open it.
2. Rename it to .ts...
3. LOL...

And it's a shame that there is still no snippet support in TS 1.3 for VS 2013.

[knazeri]

Just out of curiosity, are snippets going to make into VS2015 final release? Or the preview release is pretty much everything we will see the final release?

[michaelwilcox]

Just ran into this issue today. :+1: please!

[Mogikan]

Add TS language to Code Snippets Manager, please!

[gravidThoughts]

12 more votes for TS Code Snippets!!!! Custom Snippets at a minimum, and maybe useful snippets out of the box.

I am repping my colleagues :)

[jon49]

An auto curry interface generator would be nice too:

http://stackoverflow.com/questions/28566969/create-programmable-snippet-for-visual-studio-with-node-js-code

[vilic]

Can we expect this to be in 1.5 tools?

[paulvanbrenk]

@vilic this looks like something we would add for 1.6, most of the work is probably in the creation of the snippet files (inc. translation, setup etc.).

[vilic]

Good to know, thanks! @paulvanbrenk

[NoelAbrahams]

I hope the new snippets are a bit radical - along the lines of @danquirk's suggestion:

Personally I don't think snippets should be in their own menu with a long, awkward key chord to invoke. There's no reason they can't be treated like any other completion result as many other languages/editors do.

I should just be able to start typing my-custom-snippet anywhere on a code file, and the snippet should be rendered at the point of the cursor upon selection.

[paulvanbrenk]

@NoelAbrahams unfortunately we (TypeScript) don't control that part of the snippet experience without a lot of customization (for my-custom-snippet), it will work that way for inbox-snippets. I will bring this up with the team that is responsible for the overall snippet experience, and you can add that as an item on http://visualstudio.uservoice.com.

[fpenarru]

+1

[araqieldev]

region snippet missing in Visual Studio 2015 :'(

[drake7707]

Some others I'd like to see that aren't mentioned yet

forof -> for(let el of elements) { ... }
forr -> for(let i = length-1; i >= 0; i--) { ... }

[Neurothustra]

can we make this happen? As in, all of it?

[sebdoucet]

This is a real problem, from your team but also from VS Team. Why snippets need to be activated or whatever other limitation. Code snippet should always be accessible for all language supported by VS... From C#, I never write a complete for or property accessor...even javascript have a better support on Visual Studio!

Sublime already have snippets for Typescript and from to long time Typescript run better on sublime... I'm about to switch definitively.

[titobf]

+1 It would be really nice to have this feature. I was going to create my own snippet for TS and then realized that it's not possible.

[gildorwang]

+1

[sambres]

+1

[DarthDerrr]

+1

[zpdDG4gta8XKpMCd]

if anyone has time please consider implementing and sharing a working example of this:

• https://msdn.microsoft.com/en-us/library/ff926100.aspx

[paulvanbrenk]

Actually you'll want to reference the Roslyn implementation[0].. since that'll solve you a bunch of time.

[0] https://github.com/dotnet/roslyn/blob/a4e375b95953e471660e9686a46893c97db70b0e/src/VisualStudio/CSharp/Impl/Snippets/CSharpSnippetInfoService.cs

[ZenSoftware]

+1

[sstorie]

Man, I just assumed this would be supported in the latest version of Visual Studio 2015, and found this while starting to create some Angular 2 snippets. I can't believe this is something that VSCode handles perfectly, but the flagship product can't...

[MCKRUZ]

Which project do we need to post on to make this a feature in Visual studio 2015?

[mhegazy]

Which project do we need to post on to make this a feature in Visual studio 2015?

you are in the right place.

[MCKRUZ]

sorry, is this something that is going to be incorporated into Visual Studio 2015 soon?

[mhegazy]

It is on the list of committed features. I do not have an ETA at the time being. there are other features/bugs that we are working on as well, and we are a small team.

[MCKRUZ]

Can the community help in any way?

[mhegazy]

Can the community help in any way?

Unfortunately no. this is part of the VS plugin code that is not open source at the moment.

[AkosLukacs]

Just adding typescript in the list of languages supported by the built in snippet engine would allow the community, or companies to define the snippets themselves. For example there are a bunch of JS snippets in the Side waffle pack. Not created by MS, but usable by anyone.

[sebdoucet]

Yep, totaly agree with that!! I've already make custom ones for JS and C# and it will take me 1h to get the most used like if,for's,get,set,class,namespace...

It's a huge lost of time to write a complete and boring for-i !!

Unlock it on VS or give the way to add a language.

[MCKRUZ]

I actually already added typescript snippets to side waffle, I'm just waiting for the typescript team to finish their piece.

On Jun 4, 2016, at 1:53 AM, Ákos Lukács [email protected] wrote:

Just adding typescript in the list of languages supported by the built in snippet engine would allow the community, or companies to define the snippets themselves. For example there are a bunch of JS snippets in the Side waffle pack. Not created by MS, but usable by anyone.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[alois-wever]

+1

[jojogeyer]

+1

[omefire]

Thank you all for the suggestions.

So far, here's the list of snippets that are being added to VS:

• alert
• cl: console.log
• class
• do: do while
• else
• for
• forin
• forr
• function
• if
• iife : (function(x) { })();
• switch
• try
• while
• with

Please, let me know if you have further suggestions.

[MCKRUZ]

Omar,

It’s more the ability to “create new” snippets that is the real rub.  The community has a ton of snippets ready to go (me included).  Any idea of when that will be available?

From: Omar Mefire [email protected]
Reply-To: Microsoft/TypeScript [email protected]
Date: Monday, June 6, 2016 at 12:43 PM
To: Microsoft/TypeScript [email protected]
Cc: Matt Kruczek [email protected], Comment [email protected]
Subject: Re: [Microsoft/TypeScript] TypeScript snippets in VS (#312)

Thank you all for the suggestions.

So far, here's the list of snippets that are being added to VS:
alert
cl: console.log
class
do: do while
else
for
forin
forr
function
if
iife : (function(x) { })();
switch
try
while
with
Please, let me know if you have further suggestions.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[omefire]

@MCKRUZ Yes, included with these changes, will also be the ability to add custom snippets.

[AkosLukacs]

Omar,

IIFE on typescript feels kind of strange with namespaces and modul
systems...

But the main news is that ts snippets are coming to VS, thanks!
On 6 Jun 2016 18:43, "Omar Mefire" [email protected] wrote:

Thank you all for the suggestions.

So far, here's the list of snippets that are being added to VS:

• alert
• cl: console.log
• class
• do: do while
• else
• for
• forin
• forr
• function
• if
• iife : (function(x) { })();
• switch
• try
• while
• with

Please, let me know if you have further suggestions.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/Microsoft/TypeScript/issues/312#issuecomment-224015667,
or mute the thread
https://github.com/notifications/unsubscribe/AAziKx16sMlvjWqliU4myNWrw7I1UPQ5ks5qJE4hgaJpZM4CSceb
.

[knazeri]

@omefire

Please, let me know if you have further suggestions.

I would say ctor to create a constructor for the containing class, which is quite handy snippet in C#

[zpdDG4gta8XKpMCd]

@omefire

consider allowing regex, javascript or c# expressions in the scripts placeholders so that they are not just dumb templates but capable of some transformations

[paulvanbrenk]

@aleksey-bykov we will consider that, but not for the initial release... the snippet infrastructure in VS doesn't allow that, and we don't want to delay this feature further ;-). Do you have an example where that would be useful.

[zpdDG4gta8XKpMCd]

here is an example of regex transformations https://manual.macromates.com/en/snippets

[paulvanbrenk]

@aleksey-bykov I was looking for a TypeScript specific example what is a case where you would use this?

[zpdDG4gta8XKpMCd]

@paulvanbrenk, as far as see it snippets are language agnostic, because they just generate output text (that happened to be a piece of code) based on some input text or lack of thereof

back to your question, in my pet project in TypeScript I use the following snippet a lot:

export type SomeSingletonKind = 'some-singleton-kind';
export const someSingletonKind : SomeSingletonKind = 'some-singleton-kind';

Example: https://github.com/aleksey-bykov/commandlining/blob/master/failing.ts

export type UnexpectedCharacter = 'unexpected-character';
export const unexpectedCharacter: UnexpectedCharacter = 'unexpected-character';

export type UnhandledState = 'unhandled-state';
export const unhandledState: UnhandledState = 'unhandled-state';

export type UnspecifiedParameterName = 'unspecified-parameter-name';
export const unspecifiedParameter: UnspecifiedParameterName = 'unspecified-parameter-name';

export type UnfinishedArgument = 'unfinished-argument';
export const unfinishedArgument: UnfinishedArgument = 'unfinished-argument';

export type UnspecifiedArgument = 'unspecified-argument';
export const unspecifiedArgument: UnspecifiedArgument = 'unspecified-argument';

export type UnspecifiedCommand = 'unspecified-command';
export const unspecifiedCommand: UnspecifiedCommand = 'unspecified-command';

export type UnexpectedEndOfInput = 'unexpected-end-of-input';
export const unexpectedEndOfInput: UnexpectedEndOfInput = 'unexpected-end-of-input';

export type UnspecifiedCommandOrParameter = 'unspecified-command-or-parameter';
export const unspecifiedCommandOrParameter: UnspecifiedCommandOrParameter = 'unspecified-command-or-parameter';

export type UnattendedCharacter = 'unattended-character';
export const unattendedCharacter: UnattendedCharacter = 'unattended-character';

export type UnexpectedCommand = 'unexpected-command';
export const unexpectedCommand: UnexpectedCommand = 'unexpected-command';

export type UnexpectedBuilderState = 'unexpected-builder-state';
export const unexpectedBuilderState: UnexpectedBuilderState = 'unexpected-builder-state';

export type UnexpectedParameterName = 'unexpected-parameter-name';
export const unexpectedParameterName: UnexpectedParameterName = 'unexpected-parameter-name';

export type ErrorCode = UnhandledState | UnspecifiedParameterName | UnfinishedArgument
    | UnspecifiedArgument | UnexpectedCharacter | UnattendedCharacter
    | UnexpectedEndOfInput | UnspecifiedCommand | UnspecifiedCommandOrParameter
    | UnexpectedCommand | UnexpectedBuilderState | UnexpectedParameterName;

As you can see the spellings of type-literal, type-alias-name and constant-identifier are all different: Pascal, Dashed, Camel

It means I cannot use snippets based solely on templates, because I need to apply a transformation to get the case I need. This is where I wish snippets had transformations.

[ruslanss]

i desperately need these for TypeScript: https://visualstudiogallery.msdn.microsoft.com/5d11e28f-0f7c-4f6e-ae50-699fcd5a3500

would save me a LOTTA of time

[zpdDG4gta8XKpMCd]

for those who can't wait anymore, VS Code can do TypeScript very well and it has snippets

[paulvanbrenk]

Snippets will be part of VS "15" post Preview 4.

For smarter snippets I opened: #10309

[MaklaCof]

I installed Microsoft Visual Studio Enterprise 15 Preview 4, but I don't see any options to insert snippet.
Tried with:

• Edit -> InstalliSense -> Insert snippet (doesn't exist)
• Ctrl + k, Ctrl + x
• Right click -> Insert Snippet

In Tools -> Code Snippets Manager I don't see TypeScript in Language drop down.
How can I insert snippet?

[paulvanbrenk]

@MaklaCof Snippets for TypeScript is not available in Preview 4, but will be in the next release.

[MaklaCof]

Then someone should fix Milestone to avoid confusion.

[lorenlew]

@paulvanbrenk, as you mentioned "Snippets will be part of VS "15" post Preview 4."
what about VS 2015?

[paulvanbrenk]

@lorenlew unfortunately we won't be back porting them VS 2015.