Code Snippets in Expression Web

One of the features I really appreciate in Expression Web is Code Snippets. When you want to quickly insert code that you often use, you can create a code snippet for that code. You can also modify or delete the code snippets that you've created or the code snippets that are provided by the program.

NOTE: In Expression Web 1.0, 2.0, 3.0 and 4.0, you can access Code Snippets from Tools > Page Editor Options > Code Snippets.

With the release of Service Pack 2 (SP2) for Expression Web 4, Code Snippets is no longer available through the Tools menu. To access Code Snippets in EW4 SP2, us the Panels menu > Snippets.

With any of the versions, Ctrl + Enter will bring up Code Snippets.

Expression Web 1.0, 2.0, 3.0 or 4.0

Screenshot Page Editor Options > Code Snippets Tab.
Fig 1: Page Editor Options > Code Snippets Tab
EW 1,0, 2.0, 3.0 or 4.0

To create or modify a code snippet

  • On the Tools menu > Page Editor Options > Code Snippets Tab
    • Click Add to create a code snippet
    • To Modify a code snippet > highlight the code snippet > Click Modify
  • In the Add Code Snippet or Modify Code Snippet dialog box, do the following:
    Use this To do this
    Keyword Type a unique word for the code snippet which you can subsequently type to select the code snippet in the list of code snippets.
    Description Type a description to identify the code snippet.
    Text Type the code that will be inserted when you select the code snippet.

To Delete a Code Snippet

  • On the Tools menu > Page Editor Options > Code Snippets Tab
  • Highlight the code snippet you want to delete > Click Remove

To Insert a Code Snippet

  • With your web page open in Code View > Place your cursor where you want to insert the code snippet and do one of the following:
    • Press CTRL + ENTER
    • On the Edit Menu > Intellisense > List Code Snippets (This choice will be grayed out unless you are in Code View)
    • One the Code View Toolbar > Click the List Code Snippets icon (4th from left)
  • In the list of code snippets, do one of the following:
    • Select the code snippet you want to insert > press ENTER or TAB to insert it.
    • Double-click the code snippet you want to insert.
    • Type the keyword for the code snippet, and then press ENTER or TAB to insert it.

Expression Web 4 SP2 Code Snippets

With the release of SP2 for Expression Web, you will have a much easier way to use your code snippets. Instead of using  CTRL + ENTER to open the snippets dialog, SP2 now uses a 'Snippets panel'. CTRL + ENTER will open the snippets panel. You can have it floating or dock it wherever you want. I have mine docked along the right side of my workspace along with the toolbox panel for easy access.

Screenshot of the Code Snippets Panel.
Fig 2 - Code Snippets Panel - Click for full image.

If you had any of your own custom snippets in version 4, they will be imported into the new snippets panel in a Legacy group.

Each of the snippets comes with a brief description of what it does. You can only insert code snippets from Code View. They do NOT work in Design View. The Preview window will show you some or all of the snippet being inserted.

Screenshot Code snippets Panel.
Fig 3: - Code Snippets Preview

The Options tab dropdown allows you to work with the Snippets. You can use the Filter box to filter out snippets.

Screenshot Snippets Options.
Fig 4: - Code Snippets options

You can add or modify any of the snippets by selecting the New Snippet or Edit Snippet option. The New/Modify Code Snippet dialog box appears. Insert/replace is selected by default.

To create or modify a code snippet

  1. On the Panels menu, click Snippets.
  2. In the Snippets panel, do one of the following:
    1. To create a code snippet, click Options and then click New Snippet.
    2. To modify a code snippet, click the code snippet you want to edit, and then click Modify.
  3. In the New/Modify Code Snippet dialog box, do the following:
    Screenshot COde Snippet dialog box.
    Fig 5:  - New/Modify Code Snippets dialog
    Click thumbnail for larger image.


    Use this To do this
    Name Type a unique name for the code snippet that you can subsequently type to select the code snippet in the list of code snippets.
    Description Type a description to identify the code snippet.
    Type Choose how the snippet will be added to the code:
    - Select Insert/replace for a snippet that will be inserted at the cursor, replacing any selected text.
    - Select Wrap for a snippet that will be inserted around the selected text, leaving the selected text intact.
    Text Type the code that will be inserted when you select the code snippet. If your code snippet contains text that must be updated, place "pipe" (|) characters before and after the text to be replaced. In the Code view, that text is highlighted.
    Code before Type the code that will be inserted before the selected text.
    Code after Type the code that will be inserted at the end of the selected text.

To insert a code snippet

In Code view, place your cursor where you want to insert the code snippet, and then on the Snippets panel, right-click the snippet you want to add and then click Apply Snippet.

To wrap a selection in a code snippet

The Wrap option to the right of the Insert/replace option will wrap the selected text with the snippet.

Screenshot Code Snippet Wrap option.
Fig 6: - Snippets Wrap option.
Click thumbnail for a larger image.

The snippet above wraps the code you select with an HTML5 Microdata 'street-address' item property.

<span itemprop="street-address">1183 Nelson Dr.</span>

To delete a code snippet

  1. On the Panels menu, click Snippets.
  2. In the Snippets panel, select the snippet to be deleted.
  3. Click Options and then click Delete.

To manage code snippets

You can organize snippets by folder inside the Snippets panel.

  1. On the Panels menu, click Snippets.
  2. To add a new folder, click Options and then click New Folder. To delete a folder, select the folder you want to delete, click Options, and then click Delete.
  3. Drag and drop individual snippets to organize them according to your needs.

Code Snippets You Might Find Useful

If you have ever had to reinstall Expression Web and lost your code snippets, you can get them back or move them from one version of EW to another version. Read How - Code Snippets in Expression Web.

 
Updated & Revised: August 2011