Ejecute JavaScript en Visual Studio Code

¿Hay alguna manera de ejecutar JavaScript y mostrar los resultados con Visual Studio Code ?

Por ejemplo, un archivo de script que contiene:

console.log('hello world');

Supongo que se necesitaría Node.js pero no puedo encontrar la manera de hacerlo.

Por código de Visual Studio me refiero al nuevo editor de código de Microsoft: no código escrito con Visual Studio.

Esta solución tiene la intención de ejecutar el archivo abierto actualmente en el nodo y mostrar la salida en VSCode.

Tenía la misma pregunta y encontré que la introducción reciente era tasksútil para este caso de uso específico. Es un poco complicado, pero esto es lo que hice:

Cree un .vscodedirectorio en la raíz de su proyecto y cree un tasks.jsonarchivo en él. Agregue esta definición de tarea al archivo:

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

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

Luego puede: press F1 > type `run task` > enter > select `runFile` > enter ejecutar su tarea, pero me resultó más fácil agregar un enlace de teclas personalizado para abrir listas de tareas.

Para agregar la combinación de teclas, en el menú de la interfaz de usuario de VSCode, vaya a 'Código'> 'Preferencias'> 'Atajos de teclado'. Agregue esto a los atajos de teclado:

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

Por supuesto, puede seleccionar lo que quiera como combinación de teclas.

ACTUALIZAR:

Suponiendo que está ejecutando el código JavaScript para probar que, podría marcar la tarea como una prueba de la tarea estableciendo su isTestCommandpropiedad de truey luego se puede vincular una clave para el workbench.action.tasks.testmando de una invocación de una sola acción.

En otras palabras, su tasks.jsonarchivo ahora contendría:

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

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

... y su keybindings.jsonarchivo ahora contendría:

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

Hay una manera mucho más fácil de ejecutar JavaScript, no se necesita configuración:

1. Instale la extensión Code Runner
2. Abra el archivo de código JavaScript en el Editor de texto, luego use el acceso directo Control+ Alt+ N(o ⌃ Control+ ⌥ Option+ Nen macOS), o presione F1y luego seleccione / escriba Run Code, el código se ejecutará y la salida se mostrará en la Ventana de salida.

Además, puede seleccionar parte del código JavaScript y ejecutar el fragmento de código. La extensión también funciona con archivos no guardados, por lo que puede crear un archivo, cambiarlo a Javascript y escribir código rápidamente (para cuando solo necesita probar algo rápido). ¡Muy conveniente!

Me sorprende que esto no se haya mencionado aún:

Simplemente abra el .jsarchivo en cuestión en VS Code, cambie a la pestaña 'Consola de depuración', presione el botón de depuración en la barra de navegación izquierda y haga clic en el icono de ejecución (botón de reproducción).

¡Requiere que se instale nodejs!

Esta es la forma más rápida para ti en mi opinión;

• Abrir terminal integrado en código visual studio ( View > Integrated Terminal)
• tipo 'node filename.js'
• presione enter

nota : se requiere la configuración del nodo. (si tiene un homebrew simplemente escriba 'brew install node' en la terminal)

nota 2 : homebrew y nodo muy recomendable si aún no lo ha hecho.

que tengas un buen día.

El acceso directo para el terminal integrado es ctrl+ `, luego escriba node <filename>.

Alternativamente, puede crear una tarea. Este es el único código en mis 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"
}

Desde aquí crea un atajo. Este es mi 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"
}
]

Esto abrirá 'ejecutar' en Command Pallete, pero aún debe escribir o seleccionar con el mouse la tarea que desea ejecutar, en este caso el nodo. El segundo acceso directo alterna el panel de salida, ya hay un acceso directo para él, pero estas teclas están una al lado de la otra y son más fáciles de trabajar.

Bueno, para simplemente ejecutar el código y mostrar el resultado en la consola, puede crear una tarea y ejecutarla, más o menos como @canerbalci menciona.

La desventaja de esto es que solo obtendrá la salida y eso es todo.

Lo que realmente me gusta hacer es poder depurar el código, digamos que estoy tratando de resolver un pequeño algoritmo o probando una nueva función ES6, y lo ejecuto y hay algo sospechoso, puedo depurarlo dentro de VSC.

Entonces, en lugar de crear una tarea para ello, modifiqué el archivo .vscode / launch.json en este directorio de la siguiente manera:

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

Lo que esto hace es que lanzará cualquier archivo en el que se encuentre actualmente, dentro del depurador de VSC. Está configurado para detenerse en el inicio.

Para iniciarlo, presione la tecla F5, en el archivo que desea depurar.

Me enfrenté a este problema exacto, cuando comencé a usar VS Code con extensiónCode Runner

Lo que debe hacer es establecer la ruta node.js en Configuración de usuario

Debe configurar la ruta a medida que la instala en su máquina Windows.

Para la mía fue \"C:\\Program Files\\nodejs\\node.exe\"

Como tengo un espacio en mi nombre de directorio de archivos

Ver esta imagen a continuación. No pude ejecutar el código al principio porque cometí un error en el nombre de la ruta

Espero que esto te ayudará.

Y, por supuesto, su pregunta me ayudó, ya que también vine aquí para obtener ayuda para ejecutar JSmi CÓDIGO VS

Siga estos pasos en el código VS. [Realizado en Windows OS]

1. Crear nuevo archivo

2. Escribe códigos JavaScript en él

3. Guardar archivo como filename.js

4. Ir al menú de depuración

5. Haga clic en Iniciar depuración

6. o simplemente presione F5

captura de pantalla de inicio de depuración

captura de pantalla de la salida del código js en la terminal

Usé Node Exec, no se necesita configuración, crea el archivo que está finalizando actualmente o lo que haya sido seleccionado y sale dentro de VSCode.

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

Con un poco de configuración, puede agregar a Babel para hacer algo sobre la marcha transpilándose también.

Es muy simple, cuando crea un nuevo archivo en VS Code y lo ejecuta, si ya no tiene un archivo de configuración, crea uno para usted, lo único que necesita configurar es el valor de "programa" y configurarlo a la ruta de su archivo JS principal, se ve así:

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

No es necesario establecer el entorno para ejecutar el código en javascript, python, etc. en el código de Visual Studio, lo que debe hacer es instalar la extensión Code Runner y luego seleccionar la parte del código que desea ejecutar y presionar el botón botón ejecutar presente en la esquina superior derecha.

Esto puede ser ahora el más fácil, a partir de v1.32:

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

Use su propia combinación de teclas.

Consulte las Notas de la versión: sendSequence y variables .

Con vscode v1.32 puedes acceder sendSequenceal terminal usando variables como ${file}, que es el archivo actual. Si desea alguna otra ruta allí, reemplace $ {file} con su nombre de ruta en la combinación de teclas anterior.

El \u000Des un retorno, por lo que se ejecutará de inmediato.

Agregué 's alrededor de la ${file}variable en caso de que la ruta del archivo tenga espacios, comoc:Users\Some Directory\fileToRun

Te sugiero que uses un complemento simple y fácil llamado Quokka, que es muy popular en estos días y te ayuda a depurar tu código sobre la marcha. Quokka.js . Una gran ventaja al usar este complemento es que ahorra mucho tiempo para ir al navegador web y evaluar su código, con la ayuda de esto puede ver todo lo que sucede en el código VS, lo que ahorra mucho tiempo.

Hay muchas formas de ejecutar JavaScript en Visual Studio Code.

Si usa Node, le recomiendo usar el depurador estándar en VSC.

Normalmente creo un archivo ficticio, como test.js donde hago pruebas externas.

En su carpeta donde tiene su código, crea una carpeta llamada ".vscode" y crea un archivo llamado "launch.json"

En este archivo, pega lo siguiente y guarda. Ahora tiene dos opciones para probar su código.

Cuando elige "Nodemon Test File", necesita poner su código a prueba en test.js.

Para instalar nodemon y más información sobre cómo depurar con nodemon en VSC, recomiendo leer este artículo , que explica con más detalle la segunda parte del archivo launch.json y cómo depurar en 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",
        },
    ]
}

Otra opción es usar la consola de herramientas de desarrollador dentro de Visual Studio Code. Simplemente seleccione "Toggle Developer Tools" en el menú de ayuda y luego seleccione la pestaña "Console" en las herramientas de desarrollador que aparecen. A partir de ahí, tienes las mismas herramientas de desarrollo REPL que obtienes en Chrome.

Para Windows : simplemente cambie la asociación de .jsarchivo de archivo anode.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".

Otra forma sería abrir la terminal ctrl + ` execute node. Ahora tiene un nodo REPL activo. Ahora puede enviar su archivo o texto seleccionado al terminal. Para hacerlo, abra la paleta de comandos VSCode ( F1 o ctrl + shift + p ) y ejecute >run selected text in active terminalo >run active file in active terminal.

Si necesita un REPL limpio antes de ejecutar su código, tendrá que reiniciar el nodo REPL. Esto se hace cuando en la Terminal con el nodo REPL ctrl+c ctrl+cpara salir y escribir nodepara comenzar de nuevo.

Probablemente podría vincular las teclas de comandos de la paleta de comandos a la tecla que desee.

PD: nodedebe estar instalado y en su camino

Simplemente instale nodemon y ejecute

nodemon your_file.js

en vs terminal de código.