18 July, 2010

Getting Visual studio jQuery Intellisense working again within jQuery plugin pattern [update]

[update] final version:
(function ($) {

$ = jQuery; // HACK: Remove this line before production
your code here...
})(jQuery);
[update]


lately i've been working with jQuery in Visual studio. The Intellisense cool and all but when I tried to apply the plugin development pattern of Mike Alsup: A Plugin Development Pattern the Intellisense stopped working. After googling half way round the internet and finding no real answer I doodled around in the code and found a solution: temporarilly redefine the 'reference' to the $ sign.
Normally, in this plugin pattern you first create the closure:

// create closure

(function($) {
//your code
// end of closure

})(jQuery);

But the Intellisense doesn't like the self calling function so Intellisense breaks down. By redefining the $ sign Intellisense picks up where it left off and gives you the jQuery information. ( i haven't tested this extensively so it's still under probation):

///

///
//
// create closure
//
(function ($)
{
//
// plugin definition
//
//temporary reference to $ to get Visual studio jQuery Intellisense working again in this plugin pattern
//TODO: remove in production code


var $ = jQuery;



$.fn.hilight = function(options) {

  debug(this);
  // build main options before element iteration
  var opts = $.extend({}, $.fn.hilight.defaults, options);
  // iterate and reformat each matched element
  return this.each(function() {
  }
});

};

// end of closure

})(jQuery);

[Update]
I asked the nice people of the Web Development Tools Blog about this problem and they quickly answered:
[quote]
This is a known issue. We do not currently pass the parameter type information through the function closure for immediately executing functions. You can mitigate the issue somewhat by adding a
hint flag to your closure like so:
(function ($) {

///

your code here...
})(jQuery);
Note that the IntelliSense for '$' inside your closure will be flawed in that it will provide suggestions for members on jQuery.prototype, not jQuery itself. It will let chaining, etc. work though.
We are looking to fix this issue in a future version.
[quote]


Then i asked if just reassigning the $ to jQuery would work and Damian answered positively:

[quote]

I've done the same thing myself in the past, and it will work properly, but you just have to remember to remove the line :)

Note you shouldn't need the param hint if you assign the temp variable. You can just have:
(function ($) {
$ = jQuery; // HACK: Remove this line before production
your code here...
})(jQuery);

No comments:

Post a Comment