Anuncio: Herramientas IDE para AngularDart 5

Dart es un lenguaje de tipado estático que conocemos y amamos, y Dart 2 será aún más estrictamente tipado. Es por eso que es una plataforma tan genial para el framework Angular, donde los componentes se enlazan mayormente de forma estática en plantillas para crear UIs performantes.

Así que, para mejorar aún más esta experiencia de desarrollo productiva y segura, ¡estamos anunciando nuevas herramientas para el IDE que preservan esa seguridad de tipos dentro de tus plantillas! Soporta AngularDart 5, y funciona listos para usar con IntelliJ/WebStorm. También puede configurarse para funcionar en VSCode, vim y más.

Puedes saltar directamente a la configuración ahora si ya estás convencido, ¡o síguenos para un tour de lo que nuestra nueva integración con el IDE te ofrece!

El nuevo plugin de análisis encontrará muchos errores de tipo dentro de tus plantillas por ti. Las expresiones se validan contra las directivas que usas, los inputs que contienen, y las referencias que vinculas (#foo, let item of, …).

Aquí hay un miembro mal escrito, ¡para que no tengas que ser el corrector ortográfico humano!

Y los tipos no coincidentes en un input de componente ya no son un problema tampoco.

También podemos darte errores relacionados con los tipos de la variable $event,

Y verificamos el contenido que transcludes dentro de tus directivas. Este es un ejemplo de donde detectamos no solo errores de tipo sino también código muerto.

¡Y podríamos seguir! Detectamos una gran cantidad de otros tipos de errores, tanto en las plantillas como en las definiciones de componentes.

Además de destacarse en tu editor, el listado completo de errores se muestra en el panel de Dart Analysis.

¡No nos detuvimos en la validación! Aunque gran parte del trabajo fue lograr que nuestro análisis fuera performante y se comportara bien respecto al compilador, gran parte del valor viene de usar ese estado de plantilla resuelto para brindarte la bondad del autocompletado regular de Dart en tus plantillas:

¡Pero podemos completar más que miembros regulares de Dart — qué tal inputs, outputs y tags HTML?

¿Tags? Listo.

¿Atributos? Listo.

¿Stars? Listo.

¿Atributos dentro de stars? Listo.

Puntos extra: ¡Tags sugeridos con atributos dentro de las transclusions de componentes!

Las transclusions son un tema notoriamente avanzado dentro de angular, así que si crees saber qué exactamente es lo que estamos sugiriendo, felicítate por conocer AngularDart muy bien.

Baste decir que, las APIs de componentes son mucho más fáciles de seguir cuando usas nuestro plugin.

El soporte aquí varía mucho más según el editor, pero dentro de IntelliJ puedes hacer clic a través de partes de expresiones de Dart. En otros editores puede que puedas navegar en aún más entidades como tags e inputs/outputs.

Asegúrate de estar usando un beta release de AngularDart 5, y Dart 2.0.0-dev.31 o superior.

Simplemente añade esto a tu archivo analysis_options.yaml:

analyzer:
  plugins:
    - angular

Y reinicia tu IDE. Ten en cuenta que puede tomar unos segundos iniciar el plugin. Primero tendrá que descargar fuentes y dependencias para ti, y el primer análisis será más lento que los subsiguientes.

También puedes probarlo en nuestro proyecto demo del plugin del analyzer.

Si usas IntelliJ, esto debería ser todo lo que tienes que hacer. Para otros editores, puede que no ejecuten nuestro plugin en HTML sin trabajo adicional — por ejemplo, VSCode requiere un flag.

El código fuente de nuestros plugins vive en Github, que tiene más información sobre lo que está soportado y dónde puedes reportar issues si tienes preguntas o encuentras algún bug.

Las nuevas herramientas para el IDE serán parte del próximo release estable de AngularDart (v5). ¡Estamos muy emocionados de ofrecerte una productividad aún mejor mientras escribes tus apps web con Angular!