Monday, October 11, 2010

VS2010 Code Snippets for Java Script

Just random notes about another "cool VS2010 feature"

"Visual Studio 2010 will include more than 200 built-in snippets
that you can immediately use when you install the product."

Excelent ;-) there are 13 "all useless" Java Script
snippets for basic lang constructs that hardly anyone needs
(if someone needs them I do not need her in my team)
including "deprecated with()" and "difficult to type alert()" ;-))

+ 5 incomplete XML Comments tags for VS2010 intellisence"
+ 3 MS Ajax snippets

Compared to easy creation of Toolbox items (drag and dropp)
the creation process of snippets
(XML file, edit, save, import etc..)
seems to be bit complicated if not unusable.

Snippet Designer

http://snippetdesigner.codeplex.com/
This helps with creation specially "extract snipped" context menu but still...
a lot of clicking to finish the snipped.
And if you make mistake (wrong language, wrong folder)
all gets complicated again.

After 30+ mins experimenting, I have managed to create this template
(it took me 5 minutes to press F4 and change properties ;-)))

What else we get with snippets ?

http://www.switchonthecode.com/tutorials/csharp-tutorial-visual-studio-code-snippets

If your not convinced that saved you that many keystrokes, theres another handy feature. See how the first "i" is highlighted

and the second two are surrounded by dotted lines? That means that those variables are supposed to be the same - which mean

that if you edit the first "i" right after you insert the code snippet, the other "i"s change to the new name automatically.

That 'linkage' isn't kept around forever, as soon as you go and edit something other than the snippet, those dotted lines go

away and any changes that you make later on don't automatically get propagated. But pretty cool, eh?
Cool but quite useless for while and for cycles.. but keep reading

MSDN (Offical Docs)


http://msdn.microsoft.com/en-us/library/ms165392(VS.80).aspx

Shortcut

a) type cnstr,TAB or cn,TAB,TAB and it will generate whole thing
b) change cnstr and p
and you have your own jQuery style construction pattern done.

After someone skilled creates template in 2-20 minutes
and ensures distribution of template to
"some sort of sharable location"
every "developer" can monkey type
and learn and memorize nothing.....

Next catch: Shortcut
This text is used as a shortcut for inserting the code snippet. The text value of a Shortcut element can only contain

alphanumeric characters, hyphens ( - ), and underscores ( _ ).
from http://msdn.microsoft.com/en-us/library/ms171440(v=VS.80).aspx

This is bug of code or bug of docs, if you name your shortcut with - or _
it will not work with TAB,TAB scenario.
It will be visisble in top level intellisence popup,
but will not expand.
So the best shortcut name to include some sort of namespacing is
hungarian notation as aitkCnstr, aitkModule, aitkSynchro etc...

So far...

I admit, this may be too quick experience but
i'm not impressed and I will love my "old memory" for obvious tasks
or
old fashion Toolbox + replace for more esoteric snippets.

I may write more when I learn more...

My first trial:

save somewhere to:
My Documents\Visual Studio 2010\Code Snippets\Visual Web Developer\My JScript Snippets\cnstr.snippet


<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<CodeSnippet Format="1.0.0">
<Header>
<Keywords>
<Keyword>construction</Keyword>
</Keywords>
<SnippetTypes>
<SnippetType>Expansion</SnippetType>
</SnippetTypes>
<Title>cnstr (jQuery style)</Title>
<Author>a.in.the.k</Author>
<Description>construction pattern ala jQuery</Description>
<HelpUrl>
</HelpUrl>
<Shortcut>aitkCnstr</Shortcut>
</Header>
<Snippet>
<Declarations>
<Literal Editable="true">
<ID>cnstr</ID>
<ToolTip>cnstr</ToolTip>
<Default>cnstr</Default>
<Function>
</Function>
</Literal>
<Literal Editable="true">
<ID>p</ID>
<ToolTip>p</ToolTip>
<Default>p</Default>
<Function>
</Function>
</Literal>
</Declarations>
<Code Language="jscript" Kind="type decl"><![CDATA[(function (window, undef) {

function $cnstr$($p$) {
/// <param name="$p$" type="String"></param>
/// <returns type="$cnstr$" />
return new $cnstr$.prototype.$cnstr$($p$);
}

$cnstr$.prototype = {
$cnstr$: function ($p$) {
this.$p$ = $p$;
}
};
$cnstr$.prototype.$cnstr$.prototype = $cnstr$.prototype;

// exports
window.$cnstr$ = $cnstr$;
})(window);]]></Code>
</Snippet>
</CodeSnippet>
</CodeSnippets>

1 comment:

  1. A 131 ready made Visual Studio 2010 Code Snippets for use with jQuery

    http://jquerysnippets.codeplex.com/

    ReplyDelete