Ejecutar JavaScript en Visual Studio Code

6 minutos de lectura

avatar de usuario
Nick le página

¿Hay alguna manera de ejecutar JavaScript y mostrar los resultados usando código de estudio visual?

Por ejemplo, un archivo de script que contiene:

console.log('hello world');

Supongo que se necesitaría Node.js pero no sé cómo hacerlo.

Por código de estudio visual Me refiero al nuevo Code Editor de Microsoft: no código escrito con Visual Studio.

  • Esto suena como un problema A/B. ¿Cuál es el problema que realmente estás tratando de resolver?

    – Jordán corriendo

    3 de agosto de 2015 a las 2:46

  • @Chris Se refiere a un software. VSCode es un editor

    – Kshitiz Sharma

    22 de junio de 2017 a las 14:37


  • Acabo de crear una nueva extensión para VS Code solo para esto, pruebe “Node.JS REPL”. mercado.visualstudio.com/…

    – Campos Perdidos

    06/01/2018 a las 23:40

  • La forma más fácil de ver los resultados es ir a View => Integrated Terminal y escribir: node .js

    – Mattl

    5 de marzo de 2018 a las 21:34


  • ¿Encontró alguna respuesta que permita ejecutar JavaScript desde la perspectiva del navegador? ¿Como lo haría con una consola de navegador en una página HTML vacía?

    –Eric Burel

    17 de febrero de 2021 a las 11:10

avatar de usuario
diezoeste

Me sorprende que esto no haya sido mencionado todavía:

Simplemente abra el .js archivo 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 nodejs para ser instalado!

  • ¡Y no es necesario instalar una extensión con esta solución! ¿El depurador tiene las mismas funciones que Code Runner?

    – Robin Métral

    7 mayo 2019 a las 14:28

  • Esto tiene más sentido

    – KhoPhi

    14 mayo 2019 a las 20:34

  • Bueno, la pregunta no pedía ejecutar un programa, pide “ejecutar javascript y mostrar los resultados”, esto hace ambas cosas 🙂

    – diezoeste

    6 ago 2019 a las 21:36

  • @tenwest: ¿no necesita primero una configuración de depuración que use node.js? Actualmente tengo una configuración de depuración solo para el navegador Chrome. Esto abre el navegador Chrome que no necesito porque mi código no llama a ninguna función del navegador.

    – MaestroJoe

    9 de junio de 2020 a las 22:33

  • No funciona fuera de la caja hoy. Se requiere algún tipo de configuración de depuración: Chrome, Edge, Node.js, VS Code Extension. Ninguno parece apropiado.

    – usuario48956

    14/09/2021 a las 20:57

  • Para mí, i) “Iniciar depuración” está en “Ejecutar”, ii) VSCode exige que seleccione un entorno (¡navegador!), Y no lo hace como un programa simple.

    – usuario48956

    14/09/2021 a las 20:54

  • Sí, puedo verlo en mi versión actual de vscode. Traté de ejecutar js después de tu comentario. pide la selección de navegadores. También muestra Nodejs en la lista y si selecciona Nodejs allí, ejecutará el archivo y mostrará el resultado en la consola de depuración sin dejar el vscode ni ninguna configuración adicional. Además, cuando solicita la selección del navegador, también da la opción de instalar extensiones, lo que facilitará su tarea.

    – CrackerKSR

    18/09/2021 a las 18:00


  • No quiero ejecutarlo en un navegador. Si Inseect nodejs, los errores del compilador no se informan (al menos, no puedo verlos en la salida; curiosamente, si selecciono las ventanas de salida, CTRL-A, CTRL-C y pego en el editor, los errores se pegan ¿Qué diablos?

    – usuario48956

    18/09/2021 a las 18:05

  • Creo que debería publicar una nueva pregunta y explicarla en detalle para que la responda correctamente.

    – CrackerKSR

    21 de septiembre de 2021 a las 10:29

  • Consulte el registro de cambios de agosto de 2021. Ahora están proporcionando un depurador incorporado code.visualstudio.com/updates/v1_60#_javascript-debugging

    – CrackerKSR

    25/09/2021 a las 18:25


avatar de usuario
canerbalci

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

Tuve la misma pregunta y encontré recién introducido tasks útil para este caso de uso específico. Es un poco complicado, pero esto es lo que hice:

Crear un .vscode directorio en la raíz de su proyecto y cree un tasks.json archivo 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}"]
        }
    ]
}

Entonces tú puedes:
press F1 > type `run task` > enter > select `runFile` > enter
para 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 sus 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 prueba puede marcar su tarea como una prueba tarea estableciendo su isTestCommand propiedad para true y luego puedes vincular una clave al workbench.action.tasks.test dominio para una invocación de una sola acción.

En otras palabras, su tasks.json el archivo 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 tu keybindings.json el archivo ahora contendría:

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

  • El OP no dijo nada sobre tener un proyecto. Parece que quieren ejecutar el único archivo actualmente abierto, lo cual es algo muy razonable para un editor de texto.

    –Mark Wilbur

    18 abr 2019 a las 21:39

avatar de usuario
Abhijit Chakra

Si tiene un nodo instalado en su máquina

Solo abre la terminal en VSCODE y tipo node yourfile.js eso es todo

  • El OP no dijo nada sobre tener un proyecto. Parece que quieren ejecutar el único archivo actualmente abierto, lo cual es algo muy razonable para un editor de texto.

    –Mark Wilbur

    18 abr 2019 a las 21:39

avatar de usuario
lebobbi

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 menciona @canerbalci.

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 característica de 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 al comenzar.

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

  • Bien, pero debe presionar Shift+F5 al final para detener el depurador

    – Peter Dotchev

    2 de agosto de 2016 a las 6:28

  • También podría agregar un proceso. exit () a su código: D

    – lebobbi

    3 de agosto de 2016 a las 22:12

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad