JavaScript Extensions Teil 2

Name: Visual Studio Code
Author: Microsoft

31. Oktober 2016 von Wade Anderson, @waderyan_

Visual Studio Code bietet standardmäßig eine ausgezeichnete Unterstützung für JavaScript. Wie bei anderen Sprachen wird JavaScript von einem Sprachdienst angetrieben. Der JavaScript-Sprachdienst wird vom TypeScript-Team implementiert, wodurch JavaScript-Entwickler die beste IntelliSense-Erfahrung nutzen können.

Aber welche anderen Funktionen erhalten Sie mit VS Code? VS Code verfügt über ein reichhaltiges Erweiterungsmodell, und viele Funktionen werden über VS Code-Erweiterungen bereitgestellt. Dieser Beitrag ist eine Fortsetzung meines vorherigen Beitrags über JavaScript-Erweiterungen.

Tipp: Installieren Sie eine dieser Erweiterungen, indem Sie auf die Schaltfläche "Erweiterungen-Ansicht" klicken, den Namen der Erweiterung in das Suchfeld eingeben und auf Installieren klicken. Erfahren Sie mehr unter Nach Erweiterungen suchen.

Debugger for Chrome

Marketplace - Debugger for Chrome

Publisher - Microsoft

Wenn Sie für das Frontend entwickeln, sehen Sie vielleicht nicht den Wert eines integrierten Debuggers in Ihrem Editor. Sie verwenden den Debugger des Browsers, richtig? Hier kommt die Debugger for Chrome-Erweiterung ins Spiel. Diese Erweiterung ermöglicht es Ihnen, Ihren JavaScript-Code im Google Chrome-Browser oder in anderen Zielen, die das Chrome Debugging Protocol unterstützen, zu debuggen, während Sie in VS Code bleiben. Kein lästiger Kontextwechsel mehr zum Debuggen!

Bevorzugen Sie das Debuggen mit einem anderen Browser? Sie finden auch Erweiterungen für Edge und Firefox.

debugger for chrome image

Git Project Manager

Marketplace - Git Project Manager

Publisher - Felipe Caputo

Obwohl nicht unbedingt eine JavaScript-Erweiterung, ist Git Project Manager ein Favorit im VS Code-Team. Diese Erweiterung scannt ein Verzeichnis (oder Verzeichnisse) nach Git-Repos und ermöglicht es Ihnen, einfach zwischen ihnen zu wechseln.

Um diese Erweiterung zu verwenden, installieren Sie sie zunächst und fügen Sie dann die folgende Konfiguration zu Ihrer settings.json-Datei hinzu.

"gitProjectManager.baseProjectsFolders": [
    "/path/to/your/base/project/folders"
]

git project manager showcase

Beautify

Marketplace - Beautify

Publisher - HookyQR

Intern verwendet VS Code js-beautify. Diese Erweiterung ermöglicht es Ihnen, eine .jsbeautifyrc-Datei anzugeben, um den Formatierungsstil für Ihren JavaScript-, CSS-, Sass- und HTML-Code festzulegen.

Sie können im Marketplace nach weiteren Formatierern suchen, indem Sie die neue Formatierer-Kategorie verwenden.

Hinweis: Für Erweiterungsautoren arbeiten wir an einem Blogbeitrag über Best Practices für Quellcodeformatierer. Bleiben Sie dran, er wird bald erscheinen.

Keymaps für Sublime Text und Atom

In diesem Abschnitt gibt es zwei Erweiterungen, eine für Atom und eine für Sublime Text. Wenn Sie diese Editoren verwendet haben, haben Sie wahrscheinlich ihre Tastenkombinationen auswendig gelernt. Diese Erweiterungen bringen die Tastenkombinationen von Atom und Sublime Text in VS Code.

Diese Erweiterungen befinden sich in der Vorschau, da wir Ihr Feedback wünschen. Es müssen noch viele Verknüpfungen aufgenommen werden, und es ist für Sie einfach, fehlende hinzuzufügen.

Gehen Sie zum GitHub-Repository der Erweiterung (Atom und Sublime Text).
Öffnen Sie die Datei package.json (Atom und Sublime Text).
Fügen Sie ein JSON-Objekt zum Abschnitt contributes.keybindings von package.json hinzu, wie unten gezeigt (Atom und Sublime Text).
Öffnen Sie einen Pull-Request.

{
  "mac": "<keyboard shortcut for mac>",
  "linux": "<keyboard shortcut for linux",
  "win": "<keyboard shortcut for windows",
  "key": "<default keyboard shortcut>",
  "command": "<name of the command in VS Code"
}

Haben Sie andere Editoren oder IDEs, für die Sie eine Keymap erstellen möchten? Befolgen Sie einfach die Anweisungen im Abschnitt contributes.keybindings und im Dokument Keybindings.

Es regnet Tastenkombinationen

Wenn Sie feststellen, dass VS Code keine Tastenkombinationsfunktion von Atom, Sublime Text oder einem anderen Produkt hat, kommentieren Sie bitte in einem dieser GitHub-Probleme (Atom und Sublime Text) oder erstellen Sie ein neues Problem.

Zusätzlich gibt es im Marketplace viele Erweiterungen, die nützliche Tastenkombinationen hinzufügen

Erstellen Ihrer eigenen JavaScript-Erweiterung

Keine Erweiterung gefunden, die Ihren Anforderungen entspricht? Sie können Ihre eigene mit JavaScript oder TypeScript erstellen! Schauen Sie sich die Dokumentation an, um mehr zu erfahren.

Wade Anderson, VS Code Teammitglied
@waderyan_