Der Prozess des Aufbaus einer Entwicklungsumgebung basierend auf Visual Studio Code + React

Entwicklungsumgebungsfenster

Entwicklungstools Visual Studio Code

Knoteninstallation und npm

Um Node unter Windows zu installieren, können Sie es direkt von der offiziellen Node-Website herunterladen und wie eine normale Software installieren.
Nach Abschluss der Installation können Sie node in der Konsole ausführen, um zu testen, ob die Installation erfolgreich war. Geben Sie mit Win + r cmd ein und geben Sie node -v direkt in das Terminal ein, um die Versionsnummer und die erfolgreiche Installation auszugeben.
Derzeit wird die neue Version von Node mit npm ausgeliefert ( npm ist ein mit Node installiertes Paketverwaltungstool ). Nachdem Sie den Knoten hier installiert und die Installation erfolgreich getestet haben, können Sie weiterhin npm -v in die Konsole eingeben, um zu überprüfen, ob die Installation erfolgreich war. Bei Erfolg wird die Versionsnummer ausgegeben.

Installieren von Visual Studio Code

Bei der normalen Softwareinstallation von vs code gibt es nichts zu beachten, einfach herunterladen und installieren

React installieren

Lesen Sie das Dokument „React JavaScript Tutorial in VS Code“. Das Dokument ist sehr detailliert und Sie werden im Grunde keine Probleme haben, ihm zu folgen.

• Erstellen Sie einen lokalen Ordner, also den Ordner, in dem das Projekt gespeichert ist, und öffnen Sie die Konsole im Ordner. Ich verwende hier git bash. Klicken Sie einfach mit der rechten Maustaste in den Ordner und suchen Sie git bash, um es zu starten.
• Geben Sie npm install -g create-react-app in der Konsole ein, um create-react-app mit npm zu installieren.
• Geben Sie nach der Installation von create-react-app weiterhin create-react-app my-app ein, um ein Projekt zu erstellen. my-app ist das erstellte React-Projekt. Warten Sie einen Moment ( hier müssen einige abhängige Pakete heruntergeladen werden ), und Sie können die gesamte erstellte Dateistruktur sehen.
  

• Wechseln Sie vom Konsolenverzeichnis zum Projektverzeichnis und führen Sie npm start aus, um zu prüfen, ob das aktuelle Projekt erfolgreich erstellt wurde. Normalerweise wird nach Eingabe des Befehls der Standardbrowser direkt geöffnet, um eine Vorschau von http://localhost:3000/ anzuzeigen. Zu diesem Zeitpunkt wird eine Reaktionsseite angezeigt.
  

An diesem Punkt kann das neu erstellte React-Projekt normal ausgeführt werden
5. Öffnen Sie den Projektordner mit VS Code, wo Sie die gesamte Dateistruktur sehen können

Alle Dateien können direkt mit VS Code geändert werden.

Debugger für Chrome installieren

1.VS Code bietet das Plug-In „Debugger für Chrome“, das die Verwendung des Chrome-Kernel-Debuggings unterstützt.

Direkt suchen und installieren und VS Code neu laden
2. Die Verwendung von Debugger für Chrome zum Debuggen erfordert eine zusätzliche Konfiguration des Projekts

Legen Sie hier die Startkonfiguration fest. Im Originaldokument steht, dass eine neue launch.json erstellt wird. Ich habe hier bereits eine launch.json -Datei, daher kann ich die Konfiguration direkt hinzufügen. Hier gibt es eine Schaltfläche „Konfiguration hinzufügen“, um den Konfigurationsknoten direkt hinzuzufügen. Beachten Sie, dass es hier zwei Chrome-bezogene Knoten gibt, einen „Start“ und einen „Anhängen“.

Suchen Sie nach dem Erstellen von zwei Knoten einen Knoten mit dem Namen "request": "launch" und legen Sie ihn auf die URL fest, die zum Starten des React-Projekts verwendet wird, nämlich http://localhost:3000/ Belassen Sie den anderen Konfigurationsknoten als Standard und ändern Sie ihn, wenn Sie Fragen haben. Die geänderte Konfiguration lautet wie folgt:

{
    // Verwenden Sie IntelliSense, um mehr über verwandte Eigenschaften zu erfahren. 
    // Bewegen Sie den Mauszeiger darüber, um die Beschreibungen vorhandener Eigenschaften anzuzeigen.
    // Weitere Informationen finden Sie unter: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "Konfigurationen": [
        {
            "Typ": "Chrom",
            "Anfrage": "anhängen",
            "Name": "An Chrome anhängen",
            "Port": 9222,
            "webRoot": "${workspaceFolder}"
        },
        {
            "Typ": "Chrom",
            "Anfrage": "starten",
            "Name": "Chrom",
            "URL": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "Typ": "Knoten",
            "Anfrage": "starten",
            "Name": "Knoten",
            "Programm": "${workspaceFolder}\\start"
        }
    ]
}

Starten Sie das Projekt npm start und öffnen Sie die Debug-Symbolleiste

Wählen Sie den zuvor hinzugefügten Chrome-Knoten zum Starten aus, und eine neue Chrome-Seite wird geöffnet

Suchen Sie die Datei index.js im Quellcode des Projekts, setzen Sie einen Haltepunkt, klicken Sie auf die linke Schaltfläche vor der Zeilennummer und aktualisieren Sie dann die Seite, um den Endpunkt einzugeben

Ab diesem Punkt ist das Debuggen einfach.

Installieren Sie eslint

eslint ist ein zusammensetzbarer JavaScript- und JSX-Linter. Kann zur Überprüfung auf Syntaxfehler verwendet werden.

• Geben Sie npm install -g eslint in die Konsole ein, um eslint zu installieren
• Installieren Sie das eslint-Plugin über VS Code
  

3. Öffnen Sie das Befehlsfeld von VS Code und suchen Sie es direkt in der Ansicht oder Ctrl+Shift+P , um ESLint aufzurufen und die Option zum Erstellen einer .eslintrc.json Datei zu finden. Zu diesem Zeitpunkt wird eine Konfigurationsdatei im Stammverzeichnis des Projekts erstellt. Zu diesem Zeitpunkt werden einige Syntaxfehler in Ihrem Projekt automatisch erkannt.

Auch für die Ausgestaltung des Semikolons gibt es im Referenzdokument Regeln, welche bei Bedarf ergänzt werden können.

Dies ist das Ende dieses Artikels zum Einrichten der Visual Studio Code + React-Entwicklungsumgebung. Weitere Informationen zum Einrichten der vscode-React-Umgebung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!