JavaScript IntelliSense mit Visual Studio 2013


Schon oft habe ich versucht mit der IntelliSense von JavaScript und Visual Studio 2013 warm zu werden, meist hat dies aber nicht wirklich funktioniert. Jetzt habe ich mich doch noch einmal damit auseinander gesetzt und es sogar hinbekommen. Dabei ist es eigentlich ganz einfach, wenn man einmal weiß worauf man zu achten hat.

Damit die IntelliSense für JavaScript im VS 2013 auch funktioniert, ist die Datei “_references.js” direkt im “Scripts” Ordner notwendig (per Konvention). In dieser Datei werden alle JavaScript Dateien referenziert für die man eine intelligentere IntelliSense von VS angezeigt bekommen möchte, z.B.:

image

Datei “_references.js”:

/// <autosync enabled="true" />
/// <reference path="jquery-2.1.3.js" />
/// <reference path="jquery-2.1.3.intellisense.js" />
/// <reference path="angular.js" />
/// <reference path="angular.intellisense.js" />
/// <reference path="moment-with-locales.min.js" />
/// <reference path="bootstrap.js" />
/// <reference path="testApp.js" />

Damit die Dateien hier erscheinen gibt es zwei Möglichkeiten.

1. Man fügt diese hier selbst per Drag And Drop hinzu, in dem man einfach eine JavaScript Datei anklickt und in die Datei “schiebt”

2. Man kann über die rechte Maustaste der Datei “_references.js” das Untermenü aufrufen und hier findet man die folgenden zwei Menüpunkte:

image

Wenn man auf “Update JavaScript References” klickt, dann werden alle JavaScript Dateien des aktuellen Projekts der Datei hinzugefügt. Wenn man dann noch “Auto-sync JavaScript References” auswählt, dann wird der Datei der Eintrag “autosync” hinzugefügt, der bereits in meinem Beispiel vorhanden ist. Wenn die “autosync” Funktion aktiviert ist, erkennt VS von selbst wenn neue Dateien dem Projekt hinzugefügt werden und fügt diese von selbst der “_references,js” hinzu. Außerdem werden Dateien auch automatisch umbenannt oder wenn man diese Verschiebt wird der Pfad in der “_references.js” Datei von VS automatisch angepasst.

So das war es prinzipiell schon zum “aktivieren” vom “verbessertem” JavaScript für das Visual Studio. Wer sich aber die Referenzliste oben genau anschaut, der erkennt schnell, das hier z.B. auch zwei Dateien verlinkt sind die “*.intellisense.js” heißen. Dabei handelt es sich um eine erweiterte IntelliSense für diese Bibliotheken, soweit ist weiß (hier bin ich gern für Kommentare offen). Es kann zumindest nicht schaden, diese Dateien zumindest für jQuery einzubinden, denn ich bekomme hier z.B. die folgende IntelliSense angezeigt:

image

Wenn man eigene JavaScript Dateien schreibt und hier auch eine IntelliSense mit Kommentaren und Typen haben möchte, dann kann man einfach JsDoc Kommentare in den eigenen JavaScript Dateien einfügen, z.B.:

/**
 * Erstellen eines Benutzers
 * 
 * @param {string} name Der Name des Benutzers der angelegt werden soll
 * @param {number} alter Das Alter des Benutzers der angelegt werden soll
 * @returns {boolean} 
 */
function CreateUser(name, alter) {
    //Wurde erfolgreich erstellt
    return true;
}

/**
 * Erstellen eines Benutzers
 * 
 * @param {string} name Der Name des Benutzers der angelegt werden soll
 * @param {string} nachname Der Nachname des Benutzers der angelegt werden soll
 * @param {number} alter Das Alter des Benutzers der angelegt werden soll
 * @returns {boolean} 
 */
function CreateUser(name, nachname, alter) {
    //Wurde erfolgreich erstellt
    return true;
}

Dann erhält man zumindest eine einfache IntelliSense wenn man auf diese Funktionen zugreift:

image

Probleme beim Einstellen der IntelliSense für JavaScript

Natürlich hatte ich auch Probleme beim Einrichten der IntelliSense und bei mir lag es primär an der Verwendung von Resharper. Denn wenn ich die IntelliSense von Resharper für JavaScript verwendet habe, dann wurde immer nur “alles” angezeigt und nicht “intelligent” ausgewählt. Erst nachdem ich die IntelliSense von Resharper für JavaScript deaktiviert hatte unter “Resharper –> Options –> Environment –> IntelliSense –> General” habe ich einfach “Custom IntelliSense” eingestellt und für JavaScript deaktiviert bzw. VS aktiviert. Dann habe ich noch in den Visual Studio Optionen unter “Tools -> Options –> Text Editor –> JavaScript –> General” die folgenden beiden Optionen ausgewählt und dann wurde auch die passende IntelliSense im Editor angezeigt.

image

Außerdem ist die Liste der IntelliSense Optionen für eine Bibliothek sinnvoll beschränkt. Wie z.B. für MomentJs werden nur die passenden Funktionen angezeigt.

image

Ob die IntelliSense für JavaScript bei Resharper immer Probleme macht, kann ich nicht beurteilen, ich zumindest habe das Verhalten bei mehreren Installationen so beobachten können.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s