For code snippets to appear in your code editor, they must be installed on your computer and imported into Visual Studio by using the Code Snippet Manager. To make this process as easy as possible, we’ve provided the jQuerySnippets.msi. 

 

Quick Installation

Download jQuerySnippets.zip file, extract the contents and run the jQuerySnippets.msi. The installer will copy the snippet files into your Visual Studio document folders and configure the Visual Studio shortcut mappings for you.

 

Viewing the Snippets

After installation, you will find the .snippet files in their respective My HTML Snippets and My Jscript Snippets folders. These folders may be found at the following sample path: C:\Users\[User]\Documents\Visual Studio 2010\Code Snippets\Visual Web Developer.

  

You may also view the jQuery code snippets via the Code Snippets Manager which is available via the Visual Studio Tools menu (Ctrl+K, Ctrl+B.)

  

The snippets are categorized by language. View the snippets by selecting HTML or JScript in the Language dropdown.

The complete list of jQuery Code Snippets, their types and shortcuts is being maintained here


Using the Snippets

You can insert IntelliSense Code Snippets using the Insert Code Snippet Menu or by typing the shortcut name of the snippet and pressing Tab. We’ve provided a basic walkthrough here. If you’re interested in learning more, MSDN offers a number of tutorials on creating, using and publishing code snippets for Visual Studio 2010.

How to Use Code Snippets via Snippet Shortcuts

  1. In the Code Editor, put the cursor where you want to insert the code snippet.
     
  2. Select the shortcut in one of two ways: 

    1. Type the shortcut for the code snippet that you want to add to your code.
    2. Type the first few letters of the shortcut and then press either CTRL+SPACE (C#) or a question mark followed by the TAB key (VB) to view the completion list, and then select the snippet shortcut from the list.
  3. Press the TAB key once for Visual Basic or twice for C Sharp to invoke the code snippet. 


How to Use Code Snippets via Insert Code Snippet Menu

  1. In the Code Editor, put the cursor where you want to insert the code snippet.
  2. Launch the Insert Code Snippet menu in one of three ways:

    1. Press CTRL+K, CTRL+X.
    2. On the Edit menu, point to IntelliSense, and then click Insert Snippet.
    3. Right-click the mouse and then select the Insert Snippet command on the shortcut menu.
  3. Select the code snippet from the code snippet inserter and then press TAB or ENTER, or double-click the snippet.

Using the Snippets with ReSharper

ReSharper offers its own snippets library which sometimes overrides the Visual Studio IntelliSense features. In order to take full advantage of the built-in Visual Studio templates, you may need to modify the default ReSharper options.

If the jQuery Code Snippets aren’t being displayed in your Visual Studio IntelliSense listing visit Tools > Options > ReSharper > General and toggle your selection to match the following:


Note: If you wish to maintain the ReSharper default option, you may still use the jQuery Snippets but you won’t have the luxury of using IntelliSense as a guide.

Last edited Aug 2, 2010 at 11:56 PM by BenGriswold, version 5

Comments

No comments yet.