In my earlier article Insert Code Snippets in Microsoft Expression Web 3, we saw how to use the built-in code snippets and create your own snippets to make your coding speedier. But the custom code snippets that you created in earlier version of Expression Web (EW 2) are not accessible in EW 3. A simple solution to this is to import the code snippet xml file to your EW 3 and use it.

The built-in code snippets are found in these locations:

In Expression Web 2

C:\Program Files\Microsoft Expression\Web 2\Templates\1033\Snippets12\FPSnippets.xml

In Expression Web 3

C:\Program Files\Microsoft Expression\Web 3\en\Snippets\snippets.xml

Any custom code snippets you add are stored into your roaming profile. In Expression Web 2, they were stored at:

C:\Users\User Name\AppData\Roaming\Microsoft\Expression\Web 2\Snippets\SnippetsCustom.xml

In Expression Web 3, they are located at:

Windows Vista

C:\Users\ User Name\AppData\Roaming\Microsoft\Expression\Web 3\Legacy\Expression\Web 3\Snippets\SnippetsCustom.xml

Windows XP

C:\Users\ User Name\Application Data\Microsoft\Expression\Web 2\Snippets\SnippetsCustom.xml

Both these ‘xml’ files are different. While working in EW3, when you add code snippets they will be stored in the ‘SnippetsCustom.xml’ in Expression Web 3 folder.

To continue using the SnippetsCustom.xml from Expression Web 2 in Expression Web 3, before you start working in Expression Web 3, replace it with the one in Expression Web 2 folder. You need not delete the SnippetsCustom.xml that was created by default in Expression Web 3 folder, just rename it, and copy-paste the Expression Web 2 ‘xml’ file over here. Now you can use all your older snippets from Expression Web 2 in Expression Web 3 and any more you add would be updated in this file itself.

A code snippet is a piece of code. If there is some code that you may need to use often, you can create a code snippet for that code. Microsoft Expression Web has few built-in code snippets that you can use as they are or you can modify them as per your requirement.

To create a code snippet:

1. From the Tools menu choose Page Editor Options.
2. In the Page Editor Options dialog box, switch to the Code Snippets tab and click Add.
3. In the Add Code Snippet dialog box, fill out the following fields:
   • Keyword: Type a unique word that describes the code snippet, its function. This would help you locate the code snippet from the list of code snippets.
   • Description: A description of the code snippet.
   • Text: Type in the text that is to be displayed by the code snippet.



4. When done click OK and the newly created code snippet will be added to the existing list of snippets.

To insert a code snippet in a page

Follow these steps:

1. In Code View or Split View of your page, place the cursor where you want to add the code snippet and do one of the following:
   • Key in CTRL + Enter.
   • Go to Edit menu > Intellisense > Code Snippets.
   • Display the Code View toolbar (Right click on any toolbar and choose Code View) and select  button (List Code Snippets button).
2. In the displayed list of snippets, do one of the following:
   • Scroll down to find your code snippet, hit enter, tab or double click on it.
   • Type in the name of the snippet and once found, hit enter, tab or double click on it.