Intellisense de JQuery en Visual Studio

2. October 2011 12:10 by Oscar.SS in Desarrollo Web, Herramientas  //  Tags: ,   //   Comments (2)

Con la llegada de JQuery a Visual Studio también llegó un archivo con la extensión vsdoc.js con toda la documentación necesaria para disfrutar de intellisense al escribir nuestro código cliente. Es algo muy sencillo, pero a veces estas cosas se pasan por alto.

 

Intellisense en páginas HTML

Si nos vemos en la obligación de escribir bloques de script en las propias páginas HTML, para disfrutar del intellisense de JQuery bastará con añadir una referencia al archivo de documentación con la extensión "vsdoc.js".

Como podemos apreciar en la imagen, al añadir la referencia al archivo mencionado, tenemos a nuestra disposición información sobre la función JQuery representada por el símbolo $.

Es importante mencionar dos aspectos. En primer lugar, cuando trabajemos en un proyecto ASP.NET MVC podemos vernos tentados de utilizar la siguiente sentencia.

<script src="@Url.Content("~/Scripts/jquery-1.5.1-vsdoc.js")" type="text/javascript"></script>

 Pero esto no funcionará dado que la referencia al archivo se realizará en tiempo de ejecución al tratarse de código de servidor.

Por otra parte es necesario mencionar que cuando despleguemos nuestra aplicación en producción debemos sustituir las referencias a los archivos de documentación por los archivos tradicionales, o incluso mejor aún, por las referencias a los archivos con la denominación "min.js".

 

Actualización 03/10/2010

Hablando esta mañana con mi compañero Omar Del Valle sobre este sencillo post, me comenta un pequeño truco que me ha parecido curioso e interesante para incluir aquí. Fijaros en la imagen siguiente.

En efecto, tenemos la referencia al archivo con la extensión "min.js" que como sabesmos es la que debería publicarse en el servidor de producción ya que al estar minimizada el tráfico de red generado es menor, tarda menos en cargar el script, etc.

Pero también tenemos una referencia, dentro de un if de servidor, al archivo de documentación "vsdoc.js". ¿Que conseguimos con esto?.

Por una parte, como se aprecia en la imagen, Visual Studio entiende la referencia al archivo de documentación y nos permite tener intellisense de JQuery. Y por otra parte, a la hora de publicar nuestra aplicación en producción, si se nos olvida eliminar en alguna página las referencias al archivo de documentación, gracias  al if(false), están nunca serán incrustadas en el HTML de vuelta al cliente.

Es necesario aclarar, que igualmente habría que eliminar esta linea de código al subir a producción, dado que el compilador tiene un pequeño trabajo extra, pero es cierto que en caso de olvido es un mal menor.

Por cierto, este truco también funciona con las páginas Web Forms y las etiquetas <%= %>.

 

Intellisense en archivos JS

Si nuestro archivo se encuentra en el mismo directorio que el archivo de documentación vsdoc.js, automáticamente tendremos a nuestra disposición las bondades del intellisense. Esto es así porque Visual Studio por defecto, ya sea una aplicación Web Form o MVC, buscará en la carpeta ~/Scripts el archivo de documentación y si lo encuentra creará por nosotros la referencia en nuestro archivo JS.

En el caso de que nuestro archivo JS se encuentre en otro directorio o anidado dentro de ~/Scripts, por ejemplo Scripts/Login/miArchivo.js, debemos crear nosotros la referencia de la siguiente forma.

/// <reference path="../jquery-1.5.1-vsdoc.js" />

Colocando esta linea de código al principio de nuestro archivo JS tendremos el intellisense disponible.

 

Intellisense en nuestras propias funciones

También podemos documentar nuestras funciones al igual que lo hacemos en nuestro código de servidor C#, VB o cualquier otro. Mirar el siguiente código.

Mencionar que las etiquetas summary, param y returns deben estar colocadas dentro del cuerpo del la función.

¡Espero que sea útil!

Comments (2) -

Fernando
Fernando
6/14/2012 4:02:05 PM #

Excelente hermano, me ayudo mucho esta info.

Oscar.SS
Oscar.SS
6/15/2012 3:25:23 AM #

Gracias Fernando por comentar!!

Recent Comments

Comment RSS

Month List