VS Code: Eine eingehende Überprüfung für WordPress-Entwickler

Microsoft hat einen schlechten Ruf. Im Laufe der Jahre haben sie sich den Ruf erworben, etwas hinter der Zeit zu stehen und weniger benutzerfreundlich zu sein. Vor Jahren hätten sie es vielleicht sogar verdient. Aber nicht mehr. Die neuesten Projekte von Microsoft sind plattformübergreifend, intuitiv und verschieben die Grenzen der Technologie. Hier kommt Visual Studio Code ins Spiel. Seit seiner Veröffentlichung im Jahr 2015 hat sich VS Code für viele Entwickler zum Defacto-Code-Editor entwickelt, der Sublime Text und Atom als die Top-Optionen hervorhebt. Und das sagt viel aus. Lassen Sie uns Ihnen erklären, warum VS Code so großartig ist und wie Microsoft unser ganzes Vertrauen zurückgewonnen hat.

Visual Studio Code: Open-Source und lieben es

Oberflächlich betrachtet sieht Visual Studio Code wie die meisten anderen Editoren aus. Syntaxhervorhebung, dunkles Thema, Erweiterungen usw. Aber wenn Sie etwas tiefer graben, sehen Sie, dass die Erfahrung, die Sie in VS Code machen, im Gegensatz zu vielen anderen Editoren und IDEs einfach glatt und – verzeihen Sie das Wortspiel – erhaben ist.

Das größte Plus an VS Code ist, dass es Open Source ist. Aber auch Atom (und es ist technisch auch im Besitz von Microsoft, seit sie GitHub erworben haben). Darüber hinaus hat Microsoft es unter der MIT-Lizenz veröffentlicht, der mildesten und offensten der Open-Source-Lizenzen. Für ein Unternehmen, das in der Vergangenheit mit Patenten und deren geistigem Eigentum ziemlich eng umgegangen ist, ist dies ein großer Schritt.

Aufgrund dieser Lizenzierung verfügt VS Code über eine eingefleischte Community von Entwicklern, die die Software nicht nur für ihr Berufsleben verwenden, sondern auch zum Editor selbst oder zu einigen der vielen Erweiterungen und Plugins beitragen, die zur Anpassung verfügbar sind. Es gibt einige Diskussionen über den Umfang der MIT-Lizenz für Visual Studio Code, aber das sollte weder Benutzer noch die Mehrheit der Entwickler betreffen.

Eine All-In-One-IDE?

Hier ist die Frage der Stunde: Ist VS Code ein Code-Editor oder eine IDE? Es verfügt über eine integrierte Git-Integration, Terminalzugriff und Bash, eine Debugging-Konsole und eine spezielle Art von Syntaxhervorhebung und Codevervollständigung namens IntelliSense.

All dies ist sofort nach dem Download möglich, ohne Erweiterungen oder Anpassungen. Normalerweise sind solche Funktionen, die vom offiziellen Entwicklungsteam integriert und aktualisiert werden, in Premium-Apps wie PhpStorm verfügbar. Aber mit VS Code… wird diese Grenze verwischt. Es bietet viele IDE-ähnliche Funktionen.

Aber am Ende, es ist nicht ganz voll IDE. Sie erhalten kein Standard-Code-Refactoring, keine offiziellen sprachspezifischen Updates und keine Zukunftssicherung und die anderen schwergewichtigen Dinge, die eine IDE durcharbeiten kann. Das heißt, es gibt eine Visual Studio-IDE. Es ist ein separates Premium-Produkt, das Microsoft seit Jahren entwickelt, und Visual Studio Code ist nur ein weiteres Mitglied der Visual Studio-Familie. Wenn Sie also nach einer vollwertigen, schwergewichtigen IDE suchen, können Sie eine von MS bekommen. Aber das ist ehrlich gesagt eine ziemlich knappe Sekunde.

Da es eine Visual Studio-IDE gibt, bezeichnen Entwickler sie auch als VS-Code oder einfach als Code und nicht als Visual Studio. Es wäre sonst einfach zu verwirrend.

VS-Code: Out of the Box

Wenn Sie es noch nicht erraten haben, gibt es viele Teile, aus denen VS Code besteht. Schauen wir uns zunächst die Grundlagen an und sehen wir uns an, wie das Ganze sofort funktioniert, bevor wir irgendeine Art von Erweiterung hinzufügen oder etwas anpassen.

Wenn Sie den Editor zum ersten Mal öffnen, werden Sie zwei Dinge bemerken:

• Das Layout und Design ähneln denen anderer Editoren und sind daher den meisten Leuten bekannt
• Es lädt schneller als die meisten anderen Code-Editoren (Atom, wir schauen in Ihre Richtung)

Wenn Sie erstaunt sind, wie reaktionsschnell es ist, können wir zur linken Seitenleiste wechseln. Hier werden die meisten der zusätzlichen Tools, die mit VS Code geliefert werden, leben.

Die Standardsymbole an der Seite öffnen beim Anklicken jeweils eine neue Spalte, deren Größe geändert und angepasst werden kann.

1. Entdecker

Ihre Standardansicht in VS Code ist die Registerkarte Explorer . Darin sehen Sie einen Abschnitt namens Open Editors , der VS-Code-Slang für Dokumente ist. Jede geöffnete Datei wird als neuer Editor betrachtet. Wenn Sie also 8 .css-Dateien geöffnet haben, sehen Sie eine Liste mit 8 Editoren.

Dann haben Sie die Liste der geöffneten Programme , die möglicherweise Dateien erstellen, die mit VS Code bearbeitet werden sollen. In diesem Beispiel sehen Sie das einzige, das ich im Hintergrund geöffnet habe, Snagit. Darunter befindet sich die Outline , die das Skelett der aktuellen Datei anzeigt. Wenn Sie eine riesige Datei erhalten und eine Top-Down-Ansicht der gesamten Struktur benötigen, funktioniert die Gliederungsansicht tatsächlich etwas reibungsloser als sogar die Minikarte auf der rechten Seite des Bildschirms.

2. Suche

Die Suchfunktion in VS Code ist phänomenal. Es ist nicht so, dass es mächtiger ist als andere Editoren (weil ich hier ehrlich sein muss: Ich liebe Find/Replace in Sublime Text). Es ist einfacher und transparenter als andere Editoren.

Wenn Sie die Suche durchführen, wird jede Instanz Ihres Suchbegriffs unten in der rechten Spalte gefunden. Sie können dann auf eine einzelne Instanz klicken, um die Position des Suchbegriffs in der Datei hervorzuheben. (Wenn Sie STRG/CMD-Klick ausführen, wird eine zweite Instanz der Datei geöffnet, die die neu ausgewählte Zeile hervorhebt.)

Wenn Sie den Begriff im zweiten Feld ersetzen möchten, wird in den Ergebnissen eine rote, durchgestrichene Version des Suchbegriffs und eine grün eingefärbte Ersetzung in den Ergebnissen angezeigt. Wenn Sie in den Ergebnissen auf ein Suchen/Ersetzen klicken, wird ein Vergleichsdiff angezeigt, um eine Vorschau der Änderungen anzuzeigen. Diese Funktion ist so nützlich, dass Sie sich fragen werden, wie Sie jemals ohne sie gelebt haben.

3. Git

Ich werde damit beginnen, dass ich in meiner Herangehensweise an Git wahrscheinlich voreingenommen bin. Ich neige dazu, ein Befehlszeilen-/Bash-Benutzer zu sein, und grafische Clients für Git haben sich für mich nie richtig angefühlt. Viele Git-Integrationen mit anderen Editoren und IDEs waren also nicht mein Ding. Die Implementierung von VS Code ist jedoch eine Mischung aus Befehlszeile und GUI und funktioniert überraschend gut, egal welche Version von Git Sie bevorzugen. Holen Sie es ... Version von Git?

Der Teil der Git-Integration in VS Code ist, dass sie einfach funktioniert. Die linke Spalte, die angezeigt wird, wenn Sie auf das Git-Symbol klicken, ist ein visueller Indikator für den Status Ihres Repositorys. Sie können auf die Auslassungspunkte (…) klicken, um die Git-Befehle zu überprüfen, die normalerweise sehr genau eingegeben werden müssten. Sie können Ihre bereitgestellten Dateien hinzufügen, festschreiben, übertragen und sogar ändern und über das Kontextmenü an verschiedenen Zweigen arbeiten.

Darüber hinaus haben Sie die Möglichkeit, im Editor selbst ein Bash-Terminal zu öffnen. Es gibt ein Terminal- Menü in der Navigationsleiste, und das in VS Code ist schnell, sauber, reibungslos und ziemlich brauchbar, ohne es anpassen zu müssen. Sie können sich bei Bedarf in mehrere Spalten aufteilen und verschiedene Verzeichnisse in verschiedenen Terminals offen halten, zwischen denen Sie per Dropdown wechseln können.

Das Terminal ist auch nicht Git-spezifisch. Es funktioniert einfach so gut mit der Funktion, dass es sich natürlich anfühlte, sie hier aufzunehmen.

4. Debug-Konsole

Die Debug-Konsole ist auch eine der Standardfunktionen in VS Code, die sie von anderen Code-Editoren unterscheidet. Zum jetzigen Zeitpunkt stehen 171 Debugumgebungen zur Installation in VS Code zur Verfügung. Sie geben keine Zählung an, aber ich wollte es wissen und dachte, Sie haben es auch, also habe ich manuell gezählt.

In den Ergebnissen finden Sie Debugger für alles, was Sie sich vorstellen können. JavaScript, CoffeeScript, Coffee, Java… wirklich alle Skripte der Marke Koffein. Sie erhalten LUA-Umgebungen und Python und Ruby, Docker, PHP, SASS, LESS und… alles. Von all den obskuren und/oder toten Programmiersprachen, für die ich versucht habe, einen Debugger zu finden, war QBasic die einzige, die keine Ergebnisse lieferte. Und es hat schon lange keiner mehr benutzt. Ich glaube wirklich, dass Sie schwer fallen werden, etwas zu finden, das in der modernen Verwendung nicht auf dem Extensions Marketplace verfügbar ist.

5. Marktplatz für Erweiterungen

Ein tieferer Blick in den Extensions Marketplace gibt Ihnen eine Vorstellung davon, welche Tools Sie von der Entwickler-Community des Editors erwarten können. Sie können im obigen Screenshot die Millionen von Installationen sehen, die einige Erweiterungen haben, und wenn Sie nicht sicher sind, wo Sie anfangen sollen, ist die Sortierung nach Installation oder Popularität möglicherweise die beste Wahl.

Mit dem Parameter @sort können Sie nach Schlüsselwörtern sortieren und suchen. Sie können aber auch auf die Auslassungspunkte (2) klicken, um ein Dropdown-Menü mit all Ihren Optionen anzuzeigen. Auch die Möglichkeiten zur Verwaltung Ihrer eigenen installierten Erweiterungen leben hier.

Sobald Sie etwas gefunden haben, das Sie installieren möchten, ist dies sehr einfach. Klicken Sie auf die grüne Schaltfläche Installieren ,

Sie müssen dann den VS Code-Editor neu laden , um die Installation abzuschließen.

Das ist es. Sobald dies abgeschlossen ist, ist Ihre Erweiterung einsatzbereit. Möglicherweise möchten Sie jedoch gelegentlich zur Registerkarte Details zurückkehren, da dort verschiedene Probleme behandelt werden, häufig durch aktualisierte und farbcodierte Tags.

Die Möglichkeit, den Abhängigkeits- und Schwachstellenstatus zu überprüfen, ist großartig, und Sie können alle offenen Probleme mit den Erweiterungen sehen und sehen, wie lange es im Allgemeinen dauert, sie zu beheben. Nicht jede Erweiterung zeigt alle Informationen an, aber wenn sie es tun, ist es unglaublich nützlich.

Tastenkombinationen und Tastenbelegungen

Vielleicht der wichtigste Teil eines Code - Editor ist die Tastaturkürzel und Tastenbelegungen. All die Dinge, über die wir bereits gesprochen haben, sind großartig und tragen wesentlich zum Erfolg des Redakteurs und des Projekts bei. Aber sobald Sie sich an eine Tastenbelegung gewöhnt haben und Ihre Finger sie über das Muskelgedächtnis verwenden, ist ein Wechsel zu einer neuen fast unmöglich.

Im besten Fall verlangsamt das Austauschen Ihren Projektzeitplan und verringert Ihre Effizienz, und im schlimmsten Fall verursachen Ihre unbeholfenen Finger katastrophale Injektionen in die Codebasis.

Egal, woher Sie bei der Migration zu VS Code kommen, die Community ist für Sie da. Ob von VIM, Emacs, Sublime Text oder sogar Notepad++, Sie können die Tastenkombinationen und Tastenbelegungen beibehalten, die Sie gewohnt sind. Sie können entweder den Extensions Marketplace mit @recommended:keymaps durchsuchen oder zu File – Preferences – Keymaps gehen, um die Liste der verfügbaren Erweiterungen anzuzeigen .

Und wenn Sie keine Vorliebe für Verknüpfungen haben, ist das auch in Ordnung. Wenn Sie das Bedürfnis verspüren, etwas anzupassen (oder nur einen Überblick über die standardmäßig in VS Code verfügbaren Tastenkombinationen erhalten möchten), können Sie zu Datei – Einstellungen – Tastenkombinationen gehen.

Sonstiges Funktionen, die Sie kennen sollten

Als allgemeinen Überblick sollten Sie an dieser Stelle das meiste von dem sehen, was VS Code als Text- und Code-Editor zu bieten hat. Das heißt, es gibt eine Handvoll nützlicher Dinge, die Sie wissen sollten.

1. Das Auswahlmenü

Dies ist nützlich, egal auf welchem ​​Entwicklungsniveau Sie sind, aber es ist besonders nützlich, wenn Sie im Allgemeinen neu im Umgang mit Editoren sind. Das Auswahlmenü hat eine Reihe von Funktionen, die für Sie von unschätzbarem Wert sind.

Insbesondere die Möglichkeit, Cursors zu Zeilenenden mit einem Klick hinzufügen zu können, ist schön und in der Lage zu sein, in das Menü zu gehen und alle Vorkommen eines hervorgehobenen Wortes, einer Phrase oder eines Snippets in der aktuellen Datei auszuwählen. Die meisten Editoren haben diese als Shortcuts, aber nicht alle haben sie so einfach beschriftet oder verfügbar wie VS Code. Es war erfrischend, sie so offen zu sehen, da sie einige der wertvollsten und bekanntesten Befehle sind, die Sie verwenden werden.

2. Das Terminal-Menü

Nur weil Sie in einem Code-Editor arbeiten, heißt das nicht, dass Sie ein Befehlszeilen-Assistent sind. Tatsächlich haben Sie sich vielleicht den Befehlszeilen- und Terminalabschnitt oben angesehen und dachten, Sie würden ihn nie verwenden.

Aber schauen Sie sich das Terminal- Menü an. Auch wenn Sie nicht viel damit machen, werden Sie einige grundlegende Befehle sehen, die Sie über das Menü ausführen können, die Ihre Entwicklung erheblich unterstützen können.

Nur der Zugriff auf diese über ein Menü, anstatt Shell-Befehle kennen zu müssen, öffnet das Terminal und die Bash- und Befehlszeile auf eine Weise, die viele Apps einfach übersehen. Es sind kleine Details wie diese, die VS Code wirklich für jeden attraktiv machen, nicht nur für erfahrene Programmierer, die von VIM oder Emacs kommen.

3. Zen-Modus

Unter dem Menü Ansicht finden Sie ein Untermenü namens Aussehen , das eine Option zum Umschalten des Zen-Modus enthält. Die anderen Optionen unter Ansicht sind es wert, ausprobiert und ausprobiert zu werden, aber ich möchte Ihre Aufmerksamkeit auf den Zen-Modus lenken, da ich denke, dass viele Leute ihn noch nie ausprobiert haben.

Verschiedene Redakteure nennen es möglicherweise mit unterschiedlichen Namen, aber die allgemeine Idee ist, dass Sie Ihren gesamten Bildschirm nur mit dem Dokument ausfüllen, das Sie gerade bearbeiten. Der Unterschied zu einem Vollbildmodus besteht darin, dass Sie nicht die App, sondern das Dokument maximieren.

Es ist schwierig, den Modus mit einem Screenshot zu präsentieren, da er nicht wirklich zeigen kann, dass der gesamte Bildschirm vom VS Code-Editor abgedeckt wird. Sogar die Windows-Taskleiste und das MacOS-Dock. Jedes Pixel der Bildschirmfläche wird von Ihrem aktuellen Projekt belegt, damit Sie sich darauf konzentrieren können und auf nichts anderes.

Und wenn es nichts für Sie ist, drücken Sie einfach ESC und Sie sind wieder in Ihrer alten Ansicht.

Es mag nicht viel erscheinen, und ich war früher ein Skeptiker. Aber nachdem ich eine ähnliche Funktion in Scrivener verwendet habe, um Belletristik zu schreiben, bin ich ein Konvertit. Sie können leichter in einen Flow-Zustand gelangen und Dinge wirklich erledigen. So viel Lob an VS Code für die Implementierung des Zen-Modus, damit wir unsere Ohrhörer anschließen und ablenkungsfrei arbeiten können, wann immer wir wollen (oder so oft wir können).

Einpacken

Alles in allem wäre es nachlässig, Visual Studio Code nicht herunterzuladen und es auszuprobieren. Microsoft hat den wahrscheinlich stabilsten, am meisten unterstützten, schnellsten und proportional leichten/funktionslastigen Editor herausgebracht. Neue Programmierer, erfahrene Entwickler oder Bastler, die die richtigen Tools finden möchten … VS Code wurde speziell für Sie entwickelt. Das ist keine leichte Aufgabe, aber VS Code ist die Bits und Bytes auf Ihrer Festplatte wert. Und vielleicht sogar noch ein Blick auf Microsoft, wenn Sie sie vorher abgeschrieben hätten.

Was sind deine Lieblingsaspekte von VS Code? Hast du den Wechsel gemacht?