Wenn Sie ein Entwickler oder Programmierer sind, suchen Sie wahrscheinlich immer nach neuen Tools, um Ihren Arbeitsablauf zu optimieren. Glücklicherweise gehört Visual Studio Code auf dem Mac zu den besten Code-Editoren, die Sie finden können.
Visual Studio Code (VS Code) bietet viele Funktionen, um Ihnen beim effizienten Schreiben von Code zu helfen. In diesem Artikel erfahren Sie, wie Sie VS Code auf Ihrem Mac installieren und einige der besten Erweiterungen und Themes durchgehen können, um loszulegen.
Lesen Sie weiter und machen Sie sich bereit, Ihren Arbeitsablauf auf die nächste Stufe zu heben!
Voraussetzungen
Dieses Tutorial wird eine praktische Demonstration sein. Wenn Sie mitmachen möchten, stellen Sie sicher, dass Sie ein macOS-Gerät haben. Dieses Tutorial verwendet Apple Silicon (M1), daher können die Schritte leicht unterschiedlich sein, wenn Sie einen Intel-basierten Mac haben.
Visual Studio Code für Mac herunterladen
Visual Studio Code (VS Code) ist ein kostenloser, Open-Source-Code-Editor von Microsoft, verfügbar für Windows, Linux und macOS. Aber wie bei anderen Tools müssen Sie VS Code auf Ihrem System herunterladen und installieren.
1. Öffnen Sie Ihren bevorzugten Webbrowser und gehen Sie zur VS Code-Downloadseite.
2. Klicken Sie anschließend unter dem Mac-Symbol auf Apple Silicon, um den Installationspaket für VS Code für Mac in einer ZIP-Datei herunterzuladen. Diese Apple Silicon (M1)-Version ist der neueste von Apple entwickelte Chip.
Wenn Sie einen älteren Mac mit einem Intel-Prozessor haben, klicken Sie stattdessen auf Intel Chip.
3. Schließlich öffnen Sie Ihr Terminal und führen Sie den folgenden ls-Befehl aus, um den von Ihnen heruntergeladenen VS-Code-Paketinstaller zu überprüfen.
Die Ausgabe unten zeigt den Speicherort der Zip-Datei an.
Installation von Visual Studio Code auf dem Mac
Jetzt, da Sie den VS-Code-Installer heruntergeladen haben, sind Sie bereit, VS Code auf Ihrem Mac zu installieren und einen neu definierten Code-Editor zu erleben. VS Code ist optimiert, damit Sie moderne Web- und Cloud-Anwendungen effektiver erstellen und debuggen können.
Eine weitere großartige Funktion von VS Code ist, dass es durch die Verwendung von Erweiterungen, die Sie im Marketplace finden können, Tonnen von Programmiersprachen unterstützt.
Um VS Code auf dem Mac zu installieren:
1. Wählen Sie die heruntergeladene VS-Code-Zip-Datei aus → klicken Sie auf das Auslassungszeichen-Symbol (oben rechts) → Öffnen Sie, um die ZIP-Datei zu entpacken.
Nach dem Entpacken sollten Sie eine neue Anwendung für Visual Studio Code in Ihrem Downloads-Ordner haben.
2. Führen Sie anschließend den ls-Befehl unten aus, um die Anwendungsdatei zu überprüfen. Dieser Befehl listet den Inhalt der Visual Studio Code-Anwendungsdatei auf.
Das \-Symbol ist ein Escape-Zeichen, das dem Terminal mitteilt, dass das Leerzeichen als reguläres Zeichen behandelt werden soll. Sie müssen das Escape-Zeichen verwenden, wenn ein Leerzeichen im Dateinamen vorhanden ist.
3. Führen Sie den Befehl open unten aus, um den Installer in einer neuen Instanz (-n) zu starten.
4. Klicken Sie nun auf Öffnen, um mit der Installation fortzufahren, wenn Sie die folgende Aufforderung erhalten.
Diese Warnung erscheint, weil Sie die Anwendung aus dem Internet heruntergeladen haben, was Sie sicher ignorieren können.
Nach der Installation öffnet sich die VS Code-Anwendung, und Sie werden mit der unten abgebildeten Startseite begrüßt.
Navigation durch die VS Code-Benutzeroberfläche
Sie haben VS Code erfolgreich auf Ihrem Mac installiert, aber bevor Sie mit dem Codieren beginnen, machen Sie sich zunächst mit der Benutzeroberfläche und den Funktionen von VS Code vertraut.
VS Code bietet viele Funktionen, mit denen Sie:
- Themen auswählen und ändern können, wie Ihr Editor aussieht.
- Ihr Projektordner öffnen können, damit Sie schnell zwischen Ihren Dateien hin- und herwechseln und sicherstellen können, dass Ihre Dateistruktur korrekt ist.
- Ein Quellsteuerungssystem wie Git hinzufügen können.
- Schnell Erweiterungen aus dem Marktplatz hinzufügen und so weiter.
Dies sind nur ein kleiner Teil dessen, was VS Code bieten kann. Überzeugen Sie sich selbst, wie jede Funktion Ihnen bei Ihrem Workflow hilft. Vielleicht wäre ein Themenwechsel ein guter Anfang.
1. Wählen Sie ein Thema für Ihren Editor aus der Startseite aus, behalten Sie andere Einstellungen bei ihren Standardwerten und klicken Sie auf Mark Done (unten links).
Wenn Ihnen die hellen und dunklen Themen nicht gut gefallen, klicken Sie auf Mehr Themen anzeigen und suchen Sie nach einem, das Ihr Interesse weckt.
2. Als nächstes erkunden Sie die linke Seite von VS Code, die Aktivitätsleiste, die sieben Hauptabschnitte hat. Beginnen Sie jedoch mit einem der wichtigsten Abschnitte, dem EXPLORER (Strg+Umschalt+E / Cmd+Umschalt+E).
Der Explorer zeigt die Dateien und Ordner in Ihrem Projekt an, in dem Sie ein Repository klonen können. Außerdem ermöglicht der Explorer Ihnen verschiedene Aktionen wie folgt:
- Erstellen, Löschen und Umbenennen Ihrer Dateien und Ordner in Ihrem Projekt.
- Verschieben von Dateien und Ordnern, indem Sie sie innerhalb Ihres Projektordners ziehen und ablegen.
Beachten Sie, dass „Ziehen und Ablegen“ funktioniert, wenn Dateien ausserhalb von VS Code in den Explorer verschoben werden. Wenn der Explorer jedoch leer ist, öffnet VS Code die Datei stattdessen in Ihrem Editor.
3. Klicken Sie auf das Suchsymbol (Strg+Shift+F), um den SUCH-Bereich zu öffnen, in dem Sie in Ihrem Projekt nach Dateien, Symbolen und Text suchen können.
4. Klicken Sie nun auf das Symbol für Quellcodeverwaltung (Strg+Shift+G), um den BEREICH FÜR QUELLCODEVERWALTUNG zu öffnen, in dem Sie Ihr Projekt mit Git oder einem anderen Quellcodeverwaltungssystem verwalten können.
VS Code wird mit integriertem Quellcodeverwaltungsmanagement (SCM) mit standardmäßiger Git-Unterstützung geliefert.
5. Nach SCM klicken Sie auf das Symbol „Ausführen und Debuggen“ (Strg+Shift+D), um den BEREICH „AUSFÜHREN UND DEBUGGEN: AUSFÜHREN“ zu öffnen, in dem Sie Ihr Projekt ausführen und debuggen können.
6. Klicken Sie abschließend auf das Symbol „Erweiterungen“ (Strg+Shift+X), um auf den BEREICH „ERWEITERUNGEN“ zuzugreifen, in dem Sie Erweiterungen aus dem Marktplatz installieren können.
Starten von VS Code über eine Befehlszeilenumgebung
Vielleicht verbringen Sie die meiste Zeit in einer Befehlszeilenumgebung, müssen aber schnell etwas Code schreiben. In diesem Fall wird die Konfiguration von VS Code zum Starten über eine Befehlszeilenumgebung Ihnen zugutekommen.
1. Drücken Sie (Cmd+Shift+P oder Strg+Shift+P) in VS Code, um die Befehlspalette zu öffnen, in der Sie auf alle Funktionen von VS Code zugreifen können.
2. Geben Sie im Befehlsfeld Shell-Befehl ein: Installieren Sie den Befehl „code“ in PATH ein und drücken Sie Enter. Dieser Befehl fügt die ausführbare Datei von VS Code zur PATH-Variable Ihres Systems hinzu.
3. Nach dem Hinzufügen starten Sie Ihr Terminal neu, damit die Änderungen wirksam werden. Der code-Befehl ist jetzt in Ihrem Terminal verfügbar.
4. Erstellen Sie nun eine Textdatei, fügen Sie etwas Text hinzu und speichern Sie die Datei.
5. Führen Sie schließlich die folgenden Befehle aus, um VS Code (code) zu starten, wobei der Dateipfad Ihrer Textdatei (text.txt) im vorliegenden Fall aus dem Arbeitsverzeichnis übergeben wird.
Sie sehen VS Code (auf der rechten Seite) geöffnet mit dem Inhalt Ihrer text.txt Datei im Editorfenster angezeigt. Sie können diese Datei nun mit den großartigen Funktionen von VS Code bearbeiten.
Installation von Erweiterungen für zusätzliche Funktionalitäten
Eine der besten Eigenschaften von VS Code ist, dass es sehr anpassbar ist. Wie? Sie können Erweiterungen installieren, um neue Funktionalitäten hinzuzufügen, und es stehen viele verschiedene Erweiterungen zur Verfügung.
Vielleicht möchten Sie die macOS Color Picker-Erweiterung installieren. Diese Erweiterung ermöglicht es Ihnen, native macOS-Farbauswahlfelder auszuwählen, wenn Sie mit CSS-, HTML- und JavaScript-Dateien arbeiten.
1. Navigieren Sie zum Menü „Erweiterungen“ in der Aktivitätsleiste, die drei Abschnitte hat:
- INSTALLIERT – Dieser Abschnitt zeigt die bereits installierten Erweiterungen.
- EMPFOHLEN – Dieser Abschnitt zeigt empfohlene Erweiterungen basierend auf Ihrem geöffneten Dateityp an. Zum Beispiel werden empfohlene JavaScript-Erweiterungen angezeigt, wenn Sie mit einer JavaScript-Datei arbeiten.
- POPULÄR – Dieser Abschnitt zeigt die beliebtesten VS Code-Erweiterungen.
2. Geben Sie „macOS Farbauswahl“ in das Suchfeld ein und drücken Sie die Eingabetaste. Eine Liste mit übereinstimmenden Erweiterungen wird in absteigender Reihenfolge angezeigt (zuerst die meisten übereinstimmenden Erweiterungen).
Sobald Sie Ihre Ziel-Erweiterung sehen, klicken Sie auf die Schaltfläche „Installieren“ neben der Erweiterung. Die Schaltfläche „Installieren“ ändert sich in eine grüne Schaltfläche „Aktivieren“, klicken Sie also darauf, um die Erweiterung zu aktivieren.
Nach der Installation der Erweiterung wird eine Übersichtsseite für die Erweiterung rechts angezeigt, wie unten gezeigt.
3. Öffnen Sie nun eine CSS-, HTML- oder JavaScript-Datei, um die neue macOS Farbauswahl-Erweiterung zu testen.
4. Öffnen Sie schließlich die Befehlspalette (Cmd+Shift+P / Strg+Shift+P), geben Sie „Farbauswahl öffnen“ ein und drücken Sie die Eingabetaste. Das macOS Farbauswahl-Fenster wird geöffnet, wie unten gezeigt.
Verwenden Sie den Farbauswahl, um eine Farbe auszuwählen, die in Ihren Code eingefügt wird. Diese Erweiterung ist eine großartige Möglichkeit, schnell die Farbwerte zu erhalten, die Sie benötigen, ohne sich an die Hex-Codes erinnern zu müssen.
Fazit
In diesem Tutorial haben Sie gelernt, wie Sie VS Code auf Ihrem Mac installieren und Erweiterungen hinzufügen können, um die Funktionalität zu erweitern und das Schreiben von Code angenehmer zu gestalten. Zu diesem Zeitpunkt können Sie vollständig von dem profitieren, was VS Code bietet, wenn Sie an Ihrem nächsten Projekt arbeiten.
Aber hören Sie hier nicht auf! Mit diesem neu gewonnenen Wissen, warum nicht Version Control mit Git und GitHub verwenden, um Ihre Arbeit im Auge zu behalten?
Source:
https://adamtheautomator.com/visual-studio-code-on-mac/