Hinweis
Seit Kurzem ist dieser Artikel zum Teil hinfällig, denn Microsoft hat inzwischen bekannt gegeben, jQuery in Zukunft nativ unterstützen zu wollen. Für das aktuelle Visual Studio gibt es von Microsoft bereits einen entsprechenden Patch und die jQuery-Truppe veröffentlicht hierfür spezielle Dokumentationsdateien, sodaß der Header Generator nicht mehr notwendig ist.
Informationen gibt es u.a. in Scott Guthrie's Artikel jQuery Intellisense in VS 2008 vom 21.11.2008...
Einiges ist im Netz geschrieben worden über die JavaScript-Intellisense-Möglichkeiten in der neuesten Entwicklungsumgebung von Microsoft. Jeder ist froh das es sie gibt, denn es erleichtert das Entwickeln von Web-Seiten in Zeiten der modernen Browser-Anwendungen enorm. Kaum noch ein Projekt kommt ohne Client-Programmierung in Form von JavaScript aus, es sei denn man setzt auf Plugin-Formate wie Flash oder Silverlight.
Intellisense in der Visual Studio 2008-IDE ist aber nur eine Seite der Medaille. Um effizient und schnell zu ansprechenden Ergebnissen zu kommen, ist es sinnvoll auf eines der verfügbaren JavaScript-Frameworks zu setzen, die viele Zeilen Infrastruktur-Code auf einen einfachen Aufruf zusammenzudampfen. Ein bewährtes und sehr agil weiterentwickeltes OpenSource-Framework dieser Art ist (wie schon mehrmals in diesem Blog erwähnt) jQuery. Mein absoluter Favorit...
Das jQuery etwas taugt, kann man auch daran messen, dass sich das Visual Web Developer Team, dass sich für die Entwicklung der Webdeveloper-IDE des VS 2008 verantwortlich zeichnet, desöfteren damit beschäftigt und als erste einen Artikel veröffentlicht hat, der darlegt, wie man Visual Studio dazu bekommt, die Methoden des jQuery-Objekts bequem
über das Intellisense-Menü auswählen zu können.
Eines vorweg: der in diesem Artikel angesprochene notwendige Hotfix für Visual Studio 2008 ist lediglich Grundvorrausetzung für das jQuery-Intellisense, nicht die Lösung!
Zwei Dinge muss man wissen, wenn man (auch für eigene Methoden) Intellisense nutzen möchte. Zum einen, dass es nur funktioniert, wenn der JavaScript-Code mit XML-Codekommentaren versehen ist und zweitens, wie man die notwendigen Beziehungen zwischen den Script-Dateien herstellt, die notwendig sind. Zwei Beiträge der Visual-Studio-Hilfe sind dabei lesenswert:
-
Übersicht ber IntelliSense für JScript
(ms-help://MS.VSCC.v90/MS.MSDNQTR.v90.de/dv_vseditor/html/af1a3171-c9d8-45a3-9c96-a763e3b163ef.htm)
-
Gewusst wie: Erstellen von JScript-XML-Codekommentaren
(ms-help://MS.VSCC.v90/MS.MSDNQTR.v90.de/dv_vseditor/html/a27f5b50-9807-436f-a0cf-6f3137ecbaf0.htm)
Nun ist auch klar, warum Intellisense mit jQuery nicht auf Anhieb klappt: der Original-Code des jQuery-Teams (den man für gewöhnlich einfach in sein Projekt kopiert) enthält keine XML-Kommentare!
Erzeugen der XML-Kommentare im jQuery-Code
Einige Leute haben sich die Mühe gemacht, nach jedem neuen jQuery-Release den Quellcode manuell mit entsprechenden Kommentaren zu versehen. James Hart und Duncan Smart fanden das wohl auch auf Dauer etwas zu aufwendig und haben daher den JQuery IntelliSense Header Generator entwickelt, der aus der im XML-Format veröffentlichten jQuery-Dokumentation eine beschreibende Header-Datei im
JavaScript-Format erstellt, auf die man im eigenen Projekt schlicht verweisen kann, um sie als Quelle fr das jQuery-Intellisense zu nutzen. Weiter unten in diesem Artikel habe ich für ganz Eilige den Code der beiden eingebunden, um schnell eine solche Header-Datei aus den aktuellen jQuery-Quellen erstellen zu können.
Verweisen auf jQuery im Code
Damit Visual Studio 2008 mitbekommt, welche Quellen es für das Intellisense nutzen kann, muss man im Code darauf verweisen. Bei Inline-JavaScript im HTML-Code einer ASPX-Datei ist es normalerweise damit getan, ein script-Control anzulegen und im Attribut src den relativen Pfad der JS-Datei anzugeben. Da die oben beschriebene Header-Datei aber nicht mitgerendert werden muss, sollte man zu folgendem kleinen Trick greifen:
<asp:PlaceHolder runat= "server" visible= "false" >
<script type= "text/javascript" src= "../jQuery.Intellisense.js" ></script>
</asp:PlaceHolder>
Schreibt man lieber seinen JavaScript-Code in externen Dateien, hilft am schnellsten eine entsprechende references-Direktive in der ersten Zeile der JS-Datei weiter:
/// <reference path="../jquery.intellisense.js" />
Zusammenfassung
(klicken zum vergrößern)
- Installieren des Hotfixes
- Erzeugen der jQuery-Header-Datei für die aktuellste jQuery-Version
- Einbinden der Header-Datei in den eigenen Code/li>
Weitere Links zum Thema
InfoBasis JQuery IntelliSense Header Generator
Header-Datei: