Visual Studio Code (VSCode) ist einer der beliebtesten Texteditoren, der von Entwicklern häufig zum Schreiben, Debuggen und Testen von Code verwendet wird. Sie können in VSCode mit verschiedenen Programmiersprachen arbeiten, einschließlich JavaScript.
JavaScript (JS) ist eine Programmiersprache, die zum Erstellen interaktiver Webseiten verwendet wird. Die Installation von JS in VSCode ermöglicht es Entwicklern, JavaScript-Dateien zu erstellen und zu bearbeiten, wodurch eine komfortable Entwicklungsumgebung und Funktionen eines modernen Code-Editors bereitgestellt werden.
Befolgen Sie diese einfachen Schritte, um JS in VSCode zu installieren:
Schritt 1: Installieren Sie Visual Studio Code
Laden Sie zuerst Visual Studio Code von der offiziellen Website herunter und installieren Sie ihn. Gehen Sie dazu auf die VSCode-Download-Seite und wählen Sie das Paket aus, das Ihrem Betriebssystem entspricht. Führen Sie die heruntergeladene Datei aus und folgen Sie den Anweisungen des Installationsprogramms.
Anmerkung: Stellen Sie sicher, dass Ihr Betriebssystem die Systemanforderungen von Visual Studio Code erfüllt.
Schritt 2: Installieren Sie die JavaScript-Erweiterung (ES6) von Code snippets
Für die moderne JavaScript-Entwicklung in VSCode ist es praktisch, die JavaScript-Erweiterung (ES6) von Code snippets zu verwenden. Um es zu installieren, öffnen Sie Visual Studio Code und gehen Sie in der Seitenleiste zum Abschnitt «Extensions» (Erweiterungen). Geben Sie in der Suchleiste «javascript code snippets» ein und wählen Sie eine Erweiterung mit dem gleichen Namen vom Entwickler «charalampos karypidis» aus. Klicken Sie auf die Schaltfläche »Install" (Installieren) und warten Sie, bis der Installationsvorgang abgeschlossen ist.
Jetzt können Sie mit der JavaScript-Entwicklung in Visual Studio Code beginnen. Mit der JS-Installation können Sie JavaScript-Code in einer benutzerfreundlichen Entwicklungsumgebung schreiben, debuggen und testen, wodurch viele nützliche Funktionen und Funktionen des Code-Editors bereitgestellt werden.
Installieren von JavaScript in Visual Studio Code
Schritt 1: Installieren Sie den Node.js
Der erste Schritt zum Installieren von JavaScript in VS Code besteht darin, Node zu installieren.js auf Ihrem Computer. Node.js ist eine JavaScript-Entwicklungsumgebung, mit der Sie JavaScript-Code außerhalb des Browsers ausführen können. Sie können das Node-Installationsprogramm herunterladen.js von der offiziellen Website und folgen Sie den Installationsanweisungen.
Schritt 2: Installieren Sie VS Code
Nach der Installation von Node.js Sie müssen Visual Studio Code auf Ihrem Computer installieren. Auf der offiziellen Website von VS Code können Sie die Installationsdatei herunterladen und den Installationsanweisungen folgen.
Schritt 3: Öffnen Sie den Workspace in VS Code
Nachdem Sie VS Code installiert haben, müssen Sie Ihren Arbeitsbereich (Projekt) in VS Code öffnen. Sie können den Befehl "Ordner öffnen" im Menü "Datei" finden und den Ordner Ihres Projekts auswählen.
Schritt 4: Erstellen Sie eine JavaScript-Datei
Jetzt, da Ihr Arbeitsbereich geöffnet ist, können Sie eine neue JavaScript-Datei erstellen. Klicken Sie mit der rechten Maustaste in der linken Navigationsleiste auf den Projektordner und wählen Sie Neue Datei aus. Benennen Sie die Datei "script.js" (Sie können einen anderen Namen auswählen).
Schritt 5: Konfigurieren Sie die JavaScript-Syntax
Standardmäßig erkennt VS Code die Sprache der Datei basierend auf ihrer Erweiterung automatisch. Wenn jedoch Probleme auftreten, können Sie die JavaScript-Sprache in VS Code explizit angeben. Suchen Sie im unteren Bereich des Editorfensters nach der Dropdown-Liste der Sprache und wählen Sie "JavaScript" aus der Liste der Optionen aus.
Schritt 6: Beginnen Sie mit der Programmierung in JavaScript
Jetzt können Sie mit dem Schreiben von JavaScript-Programmen in Visual Studio Code beginnen. Sie können alle Funktionen und Funktionen des Editors verwenden, z. B. Code automatisch vervollständigen, Debuggen und andere JavaScript-Entwicklungstools.
Herunterladen und Installieren von Visual Studio Code
Befolgen Sie diese einfachen Schritte, um Visual Studio Code zu installieren:
- Wechseln Sie zur offiziellen Visual Studio Code-Website unter https://code.visualstudio.com /.
- Klicken Sie auf den "Download"-Button, um die Installationsdatei für Ihr Betriebssystem (Windows, macOS oder Linux) herunterzuladen.
- Nachdem der Download abgeschlossen ist, öffnen Sie die heruntergeladene Installationsdatei.
- Befolgen Sie die Anweisungen des Installationsprogramms, indem Sie die Installationsoptionen Ihrer Wahl auswählen.
- Nachdem die Installation abgeschlossen ist, starten Sie Visual Studio Code.
Jetzt haben Sie Visual Studio Code installiert und können damit beginnen, Webanwendungen einschließlich JavaScript zu entwickeln.
Öffnen von Visual Studio Code
Um mit Visual Studio Code zu beginnen, müssen Sie die folgenden Schritte ausführen:
- Laden Sie Visual Studio Code von der offiziellen Website herunter und installieren Sie ihn https://code.visualstudio.com/.
- Führen Sie die heruntergeladene Installationsdatei aus und folgen Sie den Anweisungen auf dem Bildschirm, um den Editor zu installieren.
- Öffnen Sie nach Abschluss der Installation Visual Studio Code. Sie können es im Startmenü, im Visual Studio Code-Ordner oder durch die Suche in der Liste der Anwendungen finden.
Glückwunsch! Jetzt haben Sie Visual Studio Code installiert und geöffnet und sind bereit, mit JavaScript zu arbeiten.
Konfigurieren von Visual Studio Code für die Arbeit mit JavaScript
Schritt 1: Installieren von VS Code
Der erste Schritt besteht darin, den VS Code Editor selbst zu installieren. Sie können es von der offiziellen Website herunterladen unter https://code.visualstudio.com/. Befolgen Sie die Anweisungen für Ihr Betriebssystem.
Schritt 2: Installieren von Erweiterungen
Nachdem Sie VS Code erfolgreich installiert haben, öffnen Sie den Editor und gehen Sie zum Abschnitt Erweiterungen, indem Sie im linken Bereich auf das Erweiterungszähler-Symbol klicken oder den Befehl Ansicht → Erweiterungen im oberen Menü verwenden.
Geben Sie in der Suchleiste "JavaScript" ein und installieren Sie die Erweiterung mit dem Namen "JavaScript (ES6) code snippets" vom Autor von "charalampos karypidis". Diese Erweiterung bietet eine Reihe von Snippets für die einfache JavaScript-Entwicklung.
Schritt 3: Erstellen eines Projekts
Bevor Sie mit dem Schreiben von JavaScript-Code beginnen, müssen Sie ein Projekt erstellen oder ein vorhandenes öffnen. Wählen Sie dazu den Befehl Datei → Ordner öffnen und wählen Sie den Ordner aus, in dem Ihr Projekt gespeichert werden soll.
Schritt 4: Konfigurieren der Konfigurationsdatei
Erstellen Sie in Ihrem Projekt eine Datei mit dem Namen ".vscode" (ohne Erweiterung) und erstellen Sie in diesem Ordner eine Datei mit dem Namen "settings.json". Öffnen Sie diese Datei, und fügen Sie die folgende Konfiguration hinzu:
,"editor.formatOnSave": true>
Diese Konfiguration aktiviert die Codeüberprüfung mit dem ESLint-Paket, die Korrektur mit ESLint beim Speichern der Datei und die automatische Formatierung des Codes beim Speichern der Datei. Wenn Sie ESLint nicht verwenden oder einen anderen Linter bevorzugen, ändern Sie die Konfiguration entsprechend.
Jetzt ist Ihr VS-Code bereit, mit JavaScript zu arbeiten! Sie können JavaScript-Dateien erstellen und bearbeiten, Funktionen zur automatischen Vervollständigung und Korrektur von Code verwenden und den Code mit ESLint oder anderen installierten Tools validieren und formatieren.
Installieren von JavaScript-Erweiterungen
Sie müssen mehrere Erweiterungen installieren, um JavaScript in der Visual Studio Code-Entwicklungsumgebung (VSCode) problemlos verwenden zu können. In diesem Abschnitt erfahren Sie, wie Sie wichtige Erweiterungen installieren, mit denen Sie effektiv mit JavaScript arbeiten können.
| Erweiterung | Die Beschreibung | Einstellung |
|---|---|---|
| ESLint | Überprüfen und Korrigieren von Fehlern im JavaScript-Code automatisch | Öffnen Sie den Bereich Erweiterungen (die Schaltfläche in der Seitenleiste oder die Tastenkombination Strg+Umschalt+X), suchen Sie nach der Erweiterung "ESLint" und installieren Sie sie |
| JavaScript (ES6) code snippets | Eine Reihe von Snippets (Vorlagen), um das Schreiben von JavaScript-Code zu beschleunigen | Installieren Sie auf ähnliche Weise die Erweiterung "JavaScript (ES6) code snippets" |
| Prettier - Code formatter | Formatieren von JavaScript-Code für bessere Lesbarkeit und Konsistenz | Installieren Sie die Erweiterung "Prettier - Code formatter" auf die gleiche Weise |
| Debugger for Chrome | Debuggen von JavaScript-Code in Google Chrome | Suchen und installieren Sie die Erweiterung "Debugger für Chrome" im Bereich "Erweiterungen" |
Nachdem Sie alle angegebenen Erweiterungen installiert haben, ist Ihre VSCode-Entwicklungsumgebung bereit, um effektiv mit JavaScript arbeiten zu können. Sie können Fehler leicht überprüfen und korrigieren, Vorlagen verwenden, um das Schreiben von Code zu beschleunigen, den Code zu formatieren und in Google Chrome zu debuggen.
Erstellen eines neuen JavaScript-Projekts in Visual Studio Code
Visual Studio Code bietet eine bequeme Möglichkeit, JavaScript-Projekte zu erstellen und zu verwalten. Führen Sie die folgenden Schritte aus, um ein neues Projekt zu erstellen:
- Öffnen Sie Visual Studio Code und wählen Sie "Datei" -> "Ordner öffnen".
- Wählen Sie den Ordner aus, in dem Sie ein neues JavaScript-Projekt erstellen möchten, und klicken Sie auf Öffnen.
- Erstellen Sie nach dem Öffnen des Ordners in Visual Studio Code eine neue Datei mit der Erweiterung ".js" für Ihren JavaScript-Code.
- Beginnen Sie mit dem Schreiben Ihres JavaScript-Codes in die erstellte Datei.
- Um die Änderungen an einer Datei zu speichern, drücken Sie Strg + S oder wählen Sie "Datei" -> "Speichern".
Glückwunsch! Sie haben erfolgreich ein neues JavaScript-Projekt in Visual Studio Code erstellt und sind bereit, mit der Entwicklung Ihres Codes zu beginnen.
Ausführen von JavaScript-Code in Visual Studio Code
In Visual Studio Code (VSCode) können Sie JavaScript-Code ausführen und debuggen, indem Sie das integrierte Tool zum Ausführen von Code im Debug-Modus verwenden.
Führen Sie die folgenden Schritte aus, um JavaScript-Code in VSCode auszuführen:
- Öffnen Sie die Datei mit JavaScript-Code im VSCode-Editor.
- Drücken Sie eine Tastenkombination Ctrl + ` (inverse einfache Anführungszeichen), um das eingebettete Terminal am unteren Rand des Editors zu öffnen.
- Geben Sie im Terminal den Befehl ein node und drücken Sie die Taste Enter, um den JavaScript-Interpreter auszuführen.
- Fügen Sie Ihren JavaScript-Code in das Terminal ein und drücken Sie die Taste Enter, um es auszuführen.
Sie können auch die Erweiterung verwenden Code Runner um JavaScript-Code auszuführen, ohne ein integriertes Terminal zu verwenden. Installieren Sie dazu die Erweiterung aus dem VSCode Extensions Store, und drücken Sie dann die Tastenkombination Ctrl + Alt + N, um die aktuelle JavaScript-Datei auszuführen.
Jetzt können Sie Ihren JavaScript-Code einfach in VSCode ausführen und testen.
Debuggen von JavaScript-Code in Visual Studio Code
Visual Studio Code (VS Code) bietet ein leistungsfähiges Toolkit zum Debuggen von JavaScript-Code, mit dem Entwickler Fehler erkennen und beheben können. Befolgen Sie die folgenden Schritte, um die Debugfunktionen zu nutzen:
- Öffnen Sie Ihr Projekt in VS Code.
- Installieren Sie die Erweiterung Debugger for JavaScript wenn es nicht installiert ist.
- Öffnen Sie die Datei mit dem JavaScript-Code, den Sie debuggen möchten.
- Legen Sie einen Haltepunkt fest, indem Sie auf die Nummer der Codezeile klicken.
- Starten Sie das Debuggen, indem Sie die entsprechende Konfiguration auf der Registerkarte "Debug" auswählen.
- Verwenden Sie die Debugsteuerungsschaltflächen (z. B. Wiedergabe, Stopp, Pause, Schritt vorwärts usw.), um durch Ihren Code zu navigieren und seinen Status zu analysieren.
- Nachdem Sie die Fehler gefunden und behoben haben, beenden Sie das Debuggen, indem Sie die Registerkarte Debuggen schließen oder auf die Schaltfläche Beenden klicken.
Das Debuggen von JavaScript-Code in Visual Studio Code hilft Ihnen, den Entwicklungsprozess zu beschleunigen, Fehler zu erkennen und zu beheben, bevor der Code in die Produktion gelangt.
Verwenden anderer Tools in Visual Studio Code zum Arbeiten mit JavaScript
Visual Studio Code bietet einige nützliche Tools, mit denen Sie effektiv mit JavaScript arbeiten können. Hier sind einige von ihnen:
Erweiterungen:
Einer der Hauptvorteile von Visual Studio Code ist die Vielzahl verfügbarer Erweiterungen für die Arbeit mit JavaScript. Einige von ihnen helfen Ihnen dabei, den Code automatisch zu formatieren, Hinweise und Fehlerbehebungen vorzuschlagen und die Möglichkeit zum Debuggen von JavaScript-Code hinzuzufügen. Beispiele für solche Erweiterungen sind ESLint, Prettier und Debugger für Chrome.
Integrierte Konsole:
Schnipsel:
Mit Snippets in Visual Studio Code können Sie vordefinierte Codeausschnitte verwenden, um das Schreiben von Code zu beschleunigen. Sie kennen vielleicht bereits die grundlegenden Snippets, die in Visual Studio Code integriert sind, aber hier sind auch JavaScript-Snippets verfügbar, mit denen Sie Funktionen, Schleifen und vieles mehr schnell erstellen können.
Integration mit Git:
Visual Studio Code verfügt über eine vollständig integrierte Unterstützung für die Arbeit mit Git. Sie können Änderungen anzeigen, Dateien vergleichen, Commits übertragen und vieles mehr, direkt aus dem Editor. Wenn Sie mit JavaScript zusammen mit dem Git-Versionskontrollsystem arbeiten, kann diese Funktion sehr nützlich sein.
Visual Studio Code enthält noch viele weitere nützliche Tools für die Arbeit mit JavaScript. Mit diesen Tools können Sie Ihre Produktivität steigern und die Qualität Ihres Codes verbessern.
