005 Desarrollo
005.1 Desarrollo

Uso de VS Code para el desarrollo de Dart

Has creado y ejecutado un proyecto desde la línea de comandos, pero también puedes hacer lo mismo desde VS Code. Esta sección te guiará en el proceso.

Instalación de la extensión Dart

Abra Visual Studio Code y, a la izquierda, verá una barra de herramientas vertical llamada Activity Bar. Haga clic en el icono Extensions, que tiene cuatro cuadros. Escriba dart en el área de búsqueda. Cuando aparezca la extensión Dart, haga clic en el botón Install para instalarla.

Ahora tu instalación de VS Code es compatible con Dart. A continuación, aprenderás a crear un proyecto de Dart en VS Code.

Creación de un nuevo proyecto de Dart

La extensión Dart en VS Code facilita la creación de un nuevo proyecto Dart. Para ver cómo funciona, recreará el mismo proyecto que creó previamente desde la línea de comandos.

Para comenzar, elimine su antigua carpeta hello_dart y su contenido.

Puedes crear un nuevo proyecto desde la Paleta de Comandos. Para acceder a ella, ve a Ver > Paleta de Comandos… en el menú o pulsa el atajo Comando+Mayús+P en Mac o Control+Mayús+P en PC.

Empieza a escribir dart para filtrar la lista de comandos. Luego, selecciona Dart: Nuevo proyecto.

A continuación, seleccione Console Application de la lista.

Elija una ubicación para guardar la carpeta del proyecto que creará VS Code y nombre el proyecto hello_dart.

Si ve un cuadro de diálogo que le pregunta si desea utilizar la configuración de VS Code recomendada para Dart y Flutter, elija .

Simplificando el proyecto

El código generado es excelente para mostrar cómo funciona Dart, pero este libro empezará de forma aún más sencilla. Eso significa que puedes eliminar algunas cosas.

Reemplace el código en bin/hello_dart.dart con las siguientes tres líneas:

void main() {
    print('Hello, Dart!');
}

Luego, elimina las carpetas lib y test. Encontrarás una opción para eliminarlas si haces clic derecho en los nombres de las carpetas.

Estas carpetas cumplen funciones importantes, pero no son necesarias cuando recién estás empezando.

Ejecutando Dart en VS Code

Para ejecutar el código, asegúrese de tener abierto el archivo bin/hello_dart.dart. Luego, haga clic en la palabra Run que aparece justo encima de la función main.

Verás ¡Hola, Dart! aparecer en la consola de depuración.

Explorando la UI de VS Code

Esta es una buena oportunidad para explorar las distintas partes de la interfaz de usuario de Visual Studio Code.

Los números que aparecen a continuación corresponden a las distintas partes del IDE:

  1. Activity Bar: Elija qué contenido mostrar en la barra lateral.

  2. Side Bar: El explorador muestra el proyecto y el archivo actuales.

  3. Editor: Escribe tu código Dart aquí.

  4. Panels: Mostrar la salida del programa, ejecutar comandos de terminal y más.

  5. Status Bar: Mostrar información sobre el proyecto actual.

Más formas de ejecutar su proyecto

Ejecutaste tu proyecto anteriormente presionando la etiqueta Ejecutar sobre la función main. Aquí tienes más maneras de ejecutar tu proyecto:

  1. Seleccione Ejecutar > Iniciar depuración en el menú.
  2. Presione F5.
  3. Haga clic en el Start Debugging button en la esquina superior derecha.
  4. Todos hacen lo mismo. Esta vez, usa F5 para ejecutar el programa y verás que aparece de nuevo Hola, Dart! en la consola de depuración.

¡Excelente! Ya estás listo para explorar Dart con más detalle en el resto del libro.