Snippets Brackets Extension

Article by: Raymond Camden

Snippets Brackets Extension

Today we want to share the Snippets extension. Created by Jonathan Rowny, the Snippets extension lets you define a series of triggers for common typing tasks. In some ways this is like the Zen Coding extension reviewed earlier, but a bit simpler.

Once installed, you can open a panel of all available snippets by hitting SHIFT+CMD+S:

Screenshot

For each snippet you’re given trigger text and an explanation of what it does. Currently there isn’t a UI to add or edit snippets, but he created a very simple file-based system for making your own snippets. Simply go to the extension folder (don’t forget Brackets has a “Show Extensions Folder” option under the Help menu), find the snippets extension, and look at the data directory.

Each .json file corresponds to a set of snippets. You can use whatever names you would like, but it makes sense to follow Jonathan’s lead and name your files based on the category of snippet used. If you open up one of the files you can see it is a JSON-structured array of objects. Here’s the set of default HTML snippets:


[
{
"name": "div",
"trigger": "d",
"usage": "d ",
"description": "Create a div",
"template": "<div>n!!{cursor}n</div>"
},
{
"name": "link",
"trigger": "a",
"usage": "a index.html home",
"description": "Create an achor with an href",
"template": "<a href="$${href}">$${title}</a>"
}
]

For the most part you shouldn’t have any issues working with this format, but remember that quotes must be escaped and newlines should be written as n.

Here is a short video below that shows the extension in action.

Note: The current released version of the extension works with the latest Brackets from GitHub. If you are running the Sprint 17 download, be sure to get the tagged version of the extension here: https://github.com/jrowny/brackets-snippets/tags

Leave a Reply

Your email address will not be published. Required fields are marked *