Ejercicio: Exploración de la interfaz de usuario de Visual Studio Code

Completado

Visual Studio Code proporciona herramientas para desarrolladores que acaban de empezar, pero también son lo suficientemente extensibles como para desarrolladores profesionales.

En este ejercicio, abrirá Visual Studio Code y completará un paseo rápido por la interfaz de usuario.

Abra Visual Studio Code y examine la página principal

  1. Use el menú Inicio de Windows para abrir Visual Studio Code.

    Si abre el menú Inicio de Windows, debería ver Visual Studio Code como una aplicación agregada recientemente. También puede desplazarse hacia abajo para buscar Visual Studio Code.

    Otra opción es escribir Visual Studio Code en el cuadro Búsqueda de Windows en la bandeja de inicio de la parte inferior de la pantalla.

  2. Tenga en cuenta que Visual Studio Code se abre en una página de bienvenida que incluye algunos vínculos y otra información.

    La primera vez que abra Visual Studio Code, la página principal muestra algunos tutoriales útiles, como el contenido de Introducción a VS Code . Puede examinar esta información en su tiempo libre otra vez.

  3. Para cerrar la página principal, seleccione el botón Cerrar (que se muestra como una X en la interfaz).

    Cada página abierta en el Editor incluye un botón Cerrar (X) situado a la derecha del título de página. La pestaña Página principal se muestra en la parte superior izquierda de la ventana de Visual Studio Code, debajo del menú principal. Si mantiene el puntero del mouse sobre la X, aparece la palabra Cerrar .

Examinar la barra de actividad y la barra lateral

  1. Observe que la barra lateral situada a la derecha de la barra de actividad está contraída.

    Es posible que recuerde que la barra de actividad es la lista vertical de iconos en el extremo izquierdo de la ventana de Visual Studio Code. El contenido de la barra lateral depende de lo que está seleccionado actualmente en la barra actividad.

  2. Coloque el puntero del mouse sobre la barra actividad y, a continuación, mantenga el puntero del mouse sobre cada uno de los iconos para mostrar las etiquetas.

    Aparece una etiqueta al mantener el puntero sobre los iconos. Debería ver los botones de la barra de actividad que se muestran en la imagen siguiente:

    Captura de pantalla que muestra la barra de actividad de Visual Studio Code con iconos etiquetados.

    De arriba a abajo, los iconos de la barra de actividad son: Explorador, Búsqueda, Control de código fuente, Ejecución y Depuración, Extensiones, Cuentas y Administrar.

  3. En la barra actividad, seleccione Explorador.

    La barra lateral debe abrir y mostrar información contextual.

  4. Observe que la barra lateral ahora tiene la etiqueta EXPLORER.

    La vista EXPLORER se usa para acceder o explorar carpetas de proyecto y archivos de código.

    Visual Studio Code recordará el historial de trabajo y abrirá los archivos de proyecto más recientes cuando se abra. Puesto que esta es la primera vez que ha abierto Visual Studio Code, no se abre ninguna carpeta del proyecto.

  5. En la barra de actividad, seleccione extensiones.

  6. Observe que la barra lateral ahora está etiquetada como EXTENSIONS.

  7. Dedique un momento a examinar la información mostrada en la vista EXTENSIONES .

    Las extensiones de Visual Studio Code permiten agregar lenguajes de codificación, depuradores y otras herramientas al entorno para admitir el flujo de trabajo de desarrollo. Va a instalar una extensión de C# más adelante en este módulo.

  8. En la barra Actividad, para cerrar la barra lateral EXTENSIONES , seleccione Extensiones.

Examinar las opciones del menú superior

  1. Para ver las opciones de menú Archivo, seleccione Archivo.

  2. Observe las opciones Nuevo, Abrir, Guardar y Cerrar que aparecen en el menú Archivo .

  3. Dedique un minuto a examinar las opciones del menú Editar y, a continuación, cada uno de los demás elementos de menú de nivel superior.

  4. Observe que varios de los menús incluyen opciones para interactuar con el código.

    Por ejemplo:

    • El menú Editar incluye opciones para buscar, reemplazar y alternar comentarios de código, así como el corte estándar, copiar, pegar, deshacer y rehacer.
    • El menú Selección incluye opciones para seleccionar y manipular líneas de código.
    • El menú Ejecutar incluye opciones para ejecutar y depurar la aplicación.
  5. En el menú Terminal, seleccione Nuevo terminal.

  6. Dedique un momento a examinar el contenido del panel Terminal.

    Puede cambiar entre las pestañas (PROBLEMAS, SALIDA, CONSOLA DE DEPURACIÓN y TERMINAL) y mantener el puntero del mouse sobre los botones (superior derecha) para mostrar las etiquetas del botón.

  7. Observe que el panel Terminal incluye un símbolo del sistema.

    El panel Terminal se puede usar para ejecutar comandos de la interfaz de línea de comandos (CLI). Usará comandos de la CLI de .NET más adelante en este módulo.

  8. En la esquina superior derecha del panel Terminal, seleccione X (Cerrar panel).

  9. En el menú Ver, seleccione Paleta de comandos.

    La paleta de comandos se puede usar para buscar y ejecutar todo tipo de comandos útiles. No tiene el tiempo (o la necesidad) para examinarlos en detalle ahora, pero es bueno saber dónde encontrar la paleta de comandos.

  10. En el símbolo de la paleta de comandos, escriba extensiones.

    Observe que la lista de comandos se filtra en función de la entrada.

  11. Para actualizar la lista filtrada de comandos, cambie las extensiones para ayudar

  12. En la lista de opciones de comando, seleccione Ayuda: Área de juegos del editor interactivo.

    El documento Editor Playground que se abre en el Editor incluye una lista de actividades interactivas.

  13. En la lista con viñetas de actividades interactivas, seleccione Formato.

  14. Dedique un minuto a leer las opciones de formato.

    Usará comandos de formato de código durante las actividades a medida que obtenga más información sobre la programación de C#.

  15. Cierre el documento Editor Playground.

Esto completa el recorrido por la interfaz de usuario de Visual Studio Code. Una vez que empiece a codificar, los materiales de entrenamiento siguen apuntando formas en que Visual Studio Code puede ayudar a aumentar la productividad.