Tools für JavaScript und TypeScript
Wenn Sie einen Teils oder die Gesamtheit Ihrer Anwendungslogik in JavaScript oder TypeScript schreiben, dann können Sie sich auf ReSharper verlassen. Die ReSharper-Funktionen sind in den Dateiformaten .js, .ts, .d.ts und .json verfügbar sowie in JavaScript-Code, der in HTML-Dateien und in JSX-Syntax eingebettet ist.
Codeanalyse
Die Codeanalysefunktionen von ReSharper helfen Ihnen beim schnellen Lokalisieren und Korrigieren von Fehlern und Problemen dank der ungefähr 100 Codeinspektionen für JavaScript- und TypeScript-Code. Hinzu kommen noch ca. 50 TypeScript-spezifische Inspektionen. Mit den Quick-Fixes können fast alle erkannten Probleme umgehend behoben werden.
In diesem Beispiel wurde = eingegeben, obwohl == beabsichtigt war, was zu einem sehr heimtückischen Bug führen kann... es sei denn, Sie nutzen ReSharper.
Sie können eine Sprachversion konfigurieren, die ReSharper beim Analysieren Ihres Codes berücksichtigt. Standardmäßig wird die Sprachversion basierend auf den Projekteinstellungen ausgewählt, aber Sie können die Einstellung gegebenenfalls überschreiben.
Navigation und Suche
Die meisten ReSharper-Funktionen zur Navigation und Suche sind auch in JavaScript und TypeScript verfügbar. Alle Befehle zur Navigation von einem bestimmten Symbol aus können wie üblich mit der Tastenkombination für Navigate To (Alt+`) aufgerufen werden.
All Ihre bevorzugten Suchbefehle, wie beispielsweise Strg+T (Go to Everything/Type) und Strg+Umschalt+T (Go to File) sind ebenfalls verfügbar. Alle unterstützten Navigations- und Suchfunktionen berücksichtigen die Eigenheiten der JavaScript- und TypeScript-Syntax. Zum Beispiel kann File Structure den Datentyp von Parametern anzeigen, sofern diese in der XML-Dokumentation angegeben sind.
Strukturelles Suchen und Ersetzen berücksichtigt ebenfalls die JavaScript-/TypeScript-Syntax.
Codevervollständigung
Die Codevervollständigungsfunktionen helfen Ihnen beim schnelleren Schreiben von JavaScript-/TypeScript-Code. Während Sie tippen, analysiert ReSharper den umliegenden Kontext und die vor kurzem von Ihnen eingegebenen Symbole, um in der Vervollständigungsliste passende Werte vorzuschlagen. Zum Beispiel kann ReSharper Ihnen beim Finden von integrierten JavaScript-Methoden und -Eigenschaften sowie von Symbolen aus JavaScript-Bibliotheken, die in dem aktuellen Projekt referenziert werden, helfen.
Kontextaktionen und andere Helfer
Mit den Kontextaktionen von ReSharper für JavaScript und TypeScript sowie ungefähr 20 TypeScript-spezifischen Aktionen können Ihren JavaScript-/TypeScript-Code mit wenig Aufwand umgestalten.
Die ganze Bandbreite der weiteren ReSharper-Funktionen zur Programmierunterstützung – Syntaxhervorhebung, Code neu anordnen, Auswahl erweitern/verkleinern und viele mehr – steht Ihnen auch für JavaScript- und TypeScript-Code zur Verfügung.
Unterstützung für JSDoc
ReSharper macht JSDoc-Kommentare viel leichter zu lesen, indem es deren Syntax hervorhebt. Wenn Sie JSDoc-Kommentare eintippen, hilft ReSharper Ihnen durch Vervollständigen Ihrer Eingaben. Sie können zum Beispiel /** über einer Funktion eingeben und ReSharper generiert für alle Parameter und für den Rückgabewert Dokumentations-Stubs. JSDoc-Typen, Typedefs und Callbacks werden ebenfalls korrekt hervorgehoben und stehen in der Codevervollständigung zur Verfügung.
Zudem sind alle JSDoc-Kommentare zu Symbolen bei den Verwendungen dieser Symbole im Schnelldokumentations-Popup verfügbar.
Unterstützung bei regulären Ausdrücken
Die Unterstützung für reguläre Ausdrücke in ReSharper umfasst die vollständige Unterstützung von regulären Ausdrücken in JavaScript-/TypeScript. Standardmäßig erkennt ReSharper reguläre Ausdrücke in Regex-Literalen,
RegExp-Konstruktoren und -Methoden sowie
Methoden des String-Objekts:
match(), search(), replace(), split(). Jedoch können Sie jederzeit ReSharper anweisen, ein beliebiges Stringliteral als regulären Ausdruck zu analysieren.
Refaktorierungen
Sie können bei JavaScript- und TypeScript-Code verschiedene Refaktorierungen nutzen, die genauso funktionieren wie in C#: Inline Variable, Introduce Variable, Introduce Variable for Substring und Rename.
In TypeScript stehen auch Refaktorierungen für Typen zur Auswahl: Copy Type, Introduce Field, Move Type to Another File or Namespace und Move to Folder.
Es gibt auch noch eine Refaktorierung, die speziell für JavaScript/TypeScript konzipiert ist: Move to Resource. Diese Refaktorierung funktioniert in JavaScript-/TypeScript-Projekten, die mit Visual-Studio-Vorlagen (z. B. Apache Cordova) erstellt wurden, und erlaubt das Verschieben von Stringliteralen in Ressourcendateien.
Alle JavaScript-/TypeScript-Refaktorierungen sind auch in der JSX-Syntax verfügbar.
Aus Verwendungen erstellen
ReSharper erlaubt Ihnen in fast allen unterstützten Sprachen, nicht existierende Symbole zu verwenden und dann korrekte Implementierungen basierend auf diesen Verwendungen zu generieren. Dies gilt auch für JavaScript und TypeScript: ReSharper schlägt für jedes unaufgelöste Symbol eine oder mehrere Möglichkeiten zur Erstellung vor.
Konstruktoren generieren
Wenn Sie Alt+Einfg auf einer TypeScript-Typdeklaration drücken, dann lässt ReSharper Sie schnell einen Konstruktor für diesen Typ erstellen. Der Konstruktor-Assistent erstellt einen nicht standardmäßigen Konstruktor, der ausgewählte Felder des Typs und des Basistyps als Parameter akzeptiert.
Member implementieren/überschreiben
Für geerbte Typen gibt es zwei spezielle Funktionen zur Codegenerierung:
- Implement missing members implementiert alle Schnittstellenmember oder abstrakte Memer, die in der aktuellen Klasse fehlen;
- Override members macht das Gleiche, aber es überschreibt auch eventuelle virtuelle Member.
Codevorlagen
ReSharper enthält Dutzende Live-Vorlagen für JavaScript und TypeScript, die alle häufig verwendeten Codekonstrukte abdecken. Es gibt auch Postfixvorlagen für TypeScript und JavaScript sowie Dateivorlagen für TypeScript-Klassen, -Schnittstellen und -Module. Sie können die Standardvorlagen um Ihre eigenen benutzerdefinierten Vorlagen erweitern.
Codestilunterstützung
ReSharper hilft Ihnen, die beiden Eckpfeiler des Codestils – Codeformatierungsregeln und Namenskonventionen – automatisch einzuhalten.
Die Codeformatierung funktioniert sogar noch besser als in C#: Drücken Sie Alt+Enter auf einem ausgewählten Codeblock und wählen Sie , um alle Formatierungsregeln, die den ausgewählten Block beeinflussen, anzuzeigen und zu konfigurieren.
Es stehen Codestilpräferenzen speziell für JavaScript und TypeScript zur Verfügung: Sie können eine einheitliche Verwendung von entweder einfachen (') oder doppelten (") Anführungszeichen für Stringliterale durchsetzen und das optionale Semikolon nach Anweisungen automatisch hinzufügen oder entfernen.
In TypeScript können Sie zusätzlich festlegen, wie Typen in Deklarationen angegeben werden
(expliziter Typname,
var oder any), ob der
public-Modifizierer explizit verwendet werden soll und wie Module zu importieren sind.
Alle Codestilpräferenzen für JavaScript und TypeScript können mit einem einzigen Befehl auf einen beliebigen Bereich angewendet werden – Sie können dafür entweder Quick-Fixes oder die Codebereinigung verwenden.
Unterstützung für Unit-Tests
ReSharper erkennt auf QUnit und Jasmine basierende Unit-Tests und hilft Ihnen, diese direkt in Visual Studio auszuführen. Sie können auswählen, welcher Browser verwendet werden soll, um Ihre JavaScript-/TypeScript-Tests auszuführen, oder Sie können Headless-Tests mit PhantomJS ausführen.
Ähnlich wie bei .NET-Unit-Tests können Sie die JavaScript-/TypeScript-Tests in Ihrer Lösung im Unit-Test-Explorer durchsuchen und sie in diesem Fenster, dem Lösungs-Explorer oder direkt im Editor ausführen. Sie können auch mehrere Unit-Test-Sitzungen verwenden.
JSLint, ESLint und TSLint
ReSharper erweitert die integrierten Regeln für die Codeanalyse mit einer Unterstützung für drei statische Analysetools: JSLint, ESLint und TSLint. Diese Linter helfen dabei, sicherzustellen, dass JavaScript- und TypeScript-Code leserlich und wartungsfreundlich ist. Sie erlauben außerdem, benutzerdefinierte Regeln hinzuzufügen, die bei der Codeanalyse von ReSharper berücksichtigt werden können.
Falls Sie bereits einen Node.js-Interpreter auf Ihrem Rechner konfiguriert haben, können Sie Linter in den Einstellungen von ReSharper unter Tools | Web Linters aktivieren.
JSON-Werthelfer und Schemakataloge
JSON-Werthelfer erlauben es ReSharper, Codevervollständigung oder -validierung für Ihre eigenen JSON-Dateien bereitzustellen. Sie können einen Helfer auf der Optionsseite JSON Value Helpers hinzufügen, wobei die Zuordnung auf einer Dateinamenmaske und/oder einer Schema-Übereinstimmung basiert. Benutzerdefinierte JSON-Schemakataloge können ebenfalls in den JSON-Optionen hinzugefügt werden.
Hinweis zu Tastenkombinationen
Alle auf dieser Seite angegebenen Tastenkürzel sind in der standardmäßigen "Visual Studio"-Tastaturbelegung von ReSharper verfügbar. Weitere Informationen zu den beiden Tastaturbelegungen von ReSharper finden Sie in der ReSharper-Dokumentation.