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\u0027t actually ideal, I\u0027ve been under a false assumption for a few years that that was the best way to do a ready function in jQuery.\u003Cbr /\u003E\u003Cbr /\u003EIt\u0027s 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\u0027re wanting to do where as the other way it doesn\u0027t do as many. Live and learn :P

Avatar for Sebastiaan Janssen Sebastiaan Janssen | March 18 2012 11:06
LOL!\u003Cbr /\u003E\u003Cbr /\u003EThanks, 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?\u003Cbr /\u003E\u003Cbr /\u003E1) Only called once per page and it is run client side.\u003Cbr /\u003E\u003Cbr /\u003E2) Javascript is cached after it is loaded once.\u003Cbr /\u003E\u003Cbr /\u003ENot 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\u0027ll stick with shorthand method.