VS Code schließt langsam die Lücke zwischen einem Texteditor und einer integrierten Entwicklungsumgebung (IDE). Im Kern dieses äußerst vielseitigen und flexiblen Tools liegt eine wunderbare API, die ein erweiterbares Plugin-Modell bietet, auf dem JavaScript-Entwickler relativ einfach aufbauen können. Da meine erste Erweiterung, VS Code All Autocomplete, 25.000 Downloads erreichte, wollte ich Ihnen mitteilen, was ich bei der Entwicklung und Wartung davon gelernt habe.
Trivia! Visual Studio Code teilt keine Abstammung mit der Visual Studio IDE. Microsoft verwendete die VS-Marke für sein Enterprise-Publikum, was zu viel Verwirrung führte. Die Anwendung ist auf der Kommandozeile nur Code und funktioniert überhaupt nicht wie Visual Studio. Sie bezieht mehr Inspiration von TextMate und Sublime Text als von Visual Studio. Sie teilt das Snippet-Format von TextMate (nur Mac) und verzichtet auf das XML-basierte Format, das in Visual Studio verwendet wird.
Warum Sie eine Erweiterung erstellen sollten
Auf den ersten Blick scheint VS Code keine vielen Gründe zu bieten, warum jemand Erweiterungen dafür erstellen sollte. Die Plattform hat die meisten Funktionen anderer Editoren. Das Snippet-Format ist leistungsstark, und mit Erweiterungen wie Settings Sync ist es einfach, sie über einen Gist zu teilen. Code (wortwörtlich) ist Open Source und das Team reagiert recht gut auf Anfragen. Grundlegende Unterstützung kann ohne Plugin durch die Erstellung einer „Typings“-Datei im npm-Modul bereitgestellt werden.
Dennoch ist die Erstellung von Erweiterungen für VS Code etwas, das alle Webentwickler aus folgenden Gründen ausprobieren sollten
- Spielen mit TypeScript: Viele Entwickler sind sich bei TypeScript noch unsicher. Das Schreiben einer Erweiterung in VS Code gibt Ihnen die Möglichkeit zu sehen, wie TypeScript in Aktion funktioniert und wie sehr seine Typsicherheit und Autovervollständigungsfunktionen bei Ihrem nächsten JavaScript-Projekt helfen können.
- Lernen: Das Web erhält viel Kritik für seine Leistung. VS Code demonstriert, wie Sie leistungssensitive Anwendungen in Electron entwickeln können und einige der Techniken – die Multiprozess- und Cluster-orientierte Architektur ist so gut, dass alle Electron-Apps sie einfach für ihren eigenen Gebrauch stehlen sollten.
- Spaß: Am wichtigsten ist, dass die Entwicklung von VS Code-Erweiterungen viel Spaß macht. Sie können ein eigenes Bedürfnis stillen und der Community etwas zurückgeben und so die Zeit vieler Entwickler sparen.
Trivia! Obwohl TypeScript eine eigenständige Programmiersprache mit vielen beliebten Anwendungen ist, darunter das Angular (2+)-Framework, ist VS Code das Schwesterprojekt mit dem größten Einfluss auf die Sprache. Da VS Code in TypeScript als TypeScript-Editor entwickelt wird, besteht eine starke symbiotische Beziehung zu TypeScript. Der beste Weg, die Sprache zu lernen, ist, sich den Quellcode von Visual Studio Code anzusehen.
Was eine Erweiterung tun kann
VS Code stellt mehrere Bereiche zur Verfügung, in denen eine Erweiterung Einfluss nehmen kann. Die freigelegten Kontaktpunkte könnten leicht ein Buch füllen. Aber es gibt wahrscheinlich keine Situation, in der Sie alle benötigen, daher habe ich hier eine Liste zusammengestellt.
Diese zeigen die verschiedenen Bereiche, die ab Version 1.25 erweitert werden können
| Bereich | Beschreibung |
|---|---|
| Sprachgrammatik | Variablen, Ausdrücke, reservierte Wörter usw. für Hervorhebung |
| Code-Snippets | Elemente in der Autovervollständigung mit Tab-Navigation, um bestimmte Elemente zu ersetzen |
| Sprachkonfiguration | Automatische Schließungs- und Einrückungszeichen wie Anführungszeichen, Klammern usw. |
| Hover-Aktionselement | Dokumentations-Tooltip beim Hovern |
| Code-Vervollständigung | Autovervollständigungselemente beim Tippen |
| Fehlerdiagnose | Gewellte rote Unterstreichungen zur Anzeige möglicher Fehler |
| Signaturhilfe | Methodensignatur-Tooltip beim Tippen |
| Symboldefinition | Ort des Codes, an dem das Symbol im Inline-Editor definiert ist, und zum Definitionsort springen (einschließlich eines ⌘+Hover-Tooltips) |
| Referenz | Für den Inline-Editor mit Links, allen Dateien und Orten, die mit dem Symbol verbunden sind |
| Dokument-Hervorhebung | Liste aller Positionen, an denen das ausgewählte Symbol zur Hervorhebung existiert |
| Symbol | Liste von Symbolen, die über das Befehlsmenü mit einem @-Modifikator navigierbar sind |
| Workspace-Symbol | Symbolanbieter für einen gesamten Workspace |
| Code-Aktion | Gewellte grüne Unterstreichung zur Anzeige behebbarer Fehler mit einer Korrekturaktion beim Anklicken |
| Code-Linse | Immer vorhandene Inline-Metadaten mit anklickbaren Aktionspunkten |
| Umbenennen | Unterstützung für das Umbenennen von Symbolen, die an mehreren Stellen verwendet werden |
| Dokumentformatierung | Einrückung und Formatierung für das gesamte Dokument korrigieren |
| Dokumentbereichsformatierung | Einrückung und Formatierung für ausgewählten Text korrigieren |
| Formatierung beim Tippen | Formatierung und Einrückung in Echtzeit korrigieren |
| Farbprovider | Alternative Farbauswahlmenü |
| Standardkonfigurationen | Einstellungen überschreiben und als neuen Satz von Standardwerten speichern |
| Befehl | Befehle im ⌘+P-Menü |
| Menü | Menüpunkte im Top-Level-Menü, in Menüs neben der Dokumenten-Tab-Leiste und in Kontextmenüs |
| Tastenkombinationen | Tastaturkürzel |
| Debugger | Debugger-Einstellungen zum Debuggen einer neuen oder bestehenden Sprache |
| Quellcodeverwaltung | Überschreibungen zur Unterstützung eines benutzerdefinierten Quellcodeverwaltungssystems |
| Theme | Farbdesign |
| Snippet | Wie oben bei Code-Snippets |
| Ansehen | Ein neuer Bereich in einem der angedockten Panels auf der linken Seite |
| Ansichtscontainer | Ein neues angedocktes Panel in der linken Leiste |
| TypeScript-Server-Plugins | Überschreibungen für den integrierten TypeScript-Sprachserver |
| Webview | Alternative Seite parallel zu einem Dokument, um eine benutzerdefinierte Darstellung eines Dokuments oder beliebigen benutzerdefinierten HTMLs anzuzeigen (im Gegensatz zu einem Ansichtscontainer, der an einer Seite angedockt ist) |
| Textdekoration | Dekoration am Rand des Textbereichs |
| Meldungen | Pop-ups für Fehler-, Warnungs- und Informationsmeldungen unten rechts |
| Schnellauswahl | Menü zur Auswahl von Mehrfachauswahloptionen |
| Eingabefeld | Textfeld für Benutzereingaben |
| Statusleistenelement | Symbol, Schaltfläche oder Text in der Statusleiste |
| Fortschritt | Anzeige eines Fortschrittsanzeigers in der Benutzeroberfläche |
| Baumansicht | Erstellung eines Baumes, ähnlich dem, der zur Definition des Workspaces verwendet wird (der in einer Ansicht oder einem Ansichtscontainer platziert werden kann) |
| Faltungsbereich | Benutzerdefinierte Codefaltung durch Klicken auf den Plus-Button am Rand |
| Implementierung | Der Implementierungsanbieter (Sprachen wie TypeScript können Deklaration und Implementierung getrennt haben) |
| Diff-Provider | Diff-Ansicht im Quellcodeverwaltungsmodus |
| Commit-Vorlage | Für Commits im Quellcodeverwaltungsmodus |
Darüber hinaus können Sie jede Funktionalität aufrufen, die der Benutzer in einem der Menüs mit beliebigen Parametern aufrufen kann. Es gibt Ereignisse für fast jede Funktionalität sowie viele Utility-Methoden für Dateisysteme und Textdateien.
Lassen Sie uns mit dem Erstellen beginnen
Genug der Vorrede – lassen Sie uns mit dem Erstellen einer Erweiterung beginnen, basierend auf dem, was wir gerade gelernt haben.
Erstellen der Erweiterung
Zum Erstellen einer Erweiterung beginnen Sie mit dem VS Code-Erweiterungsgenerator.
npm install -g yo generator-code
yo codeAls Nächstes konfigurieren Sie die Optionen. So habe ich die Dinge eingerichtet
TypeScript ist optional, aber sehr empfehlenswert. Nur eine weitere Erinnerung, dass VS Code sehr gut mit TypeScript funktioniert.
Nun können Sie den Ordner in VS Code öffnen. Ich empfehle, den anfänglichen Commit zu überprüfen. Sie können die generierte Schnellanleitung im Projekt durchsehen, um die Dateistruktur zu verstehen. Probieren Sie es schnell live aus. Gehen Sie zum Debug-Panel und starten Sie die Erweiterung im Debug-Modus. Setzen Sie einen Haltepunkt innerhalb der activate-Methode in extension.ts, um dies in Aktion zu verfolgen. Die „Hello World“-Anwendung registriert bereits einen Befehl, der eine Informationsmeldung in der Fußzeile auslösen kann. Gehen Sie zum Befehlsmenü mit ⌘+⇧+P (Ctrl+Shift+P unter Windows) und wählen Sie Hello World.
Sie können einen weiteren Haltepunkt im Callback von registerCommand setzen, um das Befehlsereignis zu erhalten.
Öffnen Sie package.json, um eine Beschreibung der Plugin-Konfiguration zu erhalten. Ändern Sie activationEvents zu einem spezifischeren, basierend auf dem Sprach- oder Dateiprotokolltyp, den Sie unterstützen möchten. All Autocomplete unterstützt alle Dateiformate, angezeigt durch ein *. Sie sollten auch den Abschnitt contributes überprüfen, wenn Sie zu Dingen wie Einstellungen, Befehlen, Menüpunkten, Snippets usw. beitragen möchten.
Viele dieser Beiträge haben zusätzliche JSON-Daten in derselben package.json-Datei mit allen Informationen. Einige APIs erfordern Code, der im activate-Aufruf verwendet werden muss, wie z. B. vscode.commands.registerCommand zum Erstellen eines Befehls. Für eine Autovervollständigungs-Erweiterung ist der Abschnitt contributes nicht erforderlich und kann entfernt werden.
Um dieselben All Autocomplete-Optionen in extension.ts zu verwenden, ersetzen Sie die activate-Funktion durch Folgendes
export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(vscode.languages.registerCompletionItemProvider('*', {
provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken) {
return [new vscode.CompletionItem("Hello")];
}
}));
}Sie können weitere Details zum Vervollständigungselement angeben, wie z. B. angehängte Dokumentation, indem Sie weitere Optionen im Objekt verwenden. Wenn Sie dies nun debuggen und H eingeben, sollten Sie „Hello“ im Menü der Vervollständigung sehen. Der Code zum Registrieren der meisten sprachbasierten Anbieter ist fast derselbe.
Sie können das All Autocomplete-Menü in vscode.languages sehen, das Optionen zur Registrierung von Anbietern bietet. Jeder Anbieter hat seine eigenen Parameter, die wir ähnlich wie beim Vervollständigungselementanbieter ausfüllen können.
Das Objekt document bietet Zugriff auf das Dokument mit Utility-Methoden zum Abrufen von Text an bestimmten Positionen und Bereichen. Es wird dringend empfohlen, die APIs für den Zugriff auf alle Dokumente anstelle der rohen Node.js-APIs zu verwenden.
Sie können das Dokument bei Bedarf parsen oder eine Datenstruktur (wie den in All Autocomplete verwendeten Trie) pflegen, die für die Suche nach Eingaben optimiert ist, während der Benutzer tippt.
Tipp: Wenn Sie nach APIs zur Textauswahl/-manipulation suchen, gibt es höchstwahrscheinlich bereits eine API. Sie müssen das Rad nicht neu erfinden. Sie können Text mit document.getText(document.getWordRangeAtPosition(position)) präzise abrufen. Alt+Klick auf ein beliebiges VS Code-Objekt, um zur Klassenstruktur und JSDoc-Dokumentation zu gelangen.
Veröffentlichung der Erweiterung
Sobald die Erweiterung fertig ist, ist es Zeit, sie im Marketplace zu veröffentlichen. VS Code verfügt über ein Kommandozeilentool (vsce) zur Veröffentlichung, erfordert aber die Erstellung eines Kontos.
So bereiten Sie die Erweiterung für die Einreichung vor
- Paket bereinigen: Die Dateien
package.jsonundREADME.mdliefern die Beschreibung und Details zu Ihrer Erweiterung, die im Marketplace angezeigt werden. Es ist wichtig, diese Dateien aufzuhübschen und alle fehlenden Informationen zu ergänzen, damit die Dokumentation sauber herauskommt. Gut, einige Badges und ein selbsterklärendes GIF zum Repository hinzuzufügen. - Konto erstellen: Sie müssen ein Visual Studio Team Services (VSTS)-Konto erstellen. Dies ist der einzige Ort, an dem VS Code mit Visual Studio verknüpft ist. Sie müssen sich anmelden und einen Zugriffstoken erhalten. Die VSTS-Oberfläche ist etwas verwirrend, aber Sie müssen kein neues Codeverwaltungstool lernen, um zu veröffentlichen. Gehen Sie zum Abschnitt Sicherheit, um den Zugriffstoken zu erhalten. (Machen Sie nicht denselben Fehler wie ich und verwechseln Sie das Zahnradsymbol im Menü mit Sicherheit.)
- Installieren: Verwenden Sie das Kommandozeilentool vsce, um Erweiterungen zu veröffentlichen. Es ist in npm verfügbar und extrem einfach zu bedienen.
Tipp: Der Zugriffstoken für VSTS läuft jedes Jahr ab, daher sind die Kontoinformationen äußerst wichtig. Es ist auch erforderlich, auf Kommentare im Marketplace zu antworten, obwohl die meisten Benutzer auf GitHub aktiv sind und Sie dort am ehesten Fehler und Funktionswünsche erhalten.
npm install -g vsce # One time installation
vsce create-publisher <name> # One time create publisher
vsce login # One time login. Asks for access token.
vsce publish <version> # Publish or update the extensionVS Code kompiliert Erweiterungen nicht auf dem Server. Stellen Sie sicher, dass der Ausgabeordner, der durch die Kompilierung Ihrer Erweiterung erstellt wird, aktuell ist. Achten Sie auch auf die Groß-/Kleinschreibung Ihrer Dateinamen, da falsche Dateipfade unter Linux fehlschlagen. Native Module in Node sind ein riesiger Schmerz und sollten nicht verwendet werden. Es ist unmöglich, alle Plattformvarianten für bestimmte Electron-Versionen zu kompilieren und bereitzustellen. (Jemand muss einen PhoneGap-Build für npm erstellen!) Dies wird sich im Laufe der Zeit mit WebAssembly und N-API verbessern.
Support und Wartung
Das VS Code-Team ist auf GitHub und StackOverflow sehr aktiv. GitHub ist der richtige Ort, um Fehler zu melden, die Sie in der API entdecken. Das Team reagiert recht gut, obwohl Sie den Kontext äußerst klar darstellen müssen, wie bei jedem hilfreichen Fehlerbericht.
Sie sollten ein GitHub-Repository für Ihre Erweiterung haben und damit rechnen, dass Benutzer Probleme direkt auf GitHub melden. Rechnen Sie damit, dass VS Code-Benutzer mit Tools und Technologien vertraut sind (einige von ihnen haben möglicherweise viel mehr Wissen als Sie). Obwohl es ein kostenloses Unterfangen ist, ist es wichtig, bescheiden zu bleiben und Problem-Melder wie Kunden zu behandeln.
Tipps zur Leistung
VS Code hat eine gute Leistung, da es mit einer Architektur aufgebaut ist, die Dinge wie Erweiterungen isoliert, die zu Verlangsamungen führen können. Wenn Ihre Erweiterung nicht rechtzeitig zurückkehrt, wird Ihre Ausgabe möglicherweise ignoriert.
Ein paar Dinge, die zur Aufrechterhaltung der Leistung des Editors beitragen können, sind
- Verwendung der offiziellen APIs: Es ist einfach, sie zu ignorieren und eigene zu erstellen. Die „Typings“-Datei ist wunderbar und enthält Dokumentationen für alle verfügbaren APIs. Eine fünfminütige Suche dort kann viel Zeit sparen. Wenn Sie einige Dateien benötigen, ist es in den meisten Fällen besser, VS Code aufzufordern, sie in einem Editor zu öffnen, als sie von der Festplatte zu lesen (es sei denn, Sie lesen Tausende von Dateien und lassen sie nicht geöffnet).
- Optionen anzeigen: Stellen Sie sicher, dass es eine Möglichkeit gibt, Funktionen zu deaktivieren, die auf starken Ereignissen basieren, wie z. B. jedem Tastendruck. Es mag auf Ihren Maschinen nicht bemerkbar sein, aber hier ist es nicht der richtige Ort dafür. Entwickler pflegen ihre Dotfiles für immer und verbringen Zeit mit der Durchsicht von Optionen, wenn es ein Problem gibt, das sie umgehen müssen. Es schadet nicht, eine Möglichkeit anzubieten, sich bei Bedarf elegant zurückzuziehen, wenn jeder Tastendruck nicht möglich ist.
- Kindprozess: Entwicklertools – insbesondere auf der Kommandozeile – sind extrem schnell und gut optimiert. Wenn Sie etwas benötigen, das viele Dateien betrifft, die den JavaScript-Thread überlasten könnten, rufen Sie ein natives Tool auf und bitten Sie die Benutzer höflich, die Abhängigkeit zu installieren. Electron hat Einschränkungen und wir sollten sie akzeptieren.
Zusammenfassung
VS Code ist eine sehr flexible Anwendung und stellt fast sein gesamtes Innenleben den Erweiterungsentwicklern zur Verfügung. Der Workflow zur Entwicklung und zum Debuggen von Erweiterungen ist einfach und jeder JavaScript-Entwickler sollte sich wohl dabei fühlen, sie auszuprobieren. Der größte Vorteil der Entwicklung von Erweiterungen, abgesehen von der Verbesserung unseres eigenen Lebens, ist die Möglichkeit, ein riesiges TypeScript-Projekt in Aktion zu sehen. Allein deshalb würde ich allen Benutzern empfehlen, es auf jeden Fall auszuprobieren und Ihre Erweiterungen in den Kommentaren zu teilen.
Meine Erweiterung ist im VS Code Marketplace verfügbar und ich würde mich auch über Ihr Feedback dazu freuen. 🙂