En mis publicaciones anteriores, mostré cómo ver los archivos HTML previamente en el código Visual Studio. Esta configuración funciona muy bien al probar páginas estáticas, pero ¿qué pasa si quieres ir más allá del marcado y llevar la interacción a la mezcla?
Dado que JavaScript es la columna vertebral de las redes modernas, innumerables desarrolladores ahora están incursionando en marcos como React, VueAdemás, esbelto, es casi crucial poder ejecutar el código JavaScript directamente en el código VS.
Ejecutar JavaScript en el editor lo ayuda a evitar el cambio de contexto continuo, reducir la interferencia y proporcionarle comentarios instantáneos al depurar.
Aquí hay dos métodos:
- Ejecute JavaScript en el código VS usando Node.js: El método más efectivo y editable.
- Ejecutarlo en un navegador o usar una extensión: Conveniente para pruebas rápidas o comentarios visuales.
Veamos cómo usarlos.
Comprender el papel de node.js
JavaScript fue diseñado originalmente para ejecutarse dentro de los navegadores, que están equipados con sus propios motores JavaScript (como V8 en Chrome).
nodo.js Tome el mismo motor V8 y llévelo a su máquina local. Esto le permite ejecutar JavaScript directamente desde la línea de comando o desde el terminal fuera del navegador.
Esto es especialmente útil para el trabajo de backend, los scripts automatizados o simplemente haciendo pruebas rápidas sin la sobrecarga de las capas HTML.
Si no está seguro de si Node.js ya está instalado en su sistema, abra el terminal y escriba:
node -vSi ve un número de versión, configure todo. Si no, necesitas Descargar Node.js Y siga las instrucciones de instalación del sistema operativo.
Ya hemos introducido la instalación del nodo en Ubuntu.
Instale Node.js y NPM en Ubuntu Linux [Free Cheat Sheet]
Node.js y NPM se pueden instalar fácilmente utilizando el repositorio de Ubuntu o el repositorio nodoSource. Aprenda dos formas de instalar Node.js en Ubuntu Linux.
Configuración de un proyecto JavaScript
Una vez que todo esté instalado, abra el código VS y cree una nueva carpeta para su proyecto. En él, comienza el terminal (Ctrl + ~ o Terminal > New Terminal) y correr npm init -y.
Esto inicializa un proyecto básico y crea package.json Archivos, que es muy útil para la gestión futura de sus scripts y dependencias.
Preparar el entorno y crear un nuevo archivo llamado app.js Y agregue un poco de JavaScript, por ejemplo:
console.log("Hello, VS Code!");
Para ejecutarlo, solo escriba node app.js En la terminal.
La salida aparecerá inmediatamente en la consola, confirmando que el nodo está ejecutando su archivo correctamente.
Agregue un script personalizado para ejecutar simple
Para hacer las cosas más suaves, especialmente a medida que su proyecto crece, es una buena idea definir una Scripts personalizados En tu package.json documento. Abra el archivo y busque "scripts" Parte, luego agregue:
"start": "node app.js"
Esto le permite ejecutar el script simplemente escribiendo npm startno repita el nombre del archivo cada vez.
Opcional: use la extensión del corredor de código
Si desea una forma rápida de ejecutar un pequeño resumen sin configurar su proyecto, el corredor de código puede ayudar. Esta es una extensión ligera de código VS que ejecuta el código en la ventana de salida de Sandbox.
comenzar:
- Abra la pestaña «Extensiones» en el código VS.
- Busque «Code Runner» e instálelo.
- Abierto
.jsArchivo, escriba algún código, haga clic con el botón derecho y seleccione Ejecutar código.
Por ejemplo, example.js y:
console.log("Hello from Code Runner!");Saltará directamente a la pestaña de salida del código VS.
La principal limitación aquí es que no utiliza un terminal integrado como se usa anteriormente, que puede limitar el comportamiento de entrada/salida de scripts más complejos.
Resumir
Configurar en el código VS con Node.js, ejecutar JavaScript se convierte en una parte perfecta del flujo de trabajo sin pestañas del navegador o herramientas externas requeridas.
Ya sea que esté probando características rápidas o construyendo proyectos más grandes con terminales y scripts de NPM personalizados, puede hacer las cosas rápidas y desatendidas.
Extensiones como Code Runner pueden ayudarlo con pruebas rápidas únicas, pero para cualquier cosa seria, seguir con enfoques basados en nodos frente a los métodos le brinda más control, mejor salida de error y una verdadera sensación de desarrollo.
Una vez que esta configuración se convierta en una segunda naturaleza, será más natural saltar a un marco como React o Express.
Ahora tiene las herramientas, sigue, experimentando, rompiendo cosas, depuración y construcción.
