Wie Sie JavaScript in Visual Studio Code ausführen und wie ein Profi programmieren

JavaScript wird von den meisten Entwicklern als die beliebteste Programmiersprache angesehen.

Über 63% der Befragten in einer Stackoverflow-Umfrage von 2023 gaben an, JavaScript zu verwenden. Auf der anderen Seite ist Visual Studio Code eine beliebte integrierte Entwicklungsumgebung (IDE). Dieselbe Umfrage ergab, dass VS Code der bevorzugte Code-Editor ist. Über 73% der Befragten stimmten für ihn.

Visual Studio Code unterstützt neben vielen anderen Sprachen auch JavaScript. In diesem Artikel beschreibe ich, wie wichtig es ist, JavaScript in Visual Studio Code auszuführen, wie Sie ein JavaScript-Projekt erstellen/ Code schreiben, gebe eine schrittweise Anleitung zum Ausführen von JavaScript in VS Code und die besten Methoden zum Ausführen von JavaScript-Code in VS Code.

Die Bedeutung der Ausführung von JavaScript in VS Code

JavaScript ist eine der wenigen Sprachen, die in VS Code sofort unterstützt werden. Dies sind einige der Gründe, warum Sie JavaScript in VS Code ausführen möchten:

• Ausführen und Testen von Code: Sie können JavaScript-Code schreiben und ausführen, ohne den Editor zu verlassen. Dieser Editor behandelt alles, was Sie in Dateien mit einer .js-Erweiterung schreiben, als JavaScript-Code. Dieser Code-Editor hebt auch Fehler in Ihrem Code hervor, während Sie ihn schreiben, und erleichtert so die Fehlersuche.
• Er verfügt über ein integriertes Terminal: Sie müssen den Code-Editor nicht verlassen, um Befehle zum Erstellen neuer Ordner oder Dateien oder zur Versionskontrolle auszuführen. Mit diesem Terminal können Sie sich auch Fehlermeldungen anzeigen lassen.
• Ein großes Ökosystem: Sie können immer nach Erweiterungen suchen, wenn die von Ihnen gesuchte Funktion nicht von VS Code standardmäßig unterstützt wird. Sie können solche Erweiterungen für zusätzliche Funktionen verwenden und erhalten Unterstützung für verschiedene Bibliotheken und Frameworks.
• Automatisches Nachladen und Live-Server: Sie können die automatische Speicherung für Ihren JavaScript-Code in VS Code aktivieren. Die Live-Server-Option ermöglicht es Ihnen außerdem, JavaScript-Code in Ihrem Browser auszuführen, während Sie programmieren. Die Hot-Reload-Funktion sorgt dafür, dass der Code-Editor automatisch alle Änderungen übernimmt und Sie den Live-Server nicht neu starten müssen.
• IntelliSense und Code-Vervollständigung: Manchmal müssen Sie in Code-Editoren einfach nur anfangen, Code zu schreiben, und erhalten dann Vorschläge durch intelligente Code-Vorschläge und automatische Vervollständigung. Diese Funktion spart Ihnen Zeit; Sie müssen sich nur auf die Logik konzentrieren.

Sie können VS Code auf macOS, Linux und Windows installieren. Dieser Code-Editor unterstützt auch TypeScript, ein Superscript von JavaScript, das Typen einführt.

Ausführen von JavaScript in VS Code

Die Einrichtung einer Umgebung für die Ausführung von JavaScript-Code ist unabhängig von Ihrem Betriebssystem einfach. Idealerweise sollte Ihr Rechner für diese Installationen über mindestens 4 GB RAM verfügen. Folgen Sie diesen Schritten, um loszulegen.

Node.js einrichten

Node.js ist eine der beliebtesten JavaScript-Laufzeitumgebungen. Mit Node.js können Sie JavaScrpt außerhalb einer Browserumgebung ausführen. Node.js hat mit seinen Frameworks wie Express.js auch die Verwendung von JavaScript in der Backend-Entwicklung möglich gemacht.

Sie können Node.js kostenlos herunterladen, wenn Sie es noch nicht auf Ihrem Rechner haben. Sie können auch mit diesem Befehl überprüfen, ob es auf Ihrem Rechner installiert ist:

node -v

Wenn es installiert ist, sehen Sie in Ihrem Terminal etwas Ähnliches wie das hier:

Einrichten von Visual Studio Code für die Javascript-Entwicklung

Visual Studio Code kann als Code-Editor und als IDE bezeichnet werden, je nach Anwendungsfall. VS Code unterstützt standardmäßig JavaScript. Einige JavaScript-Funktionen benötigen jedoch Erweiterungen, um ausgeführt werden zu können.

VS Code kann kostenlos heruntergeladen werden. Je nach Betriebssystem können Sie die entsprechende Version zum Download auswählen.

Erstellen eines JavaScript-Projekts

Sie verfügen nun über die grundlegende Software (Laufzeitumgebung und Code-Editor) für die Erstellung einer JavaScript-Anwendung. JavaScript wird verwendet, um Websites Interaktivität hinzuzufügen und wird meist zusammen mit HTML und CSS eingesetzt. Sie können es aber auch für Skripting und Datenstrukturen verwenden.

Ich kann nun eine einfache Anwendung erstellen und sie JavaScript-VsCode-app nennen.

Sie können diese Befehle verwenden:

mkdir JavaScript-VSCode-app

cd JavaScript-VSCode-app

touch app.js

code .

Schreiben von JavaScript-Code in Visual Studio Code

Für diese Demonstration werde ich nur JavaScript-Code schreiben. So sieht unser Projekt im Code-Editor aus.

Wie Sie sehen können, haben wir nur eine Datei (app.js). Ich kann nun ein einfaches Programm schreiben, das überprüft, ob eine Zahl gerade ist. Ich werde meinen Code in die Datei app.js schreiben. Dies ist mein Code:

function isEven(Zahl) {
    return Zahl % 2 === 0;
}
// Beispiel für die Verwendung:
let meineZahl = 8;
if (isEven(meineZahl)) {
    console.log(meineZahl " ist gerade.");
} else {
    console.log(meineZahl " ist ungerade.");
}

Ausführen von JavaScript-Code in Visual Studio Code

Wir sind nun bereit, JavaScript in VS Code auszuführen. Wir müssen jedoch verstehen, was dieser Code tut. Wir haben eine Funktion, die wir ‘isEven’ genannt haben. Unsere Funktion nimmt eine Zahl und gibt ‘true’ zurück, wenn die Zahl durch zwei teilbar ist. Wenn die Zahl jedoch nicht durch zwei teilbar ist, gibt sie ‘false’ zurück.

Wir können diesen Befehl nun ausführen:

node app.js

Sie können ihn im Stammverzeichnis oder im VS Code Terminal ausführen.

Nach der Ausführung des Codes, den wir im letzten Schritt angegeben haben, erhalten wir die Ausgabe ‘8 ist gerade’.

Was, wenn wir prüfen, ob 9 gerade ist? Wir können unseren Code wie folgt ändern:

function isEven(Zahl) {
    return Zahl % 2 === 0;
}

// Anwendungsbeispiel:
let meineZahl = 9;
if (isEven(meineZahl)) {
    console.log(meineZahl " ist gerade.");
} else {
    console.log(meineZahl " ist ungerade.");
}

Dies ist das Ergebnis, nachdem wir unseren Code ausgeführt haben:

Wie Sie sehen können, ist unsere Ausgabe ‘9 ist ungerade’.

Fügen Sie die notwendigen Erweiterungen hinzu

Das Programm, das wir oben erstellt haben, ist einfach. Vielleicht möchten Sie jedoch eine komplexe Anwendung erstellen, bei der Sie Ihren Code fusseln oder sogar debuggen müssen. Klicken Sie auf der linken Seite von VS Code auf die vorletzte Schaltfläche.

Sie können auch Tastaturkürzel verwenden: STRG Umschalt X.

Sie können nun nach verschiedenen Erweiterungen suchen, die Sie für Ihren Code verwenden möchten. Ich kann zum Beispiel nach ESLint suchen.

Sie sehen, dass die Erweiterungen auf meiner Seite bereits aktiviert sind. Überprüfen Sie immer die Beschreibung der verschiedenen Erweiterungen, damit sie einfach zu konfigurieren und zu verwenden sind.

Code Runner-Erweiterung verwenden

Visual Studio Code unterstützt Hunderte von Programmiersprachen. Sie können Code Runner verwenden, um Codes in den meisten gängigen Programmiersprachen auszuführen. Suchen Sie die Registerkarte Erweiterungen auf der linken Seite Ihres VS Code und suchen Sie nach Code Runner.

Klicken Sie auf Installieren und aktivieren Sie die Erweiterung und schon können Sie Ihren Code ausführen. Ich habe eine einfache Anweisung mit dem Wort console.log(“Hallo, Welt!”); in meiner app.js-Datei. Ich kann sie mit Code Runner ausführen. Ich verwende die Tastenkombination F1 und gebe RUN CODE ein.

Dies ist die Anzeige auf meinem Terminal:

[Ausführen] node "/home/tk/JavaScript-VSCode-app/app.js"
Hallo, Welt!
[Fertig] beendet mit code=0 in 2.106 Sekunden

Bewährte Praktiken für effizientes Schreiben von JavaScript-Code

Die bisherige Einrichtung ist perfekt für einfache JavaScript-Programme. Sie müssen jedoch die folgenden Best Practices beachten, wenn Sie JavaScript unter VS Code reibungslos ausführen möchten:

• Verwenden Sie einen Code-Linter: Die Lesbarkeit kann ein Problem werden, wenn die Größe Ihrer JavaScript-Datei zunimmt. Sie können eine Erweiterung wie Prettier ESLint verwenden, um sicherzustellen, dass Sie Fehler in Ihrem Code frühzeitig erkennen und die Lesbarkeit Ihres Codes verbessern.
• Bewahren Sie verschiedene Sprachen in verschiedenen Dateien auf: Bei einem typischen Frontend-Projekt müssen Sie möglicherweise HTML-, CSS- und JavaScript-Code schreiben. Sie könnten versucht sein, den gesamten Code in ein einziges Dokument zu schreiben. Achten Sie jedoch immer darauf, dass Sie Ihren HTML-, CSS- und JavaScript-Code in verschiedenen Dateien schreiben.
• Nutzen Sie die Vorteile von Erweiterungen: Auf dem VS Code-Marktplatz finden Sie Tausende von Erweiterungen, die Ihnen die Arbeit mit verschiedenen Bibliotheken erleichtern. Erforschen Sie den Marktplatz und wählen Sie die Erweiterungen mit den besten Bewertungen und der besten Dokumentation.

Einrichten von Git in Visual Studio Code für die Integration der Versionskontrolle

Wir haben bisher die Schritte zur Einrichtung von VS Code und zur Ausführung von JavaScript in diesem Code-Editor beschrieben. Möglicherweise müssen Sie jedoch eine Versionskontrolle wie Git verwenden, um Änderungen an Ihrem Code zu verfolgen oder sie sogar an ein entferntes Repository wie GitHub zu übertragen. Dies sind die Schritte, die Sie befolgen müssen:

• Installieren Sie Git: Git ist die am häufigsten verwendete Versionskontrolle in der Entwicklung. Laden Sie die Git-Version herunter, die zu Ihrem Betriebssystem und den Spezifikationen Ihres Computers passt. Nach der Installation können Sie diesen Befehl ausführen, um Ihre Git-Version zu überprüfen:

git -v

Wenn Sie Git korrekt installiert haben, sehen Sie auf Ihrem Terminal eine ähnliche Anzeige wie diese:

• Initialisieren Sie ein Git-Repository: Sie können alle Ihre Änderungen nachverfolgen und in Git übertragen (committen). Führen Sie diesen Befehl im Stammverzeichnis Ihres Projektordners aus:

git init

• Konfigurieren Sie Ihre Git-Identität: Sie müssen Git mitteilen, wer Sie sind, indem Sie Ihren Benutzernamen und Ihre E-Mail-Adresse einrichten. Führen Sie diese Befehle aus, um loszulegen:

git config --global user.name "Ihr Name"

git config --global user.email<a href="mailto:your.email@example.com">"your.email@example.com"</a>

Ersetzen Sie ‘Your Name’ und ‘your.email@example.com’ durch die entsprechenden Angaben.

• Führen Sie die Änderungen durch und übertragen Sie sie: Sie haben Git nun konfiguriert und können Ihre Änderungen einspielen und übertragen. Führen Sie diesen Befehl aus, um alle nicht verfolgten Dateien zu überprüfen:

git status

Sie können nun alle nicht verfolgten und nicht übertragenen Dateien sehen.

Führen Sie diesen Befehl aus, um die Änderungen zu übertragen:

git add .

Führen Sie git status erneut aus, und Sie sehen etwas Ähnliches wie das hier:

Sie können Ihre Dateien jetzt übertragen. Führen Sie diesen Befehl aus:

git commit -m "Ihre Commit-Nachricht"

Ersetzen Sie “Ihre Commit-Nachricht” durch etwas, das Ihre Aktionen beschreibt.

Sie können nun Ihre Versionsverwaltung mit entfernten Repository-Plattformen wie GitHub verbinden.

Fazit

Wir hoffen, Sie haben nun verstanden, wie Sie eine Umgebung erstellen und JavaScript in VS Code ausführen können. Möglicherweise benötigen Sie zusätzliche Erweiterungen, um mit JavaScript-Bibliotheken und -Frameworks in diesem Code-Editor zu arbeiten. Halten Sie Visual Studio Code jedoch immer auf dem neuesten Stand, wenn Sie die neuesten Funktionen nutzen möchten.

Sehen Sie sich unseren Artikel über die besten Ressourcen zum Erlernen von JavaScript an und polieren Sie Ihr Wissen auf.