suchen

Heim >Web-Frontend >js-Tutorial >So richten Sie Ihre JavaScript-Entwicklungsumgebung ein

So richten Sie Ihre JavaScript-Entwicklungsumgebung ein

Barbara Streisand
Barbara StreisandOriginal
2024-10-22 20:00:44893Durchsuche

Artikel 2: So richten Sie Ihre JavaScript-Entwicklungsumgebung ein

Einführung

Nachdem Sie nun Ihr erstes JavaScript-Programm in der Browserkonsole geschrieben haben, ist es an der Zeit, eine geeignete Entwicklungsumgebung einzurichten. Dies wird Ihnen im Verlauf des Kurses dabei helfen, komplexeren Code effizient zu schreiben und zu testen.

In diesem Beitrag führe ich Sie durch die Einrichtung einer Entwicklungsumgebung mit Visual Studio Code (VS Code) – einem der beliebtesten Code-Editoren unter Entwicklern.

Schritt 1: Visual Studio-Code installieren

Visual Studio Code (VS Code) ist ein leichter, aber leistungsstarker Code-Editor. Es ist kostenlos, einfach zu verwenden und funktioniert gut mit JavaScript.

Anweisungen zur Installation von VS-Code:

  1. VS-Code herunterladen: Besuchen Sie die offizielle Website und laden Sie das Installationsprogramm für Ihr Betriebssystem (Windows, macOS oder Linux) herunter.
  2. Installieren Sie die Anwendung: Befolgen Sie die Installationsschritte basierend auf Ihrem System. Normalerweise ist es so einfach, auf die heruntergeladene Datei zu doppelklicken und den Anweisungen zu folgen.

Öffnen Sie nach der Installation Visual Studio Code. Es sollte ungefähr so ​​aussehen:

How to Set Up Your JavaScript Development Environment

(Dies ist ein Beispielbild der VS-Code-Schnittstelle)

Schritt 2: Node.js installieren (optional, aber empfohlen)

Obwohl JavaScript im Browser ausgeführt wird, können Sie durch die Installation von Node.js JavaScript außerhalb des Browsers ausführen, wodurch Ihre Entwicklungsumgebung vielseitiger wird.

Anweisungen zur Installation von Node.js:

  1. Node.js herunterladen: Gehen Sie zur Node.js-Website und laden Sie die LTS-Version (Long Term Support) für Ihr Betriebssystem herunter.
  2. Node.js installieren: Befolgen Sie die Anweisungen zur Installation.

Öffnen Sie nach der Installation die Eingabeaufforderung (Windows) oder Terminal (macOS/Linux) und geben Sie den folgenden Befehl ein, um zu überprüfen, ob Node.js installiert ist:

node -v

Dies sollte die Versionsnummer von Node.js zurückgeben und die Installation bestätigen.

Schritt 3: Erstellen Sie Ihre erste JavaScript-Datei

Nachdem Sie VS Code installiert haben, erstellen wir Ihre erste JavaScript-Datei.

Anweisungen zum Erstellen einer JavaScript-Datei:

  1. VS-Code öffnen.
  2. Neuen Ordner erstellen: Erstellen Sie auf Ihrem Computer einen Ordner für Ihre JavaScript-Projekte. Man kann es so etwas wie Javascript-Lernen nennen.
  3. Öffnen Sie den Ordner in VS Code: Gehen Sie in VS Code zu Datei > Öffnen Sie den Ordner und wählen Sie den Ordner aus, den Sie gerade erstellt haben.
  4. Erstellen Sie eine neue JavaScript-Datei: Klicken Sie im Explorer-Bereich auf der linken Seite auf die Schaltfläche Neue Datei (oder drücken Sie Strg N) und nennen Sie die Datei script.js.

Schritt 4: JavaScript in VS-Code schreiben und ausführen

Jetzt schreiben wir etwas grundlegendes JavaScript in Ihre neue script.js-Datei.

Beispiel:

Schreiben Sie in script.js den folgenden Code:

node -v

Um diese JavaScript-Datei auszuführen, haben Sie einige Möglichkeiten:

Option 1: JavaScript im Browser ausführen

  1. Erstellen Sie eine HTML-Datei (z. B. index.html) im selben Ordner.
  2. Fügen Sie diesen einfachen HTML-Code hinzu: 
console.log("Hello, World from VS Code!");
  1. Öffnen Sie index.html in Ihrem Browser (Sie können mit der rechten Maustaste auf die Datei klicken und Mit Chrome öffnen oder Ihren bevorzugten Browser auswählen).
  2. Öffnen Sie die Browserkonsole (F12 oder Strg-Umschalttaste I), und Sie sollten die Meldung sehen: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Test</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

Option 2: JavaScript mit Node.js ausführen (falls installiert)

  1. Öffnen Sie die Eingabeaufforderung oder das Terminal.
  2. Navigieren Sie mit dem Befehl cd zu dem Ordner, in dem sich script.js befindet. Zum Beispiel: 
Hello, World from VS Code!
  1. Führen Sie den folgenden Befehl aus, um Ihre JavaScript-Datei auszuführen: 
cd path/to/javascript-learning

Sie sollten die Meldung sehen:

node script.js

Nächste Schritte

Jetzt, da Ihre Entwicklungsumgebung eingerichtet ist und Sie JavaScript sowohl im Browser als auch mit Node.js erfolgreich ausgeführt haben, sind Sie bereit, tiefer in die JavaScript-Programmierung einzutauchen! Im nächsten Beitrag werden wir Variablen in JavaScript untersuchen und wie Sie sie zum Speichern von Daten verwenden können.

Bleiben Sie dran für weitere spannende Lektionen!

Profi-Tipp:

Sobald Sie sich mit VS Code vertraut gemacht haben, können Sie Ihren Workflow verbessern, indem Sie Erweiterungen wie ESLint für Code-Linting und Live Server für das automatische Neuladen Ihres Browsers installieren, wenn Sie Änderungen vornehmen.

Besuchen Sie meine Website – Ridoy hat ein Portfolio
Besuchen Sie mein LinkedIn-Profil – Ridoy Hasan

Das obige ist der detaillierte Inhalt vonSo richten Sie Ihre JavaScript-Entwicklungsumgebung ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript chrome html if for select auto double using Interface JS console number this windows visual studio macos visual studio code linux prompt
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Warum schlagen Skripte fehl, nachdem Sie die Zurück-Taste von Firefox gedrückt haben?Nächster Artikel：Warum schlagen Skripte fehl, nachdem Sie die Zurück-Taste von Firefox gedrückt haben?

In Verbindung stehende Artikel

Mehr sehen