.tutorial de JS en el nodo Visual Studio Code

.js es una plataforma para crear aplicaciones de servidor rápidas y escalables utilizando JavaScript. Nodo.js es el tiempo de ejecución y npm es el Gestor de paquetes para Node.módulos js.

Visual Studio Code tiene soporte para los lenguajes JavaScript y TypeScript listos para usar, así como Node.depuración de js. Sin embargo, para ejecutar un nodo.aplicación js, tendrá que instalar el nodo.tiempo de ejecución de js en su máquina.

Para comenzar en este tutorial, instale Node.js para su plataforma., El Gestor de paquetes de nodos está incluido en el nodo.distribución js. Deberá abrir un nuevo terminal (símbolo del sistema) para que las herramientas de línea de comandos node y npm estén en su ruta.

Linux: Hay un Nodo específico.paquetes JS disponibles para los diferentes tipos de Linux. Consulte Instalación De Nodo.JS a través del gestor de paquetes para encontrar el nodo.paquete js e instrucciones de instalación adaptadas a su versión de Linux.

Sugerencia: Para probar que tienes Nodo.,JS correctamente instalado en su computadora, abra un nuevo terminal y escriba node --help y debería ver la documentación de uso.

Hello World

comencemos creando el nodo más simple.aplicación js, «Hello World».

Crear una carpeta vacía llamada «hola», localice y abierto VS Codigo:

mkdir hellocd hellocode .

Sugerencia: también puede abrir archivos o carpetas directamente desde la línea de comandos. Periodo ‘.,’se refiere a la carpeta actual, por lo tanto VS Code se iniciará y abrirá la carpeta Hello.

en el Archivo De barra de herramientas del Explorador, pulse el botón Nuevo Archivo:

y el nombre del archivo app.js:

con el .js extensión de archivo, VS Código interpreta este archivo como JavaScript y evaluará el contenido con el lenguaje JavaScript servicio. Consulte el tema VS Code JavaScript language para obtener más información sobre la compatibilidad con JavaScript.,

cree una variable de cadena simple en app.js y envíe el contenido de la cadena a la consola:

var msg = 'Hello World';console.log(msg);

tenga en cuenta que cuando escribió console. IntelliSense en el objeto console se le presentó automáticamente.

observe También que VS Código de sabe que el msg es una cadena basada en la inicialización a 'Hello World'., Si escribe msg. verá IntelliSense mostrando todas las funciones de cadena disponibles en msg.

después de experimentar con IntelliSense, revierta cualquier cambio adicional del ejemplo de código fuente anterior y guarde el archivo (Windows S (Windows, Linux Ctrl+S)).

ejecutando Hello World

es simple Ejecutar app.js con Node.js. Desde un terminal, simplemente escriba:

node app.js

debería ver la salida» Hello World » en el terminal y luego en el nodo.,JS regresa.

terminal integrado

VS Code tiene un terminal integrado que puede usar para ejecutar comandos de shell. Puede ejecutar Node.js directamente desde allí y evitar cambiar de código VS mientras se ejecuta herramientas de línea de comandos.

para este tutorial, puede usar un terminal externo o el terminal integrado VS Code para ejecutar las herramientas de línea de comandos.

Debugging Hello World

como se mencionó en la introducción, VS Code se envía con un depurador para Node.JS applications. Intentemos depurar nuestra sencilla aplicación Hello World.,

para establecer un punto de interrupción en app.js, coloque el cursor del editor en la primera línea y presione F9 o haga clic en el margen izquierdo del editor junto a los números de línea. Un círculo rojo aparecerá en la cuneta.

para iniciar la depuración, seleccione la vista Ejecutar en la barra de actividades:

Ahora puede hacer clic en la barra de herramientas de depuración flecha verde o pulse F5 para iniciar y depurar «Hello World». Su punto de interrupción será golpeado y se puede ver y paso a través de la aplicación simple., Observe que VS Code muestra una barra de Estado de color diferente para indicar que está en modo de depuración y se muestra la consola de depuración.

ahora que ha visto VS Code en acción con «Hello World», la siguiente sección muestra el uso de VS Code con un nodo de pila completa.js web app.

Nota: Hemos terminado con el ejemplo «Hello World», así que sal de esa carpeta antes de crear una Aplicación Express. Puede eliminar la carpeta» Hola » si lo desea, ya que no es necesario para el resto del tutorial.,

una Aplicación Express

Express es un framework de aplicaciones muy popular para construir y ejecutar nodos.JS applications. Puede crear una nueva aplicación Express utilizando la herramienta generador Express. El generador Express se envía como un módulo npm y se instala mediante la herramienta de línea de comandos npm npm.

sugerencia: para probar que tienenpminstalado correctamente en su computadora, escribanpm --help desde un terminal y debería ver la documentación de uso.,

instale el generador Express ejecutando lo siguiente desde un terminal:

npm install -g express-generator

el -g globalmente en su máquina para que pueda ejecutarla desde cualquier lugar.

ahora podemos andamio de una nueva Expresar aplicación llamada myExpressApp ejecutando:

express myExpressApp --view pug

Esto crea una nueva carpeta llamada myExpressApp con el contenido de su solicitud., Los parámetros --view pug indican al generador que utilice el motor de plantillas pug.

para instalar todas las dependencias de la aplicación (nuevamente enviadas como módulos npm), vaya a la nueva carpeta y ejecute npm install:

cd myExpressAppnpm install

en este punto, debemos probar que nuestra aplicación se ejecuta. La Aplicación Express generada tiene un archivo package.json que incluye un script start para ejecutar node ./bin/www. Esto iniciará el Nodo.aplicación JS en ejecución.,

desde un terminal en la carpeta de la Aplicación Express, ejecute:

npm start

El nodo.JS Web server se iniciará y puede navegar a http://localhost:3000 para ver la aplicación en ejecución.

la Gran edición de código

Cierre el navegador y desde un terminal en el myExpressApp carpeta, detenga el Nodo.servidor js pulsando CTRL + C.,

ahora inicie VS Code:

code .

Nota: Si ha estado utilizando el terminal integrado VS Code para instalar el generador Express y andamiar la aplicación, puede abrir el myExpressApp carpeta de la instancia VS Code en ejecución con el comando file > open folder.

El Nodo.la documentación de Js y Express hace un gran trabajo explicando cómo crear aplicaciones ricas utilizando la plataforma y el marco., Visual Studio Code le hará más productivo en el desarrollo de este tipo de aplicaciones al proporcionar excelentes experiencias de edición y navegación de código.

abra el archivoapp.js y pase el cursor sobre el nodo.JS global object __dirname. Observe cómo VS Code entiende que __dirname es una cadena. Aún más interesante, puede obtener IntelliSense completo contra el nodo.JS framework. Por ejemplo, puede requerir http y obtener IntelliSense completo contra la clase http mientras escribe el código de Visual Studio.,

VS Code utiliza archivos de declaración de tipo (typings) de TypeScript (por ejemplonode.d.ts) para proporcionar metadatos al código VS sobre los marcos basados en JavaScript que está consumiendo en su aplicación. Los archivos de declaración de tipo se escriben en TypeScript para que puedan expresar los tipos de datos de parámetros y funciones, lo que permite que VS Code proporcione una experiencia IntelliSense Rica. Gracias a una característica llamada Automatic Type Acquisition, no tiene que preocuparse por descargar estos archivos de declaración de tipo, VS Code los instalará automáticamente.,

también puede escribir código que haga referencia a módulos en otros archivos. Por ejemplo, en app.js requerimos el módulo ./routes/index, que exporta una clase Express.Router. Si IntelliSense en index, se puede ver la forma de la etiqueta Router clase.

Depurar su Expreso app

Usted tendrá que crear un depurador archivo de configuración launch.json para Expresar su aplicación., Haga clic en el icono Ejecutar en la barra de actividades y luego en el icono Configurar engranaje en la parte superior de la vista Ejecutar para crear un archivo predeterminado launch.json. Seleccione el nodo.js medio ambiente, asegurando que el type propiedad configurations a "node". Cuando se crea el archivo por primera vez, el código VS buscará en package.json un script start y usará ese valor como program (que en este caso es "${workspaceFolder}\\bin\\www) para la configuración del Programa de lanzamiento.,

{ "version": "0.2.0", "configurations": }

guarde el nuevo archivo y asegúrese de que el programa de inicio esté seleccionado en el menú desplegable Configuración en la parte superior de la vista Ejecutar. Abra app.js y establezca un punto de interrupción cerca de la parte superior del archivo donde se crea el objeto de la Aplicación Express haciendo clic en el canal a la izquierda del número de línea. Presione F5 para comenzar a depurar la aplicación. VS Code iniciará el servidor en un nuevo terminal y alcanzará el punto de interrupción establecido. Desde allí puede inspeccionar variables, crear relojes y revisar su código.,

implementar su aplicación

Si desea aprender a implementar su aplicación web, consulte los tutoriales de implementación de aplicaciones en Azure, donde mostramos cómo ejecutar su sitio web en Azure.

Hay mucho más que explorar con Visual Studio Code, pruebe los siguientes temas:

• configuración: Aprenda a personalizar VS Code para ver cómo le gusta trabajar.
• depuración-aquí es donde VS Code realmente brilla.
• Video: primeros pasos con Node.JS debugging-aprender a adjuntar a un nodo en ejecución.proceso js.
• Nodo.,JS debugging-más información sobre el nodo integrado de VS Code.depuración de js.
• recetas de depuración-ejemplos para escenarios como la depuración del lado del cliente y del contenedor.
• Tasks-ejecutar tareas con Gulp, Grunt y Jake. Mostrar errores y advertencias.