Esegui JavaScript nel codice di Visual Studio

C'è un modo per eseguire JavaScript e visualizzare i risultati utilizzando il codice di Visual Studio ?

Ad esempio, un file di script contenente:

console.log('hello world');

Suppongo che Node.js sarebbe necessario ma non riesci a capire come farlo?

Per codice di Visual Studio intendo il nuovo Code Editor di Microsoft - Non il codice scritto usando Visual Studio.

Questa soluzione intende eseguire il file attualmente aperto nel nodo e mostrare l'output in VSCode.

Ho avuto la stessa domanda e ho trovato di recente introduzione tasksutile per questo caso d'uso specifico. È una seccatura, ma ecco cosa ho fatto:

Crea una .vscodedirectory nella radice del tuo progetto e crea un tasks.jsonfile al suo interno. Aggiungi questa definizione di attività al file:

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

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

Quindi puoi: press F1 > type `run task` > enter > select `runFile` > enter per eseguire la tua attività, ma ho trovato più facile aggiungere un'associazione chiave personalizzata per l'apertura degli elenchi di attività.

Per aggiungere l'associazione dei tasti, nel menu dell'interfaccia utente VSCode, seleziona "Codice"> "Preferenze"> "Tasti di scelta rapida". Aggiungi questo alle scorciatoie da tastiera:

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

Ovviamente puoi selezionare quello che vuoi come combinazione di tasti.

AGGIORNARE:

Supponendo che si esegue il codice JavaScript per testare , si potrebbe contrassegnare il vostro compito come un test di un'attività impostando la sua isTestCommandproprietà a truee quindi è possibile associare una chiave per il workbench.action.tasks.testcomando di una chiamata singola azione.

In altre parole, il tuo tasks.jsonfile ora conterrebbe:

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

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

... e il tuo keybindings.jsonfile conterrebbe ora:

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

Esiste un modo molto più semplice per eseguire JavaScript, non è necessaria alcuna configurazione:

1. Installa l' estensione Code Runner
2. Apri il file di codice JavaScript nell'editor di testo, quindi utilizza la scorciatoia Control+ Alt+ N(o ⌃ Control+ ⌥ Option+ Nsu macOS), oppure premi F1e quindi seleziona / digita Run Code, il codice verrà eseguito e l'output verrà visualizzato nella finestra Output.

Inoltre, puoi selezionare parte del codice JavaScript ed eseguire lo snippet di codice. L'estensione funziona anche con file non salvati, quindi puoi semplicemente creare un file, cambiarlo in Javascript e scrivere codice velocemente (per quando hai solo bisogno di provare qualcosa di veloce). Molto conveniente!

Sono sorpreso che questo non sia stato ancora menzionato:

Basta aprire il .jsfile in questione in VS Code, passare alla scheda "Debug Console", premere il pulsante di debug nella barra di navigazione a sinistra e fare clic sull'icona Esegui (pulsante Riproduci)!

Richiede che nodejs sia installato!

Questo è il modo più veloce per te secondo me;

• Apri terminale integrato su Visual Studio Code ( View > Integrated Terminal)
• genere 'node filename.js'
• premere Invio

nota : è richiesta l'installazione del nodo. (se hai un homebrew basta digitare 'brew install node' sul terminale)

nota 2 : homebrew e nodo altamente raccomandato se non lo hai già fatto.

buona giornata.

Il collegamento per il terminale integrato è ctrl+ `, quindi digitare node <filename>.

In alternativa è possibile creare un'attività. Questo è l'unico codice nel mio compito.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"
}

Da qui creare un collegamento. Questo è il mio 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"
}
]

Si aprirà "Esegui" nel comando Pallete, ma è comunque necessario digitare o selezionare con il mouse l'attività che si desidera eseguire, in questo caso nodo. Il secondo collegamento attiva o disattiva il pannello di output, ma esiste già un collegamento, ma questi tasti sono uno accanto all'altro e più facili da utilizzare.

Bene, per eseguire semplicemente il codice e mostrare l'output sulla console è possibile creare un'attività ed eseguirla, praticamente come menziona @canerbalci.

L'aspetto negativo di questo è che otterrai solo l'output e questo è tutto.

Quello che mi piace davvero fare è essere in grado di eseguire il debug del codice, diciamo che sto cercando di risolvere un piccolo algoritmo o provare una nuova funzionalità ES6, e lo eseguo e c'è qualcosa di sospetto con esso, posso eseguire il debug all'interno di VSC.

Quindi, invece di creare un'attività per esso, ho modificato il file .vscode / launch.json in questa directory come segue:

{
"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
    }
]
}

Ciò che fa è che si avvierà qualsiasi file si trovi attualmente, all'interno del debugger di VSC. Sta per fermarsi all'avvio.

Per avviarlo, premere il tasto F5, nel file che si desidera eseguire il debug.

Ho riscontrato questo esatto problema, quando ho iniziato a utilizzare VS Code con estensioneCode Runner

Le cose che devi fare è impostare il percorso node.js in Impostazioni utente

È necessario impostare il percorso durante l'installazione nel computer Windows.

Per me lo era \"C:\\Program Files\\nodejs\\node.exe\"

Come ho uno spazio nel mio nome di directory di file

Vedi questa immagine sotto. Non sono riuscito a eseguire il codice in un primo momento perché ho fatto un errore nel nome del percorso

Spero che questo ti possa aiutare.

E naturalmente, la tua domanda mi ha aiutato, dato che ero anche venuto qui per ottenere un aiuto per eseguire il JSmio VS CODE

Seguire questi passaggi nel codice VS. [eseguito in Windows OS]

1. Crea un nuovo file

2. Scrivi i codici JavaScript in esso

3. Salva il file come nomefile.js

4. Vai al menu Debug

5. Fai clic su Avvia debug

6. o semplicemente premere F5

screenshot di avvio del debug

screenshot dell'output del codice js nel terminale

Ho usato Node Exec, nessuna configurazione necessaria, crea il file che stai terminando o ciò che è stato selezionato e l'output all'interno di VSCode.

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

Con un po 'di configurazione puoi aggiungere Babel per fare un po' di traspilazione al volo.

È molto semplice, quando crei un nuovo file in VS Code ed eseguilo, se non hai già un file di configurazione ne crea uno per te, l'unica cosa che devi impostare è il valore "programma" e impostarlo al percorso del tuo file JS principale, assomiglia a questo:

{
    "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
        }
    ]
}

Non è necessario impostare l'ambiente per l'esecuzione del codice su javascript, python, ecc. Nel codice di Visual Studio quello che devi fare è installare l'estensione Code Runner e quindi selezionare la parte del codice che vuoi eseguire e premere il pulsante di esecuzione presente nell'angolo in alto a destra.

Questo potrebbe ora essere il più semplice, a partire dalla v1.32:

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

Usa il tuo keybinding.

Vedi Note di rilascio: sendSequence e variabili .

Con vscode v1.32 puoi raggiungere sendSequenceil terminale usando variabili come ${file}, che è il file corrente. Se vuoi qualche altro percorso lì, sostituisci $ {file} con il tuo percorso nel keybinding sopra.

Il \u000Dè un ritorno in modo che verrà eseguito immediatamente.

Ho aggiunto 's attorno alla ${file}variabile nel caso in cui il percorso del file contenga spazi, ad esempioc:Users\Some Directory\fileToRun

Ti suggerirei di utilizzare un plugin semplice e facile chiamato Quokka che è molto popolare in questi giorni e ti aiuta a eseguire il debug del tuo codice in movimento. Quokka.js . Uno dei maggiori vantaggi dell'utilizzo di questo plug-in è che si risparmia molto tempo per accedere al browser Web e valutare il proprio codice, con l'aiuto di ciò è possibile vedere tutto ciò che accade nel codice VS, il che consente di risparmiare molto tempo.

Esistono molti modi per eseguire javascript in Visual Studio Code.

Se usi Node, ti consiglio di usare il debugger standard in VSC.

Normalmente creo un file fittizio, come test.js, dove eseguo test esterni.

Nella tua cartella in cui hai il tuo codice, crei una cartella chiamata ".vscode" e crei un file chiamato "launch.json"

In questo file si incolla quanto segue e si salva. Ora hai due opzioni per testare il tuo codice.

Quando scegli "Nodemon Test File" devi mettere il tuo codice per testare in test.js.

Per installare nodemon e maggiori informazioni su come eseguire il debug con nodemon in VSC, consiglio di leggere questo articolo , che spiega in modo più dettagliato la seconda parte sul file launch.json e come eseguire il debug in ExpressJS.

{
    "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",
        },
    ]
}

Un'altra opzione è quella di utilizzare la console degli strumenti di sviluppo in Visual Studio Code. Seleziona "Attiva / disattiva strumenti di sviluppo" dal menu di aiuto, quindi seleziona la scheda "Console" negli strumenti di sviluppo che vengono visualizzati. Da lì hai gli stessi strumenti di sviluppo REPL che ottieni in Chrome.

Per Windows : basta cambiare l'associazione dei .jsfile del file 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".

Un altro modo sarebbe quello di aprire il terminale ctrl + ` esegui node. Ora hai un nodo REPL attivo. Ora puoi inviare il tuo file o il testo selezionato al terminale. Per fare ciò aprire il comando VSCode pallete ( F1 o ctrl + shift + p ) ed eseguire >run selected text in active terminalo >run active file in active terminal.

Se è necessario un REPL pulito prima di eseguire il codice, sarà necessario riavviare il nodo REPL. Questo viene fatto quando si è nel Terminale con il nodo REPL ctrl+c ctrl+cper uscire e digitando nodeper iniziare nuovo.

Probabilmente potresti legare il comando pallete comandi a qualunque tasto desideri.

PS: nodedovrebbe essere installato e nel tuo percorso

Basta installare nodemon ed eseguire

nodemon your_file.js

sul terminale vs code.