Führen Sie JavaScript in Visual Studio Code aus

Gibt es eine Möglichkeit, JavaScript auszuführen und die Ergebnisse mit anzuzeigen? Visual Studio Code ?

Zum Beispiel eine Skriptdatei, die Folgendes enthält:

console.log('hello world');

Ich gehe davon aus, dass Node.js benötigt wird, kann aber nicht herausfinden, wie es geht?

Mit Visual Studio-Code meine ich den neuen Code-Editor von Microsoft - kein mit Visual Studio geschriebener Code.

Diese Lösung beabsichtigt, die aktuell geöffnete Datei im Knoten auszuführen und die Ausgabe in VSCode anzuzeigen.

Ich hatte die gleiche Frage und fand neu eingeführt tasks nützlich für diesen speziellen Anwendungsfall. Es ist ein wenig mühsam, aber hier ist, was ich getan habe:

Erstellen Sie ein .vscodeVerzeichnis im Stammverzeichnis Ihres Projekts und erstellen Sie eine tasks.jsonDatei darin. Fügen Sie diese Aufgabendefinition zur Datei hinzu:

{
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "args": [
        "--harmony"
    ],

    "tasks": [
        {
            "taskName": "runFile",
            "suppressTaskName": true,
            "showOutput": "always",
            "problemMatcher": "$jshint",
            "args": ["${file}"]
        }
    ]
}

Dann können Sie: press F1 > type `run task` > enter > select `runFile` > enter Ihre Aufgabe ausführen, aber ich fand es einfacher, eine benutzerdefinierte Schlüsselbindung zum Öffnen von Aufgabenlisten hinzuzufügen.

Um die Tastenbelegung hinzuzufügen, gehen Sie im VSCode-UI-Menü zu 'Code'> 'Einstellungen'> 'Tastaturkürzel'. Fügen Sie dies Ihren Tastaturkürzeln hinzu:

{
    "key": "cmd+r",
    "command": "workbench.action.tasks.runTask"
}

Natürlich können Sie als Tastenkombination auswählen, was Sie wollen.

AKTUALISIEREN:

Angenommen, Sie führen den JavaScript-Code zum Testen aus, können Sie Ihre Aufgabe als Testaufgabe markieren, indem Sie ihre isTestCommandEigenschaft auf festlegen , trueund dann einen Schlüssel für einen Aufruf mit einer Aktion an den workbench.action.tasks.testBefehl binden .

Mit anderen Worten, Ihre tasks.jsonDatei würde jetzt enthalten:

{
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "args": [
        "--harmony"
    ],

    "tasks": [
        {
            "taskName": "runFile",
            "isTestCommand": true,
            "suppressTaskName": true,
            "showOutput": "always",
            "problemMatcher": "$jshint",
            "args": ["${file}"]
        }
    ]
}

... und Ihre keybindings.jsonDatei würde jetzt enthalten:

{
    "key": "cmd+r",
    "command": "workbench.action.tasks.test"
}

Es gibt eine viel einfachere Möglichkeit, JavaScript auszuführen, ohne dass eine Konfiguration erforderlich ist:

1. Installieren Sie die Code Runner-Erweiterung
2. Öffnen Sie die JavaScript-Codedatei im Texteditor, verwenden Sie die Tastenkombination Control+ Alt+ N(oder ⌃ Control+ ⌥ Option+ Nunter macOS) oder drücken Sie F1und wählen Sie / tippen Sie Run Code. Der Code wird ausgeführt und die Ausgabe wird im Ausgabefenster angezeigt.

Außerdem können Sie einen Teil des JavaScript-Codes auswählen und das Code-Snippet ausführen. Die Erweiterung funktioniert auch mit nicht gespeicherten Dateien. Sie können also einfach eine Datei erstellen, in Javascript ändern und schnell Code schreiben (wenn Sie nur etwas schnelles ausprobieren müssen). Sehr angenehm!

Ich bin überrascht, dass dies noch nicht erwähnt wurde:

Öffnen Sie einfach die .jsbetreffende Datei in VS Code, wechseln Sie zur Registerkarte "Debug Console", klicken Sie auf die Debug-Schaltfläche in der linken Navigationsleiste und klicken Sie auf das Ausführungssymbol (Wiedergabetaste)!

Erfordert die Installation von nodejs!

Dies ist meiner Meinung nach der schnellste Weg für Sie;

• Öffnen Sie das integrierte Terminal im Visual Studio Code ( View > Integrated Terminal)
• Art 'node filename.js'
• Drücken Sie Enter

Hinweis : Knoteneinrichtung erforderlich. (Wenn Sie ein Homebrew haben, geben Sie einfach 'Brew Install Node' am Terminal ein.)

Anmerkung 2 : Homebrew und Node werden dringend empfohlen, wenn Sie dies noch nicht getan haben.

Einen schönen Tag noch.

Die Verknüpfung für das integrierte Terminal lautet ctrl+ `, und geben Sie dann ein node <filename>.

Alternativ können Sie eine Aufgabe erstellen. Dies ist der einzige Code in meiner task.json:

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "node",
"isShellCommand": true,
"args": ["${file}"],
"showOutput": "always"
}

Von hier aus erstellen Sie eine Verknüpfung. Dies ist meine keybindings.json:

// Place your key bindings in this file to overwrite the defaults
[
{   "key": "cmd+r",
"command": "workbench.action.tasks.runTask"
},
{   "key": "cmd+e",
"command": "workbench.action.output.toggleOutput"
}
]

Dadurch wird "Ausführen" in der Befehlspalette geöffnet, Sie müssen jedoch noch die Aufgabe eingeben oder mit der Maus auswählen, die Sie ausführen möchten, in diesem Fall den Knoten. Die zweite Verknüpfung schaltet das Ausgabefeld um. Es gibt bereits eine Verknüpfung dafür, aber diese Tasten befinden sich nebeneinander und sind einfacher zu bearbeiten.

Um den Code einfach auszuführen und die Ausgabe auf der Konsole anzuzeigen, können Sie eine Aufgabe erstellen und ausführen, so wie es @canerbalci erwähnt.

Der Nachteil dabei ist, dass Sie nur die Ausgabe erhalten und das ist es.

Was ich wirklich gerne mache, ist, in der Lage zu sein, den Code zu debuggen, sagen wir, ich versuche, einen kleinen Algorithmus zu lösen oder eine neue ES6-Funktion auszuprobieren, und ich führe ihn aus und es ist etwas faul damit, ich kann ihn in VSC debuggen.

Anstatt eine Aufgabe dafür zu erstellen, habe ich die Datei .vscode / launch.json in diesem Verzeichnis wie folgt geändert:

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${file}",
        "stopOnEntry": true,
        "args": [],
        "cwd": "${fileDirname}",
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development"
        },
        "externalConsole": false,
        "sourceMaps": false,
        "outDir": null
    }
]
}

Dies führt dazu, dass die Datei, in der Sie sich gerade befinden, im Debugger von VSC gestartet wird. Es ist so eingestellt, dass es beim Start stoppt.

Drücken Sie zum Starten die Taste F5 in der Datei, die Sie debuggen möchten.

Ich hatte genau dieses Problem, als ich anfing, VS Code mit Erweiterung zu verwendenCode Runner

Sie müssen lediglich den Pfad node.js in den Benutzereinstellungen festlegen

Sie müssen den Pfad festlegen, während Sie ihn auf Ihrem Windows-Computer installieren.

Für mich war es \"C:\\Program Files\\nodejs\\node.exe\"

Da ich ein Leerzeichen in meinem Dateiverzeichnisnamen habe

Siehe dieses Bild unten. Ich konnte den Code beim ersten Mal nicht ausführen, da ich einen Fehler im Pfadnamen gemacht habe

Hoffe das wird dir helfen.

Und natürlich hat mir Ihre Frage geholfen, da ich auch hierher gekommen bin, um Hilfe beim Ausführen JSmeines VS-CODES zu erhalten

Befolgen Sie diese Schritte im VS-Code. [In Windows OS ausgeführt]

1. Neue Datei erstellen

2. Schreiben Sie Javascript-Codes hinein

3. Speichern Sie die Datei unter dem Dateinamen.js

4. Gehen Sie zum Debugging-Menü

5. Klicken Sie auf Debugging starten

6. oder drücken Sie einfach F5

Screenshot zum Starten des Debuggens

Screenshot der Ausgabe von js Code im Terminal

Ich habe Node Exec verwendet, keine Konfiguration erforderlich, erstellt die Datei, die Sie gerade beenden oder was auch immer ausgewählt wurde, und gibt sie in VSCode aus.

https://marketplace.visualstudio.com/items?itemName=miramac.vscode-exec-node

Mit ein bisschen Konfiguration können Sie Babel hinzufügen, um auch einige spontane Transpilierungen durchzuführen.

Es ist sehr einfach, wenn Sie eine neue Datei in VS Code erstellen und ausführen. Wenn Sie bereits keine Konfigurationsdatei haben, die eine für Sie erstellt, müssen Sie nur den Wert "program" einrichten und festlegen Der Pfad Ihrer Haupt-JS-Datei sieht folgendermaßen aus:

{
    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.  
    // ONLY "node" and "mono" are supported, change "type" to switch.
    // ABSOLUTE paths are required for no folder workspaces.
    "configurations": [
        {
            // Name of configuration; appears in the launch configuration drop down menu.
            "name": "Launch",
            // Type of configuration. Possible values: "node", "mono".
            "type": "node",
            // ABSOLUTE path to the program.
            "program": "C:\\test.js", //HERE YOU PLACE THE MAIN JS FILE
            // Automatically stop program after launch.
            "stopOnEntry": false,
            // Command line arguments passed to the program.
            "args": [],
            // ABSOLUTE path to the working directory of the program being debugged. Default is the directory of the program.
            "cwd": "",
            // ABSOLUTE path to the runtime executable to be used. Default is the runtime executable on the PATH.
            "runtimeExecutable": null,
            // Optional arguments passed to the runtime executable.
            "runtimeArgs": [],
            // Environment variables passed to the program.
            "env": { },
            // Use JavaScript source maps (if they exist).
            "sourceMaps": false,
            // If JavaScript source maps are enabled, the generated code is expected in this directory.
            "outDir": null
        }, 
        {
            "name": "Attach",
            "type": "node",
            // TCP/IP address. Default is "localhost".
            "address": "localhost",
            // Port to attach to.
            "port": 5858,
            "sourceMaps": false
        }
    ]
}

Es ist nicht erforderlich, die Umgebung für die Ausführung des Codes unter Javascript, Python usw. in Visual Studio-Code festzulegen. Sie müssen lediglich die Code Runner-Erweiterung installieren und dann den Teil des Codes auswählen, den Sie ausführen möchten, und auf klicken Run-Taste in der oberen rechten Ecke vorhanden.

Dies ist ab Version 1.32 möglicherweise die einfachste:

{
    "key": "ctrl+shift+t",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": "node '${file}'\u000D" }
  }

Verwenden Sie Ihre eigene Tastenkombination.

Siehe Versionshinweise : sendSequence und Variablen .

Mit vscode v1.32 können Sie sendSequencemit Variablen wie ${file}der aktuellen Datei zum Terminal gelangen . Wenn Sie dort einen anderen Pfad möchten, ersetzen Sie $ {file} durch Ihren Pfadnamen in der obigen Tastenkombination.

Das \u000Dist eine Rückgabe, so dass es sofort ausgeführt wird.

Ich habe 's um die ${file}Variable hinzugefügt, falls Ihr Dateipfad Leerzeichen enthält, wie zc:Users\Some Directory\fileToRun

Ich würde Ihnen empfehlen, ein einfaches Plugin namens Quokka zu verwenden, das heutzutage sehr beliebt ist und Ihnen hilft, Ihren Code unterwegs zu debuggen. Quokka.js . Ein größter Vorteil bei der Verwendung dieses Plugins ist, dass Sie viel Zeit sparen, um im Webbrowser Ihren Code auszuwerten. Mithilfe dieses Plugins können Sie alles sehen, was im VS-Code geschieht, was viel Zeit spart.

Es gibt viele Möglichkeiten, Javascript in Visual Studio Code auszuführen.

Wenn Sie Node verwenden, empfehle ich die Verwendung des Standard-Debuggers in VSC.

Normalerweise erstelle ich eine Dummy-Datei wie test.js, in der ich externe Tests durchführe.

In Ihrem Ordner, in dem Sie Ihren Code haben, erstellen Sie einen Ordner mit dem Namen ".vscode" und eine Datei mit dem Namen "launch.json".

In diese Datei fügen Sie Folgendes ein und speichern. Jetzt haben Sie zwei Möglichkeiten, um Ihren Code zu testen.

Wenn Sie "Nodemon Test File" auswählen, müssen Sie Ihren Code zum Testen in test.js einfügen.

Um nodemon zu installieren und weitere Informationen zum Debuggen mit nodemon in VSC zu erhalten, empfehle ich, diesen Artikel zu lesen , in dem der zweite Teil der Datei launch.json und das Debuggen in ExpressJS ausführlicher erläutert werden.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Nodemon Test File",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceFolder}/test.js",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Node: Nodemon",
            "processId": "${command:PickProcess}",
            "restart": true,
            "protocol": "inspector",
        },
    ]
}

Eine weitere Option ist die Verwendung der Entwicklertools-Konsole in Visual Studio Code. Wählen Sie einfach "Hilfstools umschalten" aus dem Hilfemenü und wählen Sie dann die Registerkarte "Konsole" in den angezeigten Entwicklertools. Von dort haben Sie die gleichen Entwickler-Tools REPL, die Sie in Chrome erhalten.

Für Windows : Ändern Sie einfach die Dateizuordnung der .jsDatei innode.exe

1) Take VSCode
2) Right click on the file in left pane
3) Click "Reveal in explorer" from context menu
4) Right click on the file -> Select "Open with" -> Select "Choose another program"
5) Check box "Always use this app to open .js file"
6) Click "More apps" -> "Look for another app in PC"
7) Navigate to node.js installation directory.(Default C:\Program Files\nodejs\node.exe"
8) Click "Open" and you can just see cmd flashing
9) Restart vscode and open the file -> Terminal Menu -> "Run active file".

Eine andere Möglichkeit wäre, das Terminal Strg + ` Ausführen zu öffnen node. Jetzt ist ein Knoten REPL aktiv. Sie können jetzt Ihre Datei oder den ausgewählten Text an das Terminal senden. Öffnen Sie dazu die VSCode- Befehlspalette ( F1 oder Strg + Umschalt + p ) und führen Sie >run selected text in active terminaloder aus >run active file in active terminal.

Wenn Sie vor der Ausführung Ihres Codes eine saubere REPL benötigen, müssen Sie den Knoten REPL neu starten. Dies erfolgt im Terminal mit dem Knoten REPLctrl+c ctrl+c , um es zu , und tippt node, um neu zu starten.

Sie könnten wahrscheinlich den Schlüssel binden Befehlspalettenbefehle mit einem beliebigen Schlüssel an einen beliebigen Schlüssel .

PS: nodesollte installiert sein und in Ihrem Pfad

Einfach nodemon installieren und ausführen

nodemon your_file.js

on vs code terminal.