Introducción al IDE de Visual Studio para JavaScript

En esta introducción de 5 a 10 minutos al entorno de desarrollo integrado (IDE) de Visual Studio, realizamos un recorrido por algunas de las ventanas, menús y otras características de la interfaz de usuario.

Si no ha instalado Visual Studio, vaya a la página descargas de Visual Studio para instalarlo de forma gratuita.

Ventana Inicio

Lo primero que ve después de iniciar Visual Studio es la ventana de inicio. La ventana de inicio está diseñada para ayudarle a comenzar a programar más rápido. Tiene opciones para cerrar o revisar código, abrir un proyecto o una solución de proyectos existente, crear un nuevo proyecto o simplemente abrir una carpeta que contenga archivos con código. Si la ventana de inicio no está abierta, elija Ventana de inicio de archivo > para abrirla.

Si es la primera vez que usa Visual Studio, la lista de proyectos recientes estará vacía.

Si trabaja con código base no basado en MSBuild, use la opción Abrir una carpeta local para abrir el código en Visual Studio. Para obtener más información, consulte Desarrollo de código en Visual Studio sin proyectos ni soluciones. De lo contrario, puede crear un nuevo proyecto o clonar un proyecto desde un proveedor de origen, como GitHub o Azure DevOps.

La opción Continuar sin código simplemente abre el entorno de desarrollo de Visual Studio sin ningún proyecto o código específico cargado. Puede elegir esta opción para unirse a una sesión de Live Share o asociarla a un proceso para la depuración. También puede presionar Esc para cerrar la ventana de inicio y abrir el IDE.

Creación de un proyecto

Para seguir explorando las características de Visual Studio, vamos a crear un nuevo proyecto.

1. En la ventana de inicio, seleccione Crear un nuevo proyecto y, a continuación, en el cuadro de búsqueda escriba javascript o typescript para filtrar la lista de tipos de proyecto a los que contienen "javascript" o "typescript" en su nombre o tipo de lenguaje.

   Visual Studio proporciona varios tipos de plantillas de proyecto que le ayudan a empezar a codificar rápidamente.

   

2. Elija una plantilla de proyecto de aplicación JavaScript Express y haga clic en Siguiente.

3. En el cuadro de diálogo Configurar el nuevo proyecto que aparece, acepte el nombre del proyecto predeterminado y elija Crear.

   Se crea el proyecto. En el panel derecho, seleccione app.js para abrir el archivo en la ventana Editor . El Editor muestra el contenido de los archivos y es donde realiza la mayor parte del trabajo de codificación en Visual Studio.

   

Explorador de soluciones

El Explorador de soluciones, que normalmente se encuentra en el lado derecho de Visual Studio, muestra una representación gráfica de la jerarquía de archivos y carpetas del proyecto, la solución o la carpeta de código. Puede examinar la jerarquía y navegar a un archivo en el Explorador de soluciones.

Menús

La barra de menús en la parte superior de Visual Studio agrupa los comandos en categorías. Por ejemplo, el menú Proyecto contiene comandos relacionados con el proyecto en el que trabaja. En el menú Herramientas , puede personalizar el comportamiento de Visual Studio seleccionando Opciones o agregando características a la instalación seleccionando Obtener herramientas y características.

Vamos a abrir la ventana Lista de errores eligiendo el menú Ver y, a continuación, lista de errores.

Lista de errores

La lista de errores muestra errores, advertencias y mensajes relacionados con el estado actual del código. Si hay algún error (como una llave o punto y coma que falta) en el archivo o en cualquier parte del proyecto, se muestran aquí.

Resultados (ventana)

En la ventana Salida se muestran los mensajes de salida de la compilación del proyecto y del proveedor de control de código fuente.

Vamos a compilar el proyecto para ver algunos resultados de compilación. En el menú Compilar , elija Compilar solución. La ventana Salida obtiene automáticamente el foco y muestra un mensaje de compilación correcto.

Cuadro de búsqueda

El cuadro de búsqueda es una manera rápida y sencilla de hacer prácticamente cualquier cosa en Visual Studio. Puede escribir texto relacionado con lo que desea hacer y le mostrará una lista de opciones que pertenecen al texto. Por ejemplo, imagínese que desea aumentar el nivel de detalle de la salida de compilación para mostrar más información adicional sobre lo que exactamente está haciendo la compilación. Así es como podría hacerlo:

1. Si no ve el cuadro de búsqueda, presione Ctrl + Q para abrirlo.

2. Escriba nivel de detalle en el cuadro de búsqueda. En los resultados mostrados, elija Proyectos y soluciones:> Compilar y ejecutar.

   

   El cuadro de diálogo Opciones se abre en la página Opciones de compilación y ejecución .

3. En las opciones de salida de la compilación del proyecto de MSBuild, elija Normal y, a continuación, haga clic en Aceptar.

4. Vuelva a compilar el proyecto haciendo clic con el botón derecho en el proyecto en el Explorador de soluciones y seleccionando Recompilar en el menú contextual.

   Esta vez, la ventana Salida muestra un registro más detallado desde el proceso de compilación.

   

Menú Enviar comentarios

Si tiene algún problema al usar Visual Studio o si tiene sugerencias para mejorar el producto, puede usar el menú Enviar comentarios en la parte superior de la ventana de Visual Studio.

Pasos siguientes

Hemos examinado solo algunas de las características de Visual Studio para familiarizarnos con la interfaz de usuario. Para explorarla más a fondo:

Más información sobre el editor de código

Obtener información sobre proyectos y soluciones

Consulte también

• Información general sobre el IDE de Visual Studio
• Más características de Visual Studio 2017
• Cambiar los colores de tema y fuente