Mejoas del intellisense de JavaScript en VS 2010

Éste es el vigésimo post de una serie sobre VS 2010 y .NET 4.
En este post veremos algunas de la mejoras que vienen en VS 2010 sobre el Intellisense de JavaScript y en Visual Web Developer 2010 Express. Veremos que el intellisense se carga mucho más rápido en VS 2010 en archivos de script grandes y con muchas librerías, y que ahora soporta el autocompletado en escenarios más avanzados que en versiones anteriores de Visual Studio.
[Además del blog podéis seguir a Scott en Twitter: twitter.com/scottgu]
Mejorado el intellisense de JavaScript
Ofrecer intellisense para un lenguaje dinámico como JavaScript es mucho más complicado que para un lenguaje estático como C#. Inferir correctamente la forma y estructura de variables, métodos, etc, es mucho más imposible sin una pseudo-ejecución del código actual - desde que JavaScript es un lenguaje lo suficientemente flexible como para modificar dinámicamente y cambiar este tipo de cosas en ejecución.
El editor de JavaScript de VS 2010 ahora tiene la inteligencia de realizar esta pseudo-ejecución a medida que escribimos - que es como se consigue el autocompletado. Aquí tenéis un pequeño tutorial que muestra lo rico y flexible que es en la versión final.
Escenario 1: Inferencia básica de tipos
Cuando declaramos una variable en JavaScript no tenemos que declarar su tipo. En lugar de eso, el tipo de la variable se basa en el valor que se le asigna. Como VS 2010 pseudo-ejecuta el código del editor, puede inferir dinámicamente el tipo de una variable, y ofrecer un intellisense adecuado basándose en el valor que se le asigna.
Por ejemplo, fijáos cómo VS 2010 ofrece el intellisense de un string (como ya le hemos asignado un string a la variable foo):

Si asignamos luego un valor numérico a la variable "foo" el intellisense que se ofrece cambia para ofrecer el intellisense de un número:

Escenario 2: Intellisense cuando manipulamos objetos del navegador.
Es muy común con JavaScript manipular el DOM de una página, así como trabajar contra objetos del navegador disponible en el cliente.
Versiones anteriores de Visual Studio ofrecían intellisense para objetos de navegador estándar - pero no servía de mucha ayuda en escenarios más avanzados (como crear variables dinámicas y métodos). La pseudo-ejecución de VS 2010 nos permite ofrecer un intellisense mucho más rico para un montón de escenarios.
Por ejemplo, aquí estamos usando el objeto windows del navegador para crear una variable global llamada "bar". Fijáos que ahora tenemos intellisense (con la inferencia correcta de tipos) cuando más tarde usemos esa variable:

Cuando asignamos a la variable "bar" un número, en lugar de un string, VS 2010 ofrece el intellisense apropieado:

Escenario 3: Ocultando cosas
Como el editor VS 2010 pseudo-ejecuta el código, es capaz de ayudarnos en un montón de escenarios (tanto prácticos como excéntricos) - y es capaz de ofrecer inferencia de tipos e intellisense adecuados.
Por ejemplo, aquí estamos usando un buquel y el objeto del navegador window para crear dinámicamente y nombrar varias variables dinámicas (bar1, bar2, bar3 ... bar9).
Fijáos cómo el motor del intellisense identifica y ofrece el autocompletado:

Como las variables se a;aden a trav'es del objeto window del navegador son también variables globales - y también se muestran en el drop-down del intellisense de variables globales:

Mejor aún - la inferencia de tipos está totalmente soportada. Así que si asignamos un string a una variable tendremos el tipo string inferido. Si asignamos un número tendremos el intellisense para ello.
Sólo por diversión (y para verlo) vamos a ajustar el bucle para que asigne un string a las variables pares y un número para las impares:

Fijáos cómo obtenemos el intellisense para la variable "bar2".
Y ahora fijaos cómo lo muestra para la variable "bar1":

No es sólo un truco ...
Mientras que en el ejemplo anterior es un poco raro, la aproximación de crear variables, métodos y manejadores de eventos dinámicamente es muy común en librerías de javaScript. Muchas de la librerías más populares usan estas técnicas para mantener el tamaño de las librerías lo más reducido posible. El soporte de VS 2010 de parsear y pseudo-ejecutar las librerías que usan estas técnicas asegura que tendrás un mejor intellisense cuando programes con ellas.
Resúmen
Visual Studio 2010 (y Visual Web Developer 2010 Express) ofrecen un intellisense para javaScript muy mejorado. Este soporte funciona muy bien con las librerías de JavaScript. Debería ayudarte a tener una experiencia de desarrollo mucho mejor cuando escribimos JavaScript y habilitamos AJAX en nuestras aplicaciones ASP.NET.
Espero que sirva,
Scott.
P/D: Podéis leer el post anterior sobre el intellisense de JavaScript de VS 2008 para aprender cómo funcionaba anteriormente (y algunos de los escenarios que soporta). VS 2010 obviamente soporta todos esos escenarios que ya soportaba VS 2008.
Traducido por: Juan María Laó Ramos.
Artículo original.

3 pensamientos en “Mejoas del intellisense de JavaScript en VS 2010

  1. Pingback: Serie sobre VS 2010 y .NET 4.0 « Thinking in .NET

  2. Pingback: Selección Box y edición Multilinea con VS 2010 « Thinking in .NET

Deja un comentario