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).

[Cotspheer]

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.

👍

[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 .

[vilicvane]

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?

[mwilc0x]

Just ran into this issue today. 👍 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

[vilicvane]

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.).

[vilicvane]

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.

[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 notifications@github.com
Reply-To: Microsoft/TypeScript reply@reply.github.com
Date: Monday, June 6, 2016 at 12:43 PM
To: Microsoft/TypeScript TypeScript@noreply.github.com
Cc: Matt Kruczek kruz79@gmail.com, Comment comment@noreply.github.com
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" notifications@github.com 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
#312 (comment),
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.