Archivo de la categoria 'Javascript'

Validando código Javascript con "Javascript Lint"

Posteado por jpgarcia on Marzo 18, 2007 en Gadgets, Javascript, Visual Studio 2005

Desarrollando un Gadget para Windows Vista, Resultados de Fútbol, para participar en el concurso de Gadgetizate! he tenido que programar mucho con Javascript.

Como todos saben una de las cosas más molestas es que en los entornos de desarrollo normales no tenemos la posibilidad de verificar la sintaxis de nuestro código js. Esto nos hace perder muchísimo tiempo, ya que a veces por un simple error, podemos estar un rato hasta descubrir que es realmente hace que nuestra aplicación no funcione como lo deseamos.

Más aún si lo que estamos desarrollando es un Gadget, ya que al ejecutarlo, ni siquiera nos indica si ha habido un error o no, como suele hacerlo nuestro explorador. Además tampoco podemos debugear nuestro gadget en el explorador completamente porque al utilizar las librerías propias de Gadgets el explorador no las reconocerá.

Para evitarnos todo esto, existe una herramienta llamada Javascript Lint que nos hace la vida mucho más fácil.

Esta herramienta basada en el motor de Javascript del explorador Firefox, nos provee de un Framework robusto que no solo se encargará de chequear la sintaxis de nuestro código, sino que además examinará nuestras técnicas de codificación y nos alertará sobre prácticas que él considere cuestionables.

Tenemos tres formas de utilizarla:

  • Integrándola en nuestro entorno de desarrollo ( I love it! )
  • Integrarla en Internet Explorer
  • Ejecutarla desde línea de comandos

A continuación voy a explicar cómo podemos integrarla en nuestro VS 2005, que es el entorno que yo estoy utilizando.

  1. Descargar la última versión desde y extraer los ficheros a una carpeta, por ejemplo “c:\Program Files\Javascript Lint”
  2. Abrir nuestro VS2005 > Menu Tools > External Tools
  3. Añadir y configurar como muestro en la imagen

Para hacer funcionar la herramienta unicamente hay que ir al menu  Tools, y si la hemos añadido en el paso previo nos encontraremos con un nuevo Item de “Javascript Lint”.

Vamos a probarla con un ejemplo, para eso voy a crear una nueva página HTML (aunque podría ser un archivo include con funciones, un aspx…) y voy a generar entre medio del código de la pagina una serie de lineas de Javascript con un error para que vean como funciona.

Ahora, Tools > Javascript Lint y como podemos observar en el Output del VS obtendremos lo siguiente:

Interesante no?, además, si tenemos archivos de include de tipo js en nuestro html, también los analizará.

Espero que les sea útil como a mí.