Reuse code with snippets

If you find yourself repeating code blocks multiple times, then you can use code snippets to speed up the process of writing code. Write the code once, save it as a snippet, and then double-click it in the Snippets panel to insert it in multiple places.

Snippets created using the Snippets panel are not site-specific, and so they can be reused across sites. You can also use snippets across different devices, and also across different versions of Dreamweaver using sync settings.

Dreamweaver comes packaged with multiple code snippets. However, you can also create your own code snippets and save them.

Browse through the following use cases to understand where you can use snippets in your workflow:

• If you are working in an organization that follows certain design standards, or if you are a free-lancer working on multiple projects – in either scenario you can use code snippets to achieve design uniformity, by storing these common pieces of code as snippets, and then inserting them into your code.
• If you are required to define, maintain, and enforce some coding standards then code snippets come in useful.
• Hand-coding responsive elements in a web page can be time-consuming. Use some of the snippets from the Bootstrap or Responsive_Design_Snippets section of the Snippets panel (for example, a responsive table code snippet). With one click you have inserted almost 20 lines of code for that responsive table.
  Edit the table as required. You can merge columns or rows, add columns or rows, style it any way you want, and then select the code and save it as a new snippet that you can reuse in all other pages you create. For more information on creating code snippets, see Create snippets.
• JavaScript behaviors, CSS effects, and CSS styles are also excellent candidates for code reuse.

The Snippets panel

In Dreamweaver, you can manage code snippets using the Snippets panel (Window > Snippets).

A snippets panel is like a collection of pieces of code.

What you can do with the Snippets panel

You can do the following tasks using the Snippets panel.

Expand the folders to navigate to a code snippet, and then double-click it, or click the Insert icon to insert the snippet at the cursor location. To wrap existing text in a code snippet, select the text, then insert the snippet, the text is wrapped within the code snippet. For more information, see Insert snippets.

Manage your snippets by housing them in folders with an intuitive naming convention. To create a snippet folder, click the New Folder icon. A new snippet folder is created within a selected node. To change the location of the snippet folder, drag it to the desired location. For more information, see Create snippet folders. 

Use the pre-packaged snippets and edit them to create your own code snippets. Or, create your own snippets from scratch, and then save them in the Snippets panel for later reuse. For more information, see Create snippets.

To edit an existing snippet, select the snippet, and click the Edit icon. For more information, see Edit snippets.

Delete snippets you no longer need. To delete a snippet, select it and click the Delete icon.

To rename a snippet, right-click the snippet to open the context menu. Choose Rename snippet, and then type in the new snippet name.

Trigger keys allow you to create intuitive short codes that you can type in, instead of navigating to a particular snippet in the Snippets panel and then inserting it. If you have defined trigger keys, place your cursor at the required spot in the code. Then type in the trigger key text and press tab. The code snippet is inserted into your code. For more information, see Add trigger keys and insert snippets using trigger keys.

Insert snippets

You can insert code snippets into your code at the point where your cursor is placed.

If you have defined trigger keys, place your cursor at the required spot in the code. Then type in the trigger key text and press tab. The code snippet is inserted into your code. For more information, see Add trigger keys and insert snippets using trigger keys.

To see what a code snippet looks like, insert a snippet in design view.

Create snippets

Edit snippets

To make changes to an existing snippet, you can:

• Right-click the snippet to open the Edit Snippet dialog
• Select the snippet and click the Edit Snippet icon at the bottom of the panel

When you edit a snippet, existing instances of the snippet in the document do not get updated.

You can edit all the fields in the Snippet dialog, such as the Name, Description, trigger key, and the code.

Create snippet folders

Add trigger keys and insert snippets using trigger keys

Use trigger keys to quickly add code snippets.

First assign trigger keys to all your frequently used snippets. Then in Code view, type in the Trigger key text and press tab, Dreamweaver adds the snippet at the cursor location.

How to distribute snippets across multiple devices

Dreamweaver’s cloud sync feature helps you keep snippets synchronized between two machines.

Use Dreamweaver’s sync settings feature to port snippets created using one instance of Dreamweaver into another machine running Dreamweaver (for example, office and home installations of Dreamweaver). 

To sync settings:

If synchronizing settings is something you do often, enable auto-synchronization by clicking Enable Automatic Sync in the Sync Settings section in the Preference panel. Every change in the settings is automatically saved to the cloud.