¿Cómo instalar JavaScript en Visual Studio Code?

Visual studio code javascript

Node.js 16 es una canción del pasado, con la versión 16 convirtiéndose en la versión de soporte a largo plazo (LTS), y la versión 17 convirtiéndose en la actual. La versión actual se actualizará “aproximadamente” cada dos semanas.

Una de las iniciativas estratégicas del proyecto es “proporcionar APIs básicas adicionales basadas en promesas”. Esta iniciativa tiene un propósito. Se trata de mejorar el rendimiento general del tiempo de ejecución, ya que las API basadas en promesas no bloquean la ejecución del programa, como lo hacen las operaciones sincrónicas.

La nueva versión de la biblioteca OpenSSL, que supone una importante mejora, es un gran avance para Node.js. Hasta ahora, la versión utilizada era la 1.1.1. Con la versión 17 del tiempo de ejecución, el equipo ha decidido avanzar y actualizar la biblioteca criptográfica subyacente. Esto es para permitir que todo el mundo pruebe su código con OpenSSL 3.0 antes de la próxima versión de soporte a largo plazo.

Para todos los usuarios de Chrome y Edge, la nueva aplicación web ofrece algunas funcionalidades interesantes, gracias al acceso nativo a sus archivos. Gracias a ello, ahora tienes un editor totalmente funcional sin necesidad de instalaciones. Este es un beneficio poco discutido de las aplicaciones web en general, y un beneficio gigantesco.

Vista previa del código de Visual Studio

Sugerencia: Para desactivar las sugerencias de fragmentos, establezca editor.snippetSuggestions como “ninguno” en su archivo de configuración. La configuración de editor.snippetSuggestions también le permite cambiar dónde aparecen los fragmentos en las sugerencias: en la parte superior (“top”), en la parte inferior (“bottom”), o en línea ordenada alfabéticamente (“inline”). El valor por defecto es “inline”.

Las importaciones automáticas aceleran la codificación al sugerir variables disponibles en todo el proyecto y sus dependencias. Cuando seleccionas una de estas sugerencias, VS Code añade automáticamente una importación para ella en la parte superior del archivo.

VS Code soporta JSX y React Native. Obtendrá IntelliSense para React/JSX y React Native a partir de los archivos de declaración de tipos (typings) descargados automáticamente desde el repositorio de archivos de declaración de tipos npmjs. Además, puedes instalar la popular extensión React Native desde el Marketplace.

Para habilitar las declaraciones de importación de ES6 para React Native, es necesario establecer la opción del compilador allowSyntheticDefaultImports en true. Esto le dice al compilador que cree miembros sintéticos por defecto y se obtiene IntelliSense. React Native utiliza Babel entre bastidores para crear el código adecuado en tiempo de ejecución con miembros por defecto. Si también quieres hacer la depuración del código de React Native, puedes instalar la extensión de React Native.

Vs código javascript intellisense

Para poder trabajar con los ejemplos de este artículo, necesitarás tener Visual Studio Code y Node.js instalados en tu ordenador. Si no estás familiarizado con Visual Studio Code, puedes aprender sobre él aquí: https://code.visualstudio.com/. Desde allí, puedes descargarlo e instalarlo, y puedes utilizar sus recursos de aprendizaje para ponerte en marcha. Para Node, puedes descargarlo e instalarlo desde aquí: http://nodejs.org.

Al igual que se utiliza NuGet para ampliar las aplicaciones basadas en .NET, se utiliza el Node Package Manager (NPM) para ampliar las aplicaciones basadas en Node. Los paquetes NPM empleados en este artículo son node-fetch y make-runnable:

La Figura 3 ilustra cómo ejecutar el código desde VS Code. Puedes ejecutar el código desde cualquier símbolo del sistema. Lo bueno de Visual Studio Code es que proporciona un acceso rápido a un terminal PowerShell. El valor de retorno de la función se envía al terminal.

Ningún artículo de prueba o depuración en el contexto de un editor con todas las funciones, como Visual Studio Code, estaría completo sin la posibilidad de añadir puntos de interrupción y recorrer el código. El primer paso para conseguir que los puntos de interrupción se activen es activar la función de auto-agregación en Visual Studio Code. La Figura 5 ilustra cómo activar la configuración en la paleta de comandos a través del atajo Ctrl+Mayús+P.

Cómo ejecutar javascript en visual studio code

Esto abrirá ‘run’ en la paleta de comandos, pero todavía tienes que escribir o seleccionar con el ratón la tarea que quieres ejecutar, en este caso el nodo. El segundo atajo activa el panel de salida, ya hay un atajo para ello pero estas teclas están al lado y son más fáciles de trabajar.

Lo que realmente me gusta 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 con él, puedo depurarlo dentro de VSC.

Quokka.js. Una de las mayores ventajas en el uso de este plugin es que se ahorra un montón de tiempo para ir en el navegador web y evaluar su código, con la ayuda de este se puede ver todo lo que sucede en el código de VS, lo que ahorra mucho tiempo.

Con vscode v1.32 puedes enviarSecuencia a la terminal usando variables como ${file}, que es el archivo actual. Si quieres alguna otra ruta allí, reemplaza ${file} con tu nombre de ruta en el keybinding anterior.

Es muy sencillo, cuando creas un nuevo archivo en VS Code y lo ejecutas, si no tienes ya un archivo de configuración te crea uno, lo único que tienes que configurar es el valor “program”, y ponerlo en la ruta de tu archivo JS principal, se ve así: