Creación de una aplicación Node.js en Visual Studio Code

Completado

En esta unidad, aprenderá a:

• Crear una aplicación de JavaScript mediante Visual Studio Code y Cosmos DB
• Usar IntelliSense para ayudar a escribir código
• Ejecutar la aplicación mediante Node.js desde Visual Studio Code
• Usar el depurador integrado para recorrer el código y examinar las variables a medida que el código se ejecuta

Creación de una aplicación JavaScript para Node.js

Podemos crear una aplicación JavaScript para Node.js desde Visual Studio Code usando una ventana de terminal. El comando npm init -y crea un archivo, denominado package.json en la carpeta de la aplicación. Este archivo contiene los metadatos que usa para describir la aplicación en el runtime de Node.js.

Luego, debe crear un archivo para el código de la aplicación. Cuando guarde el archivo, asegúrese de asignarle una extensión .js (para JavaScript). Ya estamos listos para empezar a escribir el código de JavaScript.

Uso de IntelliSense para ayudar a escribir el código

A medida que escribimos el código, IntelliSense puede realizar la comprobación de tipos y la finalización de código. Por ejemplo, mientras creamos las funciones, definimos los tipos o incluso importamos un módulo a un archivo JavaScript, los elementos que hayamos agregado o importado estarán disponibles para IntelliSense.

Mientras escribimos, IntelliSense usará una combinación de comprobación de tipos e inferencia de tipos para mostrar sugerencias adecuadas en el contexto actual. La inferencia de tipos permite a IntelliSense presentar sugerencias de finalización de código válidas mientras escribimos el código:

En cuanto a la comprobación de tipos, permite a IntelliSense mostrar los parámetros que una llamada de función puede tomar, y comprobará los tipos de las expresiones que proporcionemos en cada función:

Estas son otras características de IntelliSense disponibles en Visual Studio Code:

• Detección de código inaccesible y variables no utilizadas. Las instrucciones que nunca se pueden ejecutar y las variables que nunca se usan se muestran atenuadas en el editor.
• Visualización de definiciones y referencias. La característica de inspección permite ver rápidamente la definición de un objeto o una función, aunque esté en otro archivo. Haga clic con el botón derecho en una variable o función, y seleccione Ver la definición o Inspeccionar referencias. La definición o las referencias aparecen en una ventana emergente.
• Desplazamiento a una definición de variable, función o tipo. Esta característica permite ir directamente a la definición de una variable, una función o un tipo en el código. Esto resulta útil si hay que cambiar la definición de un elemento o modificar una función. Haga clic con el botón derecho en el código que haga referencia a la variable o al tipo, o que llama a la función. Seleccione Ir a definición o Ir a definición de tipo.
• Sugerencia de una posible refactorización del código. Un botón de puntos suspensivos (...) en un elemento señala las áreas sobre las que IntelliSense tiene una o más sugerencias. Seleccione los puntos suspensivos para verlas. Seleccione Corrección rápida para implementar la sugerencia.

Ejecución y depuración de una aplicación Node.js

La forma más sencilla de ejecutar una aplicación Node.js desde Visual Studio Code es usar el comando node desde una ventana de terminal. Por ejemplo, para ejecutar el código en un archivo denominado index.js, ejecute node index.js.

Podemos usar el depurador de Node.js nativo (por ejemplo, node inspect index) desde una ventana de terminal, pero Visual Studio Code facilita un entorno mejorado para recorrer y depurar aplicaciones Node.js.

Configuración del depurador en el archivo launch.json

Antes de usar el depurador de Visual Studio Code, hay que configurarlo. Para editar los valores de configuración del depurador, en el menú Ejecutar, seleccioneAgregar configuración. En la opción Seleccionar depurador, seleccione Node.js. El archivo ./.vscode/launch.json muestra la configuración nueva.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/index.js",
        }
    ]
}

Para esta aplicación de Contoso, con varios archivos de código que se van a ejecutar, agregaremos un par de propiedades adicionales. Cambie el nombre de archivo de la propiedad program a ${file}. Esto le permite depurar el archivo JavaScript activo actualmente. Agregue la propiedad args cuando tenga que pasar parámetros a la aplicación. Estos valores están disponibles en la propiedad process.argv, disponible en el runtime de Node.js.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            // ${file} is replaced with active file's name
            "program": "${workspaceFolder}/${file}",
            // these values are available as process.argv
            "args": ["abc", "1"],
        }
    ]
}

Establecimiento de puntos de interrupción

Antes de empezar la depuración, debe establecer un punto de interrupción en el código de la aplicación. Para ello, haga clic en el margen izquierdo a la altura de la instrucción en la que quiera pausar la ejecución. Aparecerá un punto rojo.

Iniciar depuración

Para empezar la depuración, seleccione Iniciar depuración en el menú Ejecutar, o inicie el depurador, F5. Si utiliza un terminal externo, aparecerá una ventana de terminal nueva. La salida del depurador aparecerá en la ventana Salida de Visual Studio Code.

Cuando el depurador llega a un punto de interrupción en la aplicación, la ejecución se pausa y se resalta la instrucción con el punto de interrupción. Las ventanas del explorador Ejecución y depuración le permiten examinar y establecer los valores de las variables locales y globales, además de la pila de llamadas. También se pueden agregar expresiones Watch, que se evalúan y se muestran a medida que la ejecución prosigue.

Elemento	Descripción
1 - Variables	Todas las variables del ámbito local y global.
2 - Inspeccionar	Agregue las variables que se van a inspeccionar durante la ejecución.
3 - Pila de llamadas	Pila de ejecución de la aplicación en el momento actual.
4 - Puntos de interrupción	Todos los puntos de interrupción establecidos en la aplicación.
5 - Barra de herramientas de depuración	Esta barra de herramientas contiene comandos que permiten recorrer el código paso a paso. Si una instrucción contiene una llamada de función, podrá ir a ella u omitirla. El comando Paso a paso para salir continúa con la ejecución hasta que la función finaliza. La aplicación también se puede seguir ejecutando, ya sea hasta que el depurador llegue a otro punto de interrupción o hasta que la aplicación finalice.
6 - Consola de depuración	Consulte todos los valores de instrucción de consola.

A medida que agregue código JavaScript en los ejercicios siguientes, es posible que tenga que depurar el código para determinar cuál es el problema. Regrese a esta unidad cuando sea necesario.