Tip of the week: ReSharper Code Templates

Note: this post is over a year old, it's very likely completely outdated and should probably not be used as reference any more. You have been warned. :-)

Last Friday I was explaining to a colleague that I can never remember how I write the jQuery document ready function. Instead I always:

  1. Go to cultiv.nl/blog
  2. Find the blog post of which I can never remember the title but it has a black icon of a t-shirt with json on it
  3. Scroll down to the comments
  4. Find the comment by Aaron
  5. Copy & paste $(function() { ... });
  6. Remove the dots
  7. Move the }); to the end of whatever I'm surrounding with document ready
  8. CTRL+K, D to reformat the file


Tedious! There's a better way to do this though.

I use ReSharper a lot and it offers a few things to surround a selected piece of code with. Out of the box, in Javascript you can only surround it with {} or (). Nice but not very useful. 

Luckily, you can add your own "surround with" templates:

  1. Go to ReSharper > Templates Explorer...
  2. Go to the Surround Templates tab
  3. Go to Javascript and hit the New Template button
  4. Give it a title and edit the template slightly:
    2012-03-18_084915
  5. Done!


Now I can just go to my javascript file and select a bit of code, hit the Surround With shortcut (for me CTRL+E,U) and get my new option:

2012-03-18_085129

And after hitting return (or "1") my document ready log is properly surrounded:

2012-03-18_085218

From now on, I'll be paying more attention to repetitive tasks and constructs I can never seem to remember and making some cool Code Templates where I can.
Sebastiaan Janssen

Dutch guy living in (and loving) Copenhagen, working at Umbraco HQ. Lifehacker, skeptic, music lover, cyclist, developer.

 

3 comments on this article

Avatar for Aaron Powell Aaron Powell | March 18 2012 11:04
Hah ironic that that comment isn't actually ideal, I've been under a false assumption for a few years that that was the best way to do a ready function in jQuery.

It's actually best to do $(document).ready(function () { ... }); from a performance point of view. The reason for this is that when you use the method I had in that blog post it jQuery has to do quite a few type checks before it works out what you're wanting to do where as the other way it doesn't do as many. Live and learn :P

Avatar for Sebastiaan Janssen Sebastiaan Janssen | March 18 2012 11:06
LOL!

Thanks, have changed the template, but too lazy to redo the screenshots now. ;-)

Avatar for 80s Rocker 80s Rocker | March 18 2012 15:35
But are the extra type checks really that big of performance hit?

1) Only called once per page and it is run client side.

2) Javascript is cached after it is loaded once.

Not saying the extra type checks are not adding some time to call, but how much. For most sites I doubt that the time difference is that big of deal, so unless it adds significant time to page load, I'll stick with shorthand method.