Blog

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:

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.

The video cannot be shown at the moment. Please try again later.

 

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

20 Responses


20 Comments

  1. mohammad says:

    hi
    i use of adobe brackets, this editor is very lovely(fast, good ui, …) but dont have auto-completion ability that is very important for a web editors.
    please add this ability to adobe brackets.
    thank

  2. Are you sure? It should autocomplete HTML now. Further autocomplete (CSS) is planned.

  3. mohammad says:

    are you going to relase brackets for linux?

  4. Check the Brackets Google Group – there are people working on it now.

  5. dcz says:

    It will be cool if we can add snippets just with TAB key (like in other IDE like Sublime Text)

    for exemple : div+[TAB] = add a DIV TAG

  6. Ilya Panasenko says:

    Ctrl+Shift+S hotkey is no longer usable since Brackets Sprint27, as it uses this combination for “Save as…”

  7. Ben says:

    I’m loving brackets it’s very stable and has a clean ui which makes it lovely to use.

    One thing that freaks me out is using the “return-key” for autocomplete…
    If i may compare it to other programs like xcode(not web-based) or dreamweaver that’s rather annoying…

    Any info on that?

  8. Raphael says:

    Hi,

    Ctrl + Alt + V is a very painful (and slow) combo.
    Is it possible to simply trigger with “tab” key ? (didn’t find where)

    Thank you

  9. Aboud says:

    Is there a possibility for anyone to make his own autocomplete?
    I really liked Brackets, and I would love to use it always.

  10. Jens says:

    I second this. Really importatn functionality for me coming frpm textmate and Sublime.

  11. phani vadlamani says:

    good extension for Brackets. helped me alot
    thanks

  12. Christopher says:

    I found this extension for Brackets, and I must say it is something I need. I installed Sublime text and you must crawl though hoops to make code snippets, not streamlined as I was hoping with sublime text.

    I can’t get the snippets I want to insert in the snippet list ?

  13. Gilbert says:

    I installed this extension and it worked with the examples included.
    Then I edit the file related to the HTML snippets and after saving it all the JSON files with the snippets disappeared.

    How and where do I put copies of those files?

  14. Kristtee says:

    Hi
    In the above json file example

    “template”: “$${title}

    is there a way put a block of html elements?

  15. Arda says:

    Thanks, i am using it all the time 🙂

  16. Rahul says:

    Hi guys

    Dumped Brackets for the second time. It’s solely meant for Front-end developers but it is damn too slow sometimes, it lags too much. Also, you don’t have much handy extensions as you have with ST. Handy features like auto-completion are completely missing with Brackets.

    Some of it’s features like Live preview can’t be seen anywhere else, but I expect it to be more powerful when I get to use it the next time.

    Best,

  17. danny says:

    Cti +shift S does not open it

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*


− 8 = zero