RSS feed
Intellisense para a jQuery no VS 2008 - ScottGu's Blog em Português

Intellisense para a jQuery no VS 2008

Mês passado eu postei sobre como a Microsoft está estendendo o suporte à jQuery. Nas últimas semanas nós temos trabalhado com o time da jQuery para adicionar um ótimo suporte ao intellisense da jQuery dentro do Visual Studio 2008 e Visual Web Developer 2008 Express (o qual é gratuito). O suporte agora está disponível para download e uso.

Passos para habilitar o intellisense para a jQuery no VS 2008

Para habilitar o intellisense para a jQuery dentro do VS você deverá seguir três passos:

Passo 1: Instale o VS 2008 SP1

O VS 2008 SP1 adiciona recursos mais ricos para o suporte a intellisense de JavaScript no Visual Studio, e adiciona o suporte para auto-completar código para uma ampla gama de bibliotecas JavaScript.

Você pode fazer o download do VS 2008 SP1 e do Visual Web Developer 2008 Express SP1 aqui.

Passo 2: Instale o Patch KB958502 do VS para suportar os arquivos IntelliSense "-vsdoc.js"

Há duas semanas atrás nós lançamos um patch que você pode aplicar no VS 2008 SP1 e VSWD 2008 Express SP1 que faz com que o Visual Studio verifique a presença de um arquivo "-vsdoc.js" opcional quando uma biblioteca JavaScript é referenciada, e se presente usa-o para gerenciar o motor da IntelliSense para JavaScript.

Estes arquivos "-vsdoc.js" anotados podem incluir comentários XML que fornecem a documentação de help para métodos JavaScript, como também dicas adicionais de código baseadas no intellisense para assinaturas JavaScript dinâmicas que não podem ser automaticamente inferidas. Você pode aprender mais sobre este patch aqui. Você pode fazer o download do patch gratuitamente aqui.

Passo 3: Faça o download do arquivo jQuery-vsdoc.js

Nós trabalhamos com o time da jQuery para criar um arquivo jQuery-vsdoc.js que fornece os comentários de ajuda e suporte para o intellisense JavaScript em métodos de seleção encadeados da jQuery. Você pode fazer o download da jQuery e do arquivo jQuery-vsdoc a partir da página oficial de download no site da jQuery:

 

Salve o arquivo jquery-vsdoc.js junto ao arquivo jquery.js no seu projeto (e tenha certeza que o prefixo do nome está de acordo com o nome do arquivo da jquery):

 Você pode então referenciar o arquivo padrão da jquery com um elemento html <script/> como a seguir:

Alternativamente você pode referenciar o arquivo usando um controle <asp:scriptmanager/>, ou adicionar um comentário /// <reference/> na parte superior de um arquivo .js standalone.

Quando você faz isso o VS irá procurar por um arquivo -vsdoc.js presente no mesmo diretório do arquivo de script que você está referenciando, e se encontrado irá usá-lo para a ajuda e intellisense.

Por exemplo, nós poderíamos usar jQuery para fazer uma requisição get baseada em JSON, e automaticamente visualizar intellisense para o método (a partir de um $.):

 

Como também obter intellisense para os parâmetros do método $.getJSON():

O IntelliSense continuará a trabalhar se você encadear uma função de callback dentro da chamada de um método. Por exemplo, nós poderíamos iterar sobre cada objeto JSON retornado a partir do servidor:

Para cada um dos itens nós poderíamos executar uma função de callback aninhada:

Nós poderíamos usar cada função de callback para dinamicamente adicionar uma imagem em uma lista (o atributo src da imagem irá apontar para a URL do arquivo de imagem retornado no JSON):



Em cada imagem criada dinamicamente nós poderíamos ligar um tratador de evento de forma que quando a imagem for clicada esta desapareça através de uma animação:

Perceba como o intellisense da jQuery funciona de uma maneira limpa em cada nível de nosso código.

Dicas e macetes para o intellisense de JavaScript

Jeff King do time da Web Tools escreveu um ótimo post nesta semana que responde várias perguntas rotineiras sobre como o intellisense de JavaScript funciona no VS 2008. Eu recomendo a leitura.

Um macete que ele mostra o qual irei reforçar aqui é uma técnica que você pode empregar quando você quer ter o intellisense JavaScript funcionando dentro de user-controls/partials (controles do usuário / parciais) - arquivos .ascx. Geralmente você não quer incluir uma referência a uma biblioteca JavaScript <script src=""/> dentro destes arquivos, e ao invés disso você quer que a referência exista em uma master page ou na página de conteúdo na qual o controle é usado. O problema que ocorre quando você faz isso é que por padrão o VS não tem como saber que este script está disponível dentro de um contre do usuário - e assim não conseguirá prover intellisense para você.

Uma maneira de contornar este problema é adicionar o elemento <script src=""/> no controle do usuário, cercando-o com um bloco <% if %> que sempre retornará falso no tempo de execução:

No tempo de execução a ASP.NET nunca renderizará a tag script (porque a mesma está dentro de um bloco if que é sempre falso). De qualquer modo, o VS irá avaliar a tag <script/> e prover intellisense para a mesma dentro do controle do usuário. Esta é uma técnica útil para usar em cenários iguais a este do controle do usuário. Jeff tem também mais detalhes no seu post FAQ como também em seu post original sobre intellisense para a jQuery. Rick Strahl também tem um bom post sobre o usuo de intellisense com jQuery aqui.

Mais Informações

Para aprender mais sobre jQuery, eu recomendo que você assista a palestra de Stephen Walther dada na PDC intitulada ASP.NET e jQuery. Clique aqui para fazer o download dos códigos de exemplos e da apresentação powerpoint.

Rick Strahl também tem um ótimo artigo intitulado Introdução à jQuery que versa sobre como usar jQuery com ASP.NET. Karl Seguin tem dois bons posts sobre jQuery aqui e aqui os quais provêem pequenas introduções sobre o básico de como usar jQuery.

Eu recomendo o livro jQuery em Ação.

Espero que ajude,

Scott

(Texto traduzido do post original por Leniel Macaferi.)

Published Friday, November 21, 2008 4:07 AM by Leniel Macaferi

Comments

# re: Intellisense para a jQuery no VS 2008

Wednesday, December 17, 2008 4:12 PM by Paulo Dias

Muito interessante !! Instalando pra ver