Brackets: Snippets Editor

Having got the hang of Emmet (look elsewhere in the blog for that), it would still be jolly handy to have a plain old snippet editor for Brackets, and happily I found one here.

githubsnip01

Installing this means a) using the Extension Manager, b) configuring the snippet editor to do things your preferred way, or at least understanding that if you want to – I do.

Extension Manager

From this page, find the [Download  Zip] button, and save to your preferred place, which I’ll assume is c:\downloads. So the zip is saved to [c:\downloads\brackets-master.zip].

Start Brackets (see elsewhere for references to that).

Go File/Extension Manager/[Available tab]

In the search box, type [brackets snippet] and do not hit return

Find this one, and click Install

Installed02

Once it says installed, you will see that there is a tool bar on the right, with a big S. Click that S, and it brings up the snippets that Jonathan the author has already provided:

snippets05

Configuring non-defaults

On my PC, those snippets are installed in my appdata roaming folder, and you don’t (seem to) get a chance to change that at install time. A bit more illustration – if you click on the Settings button, you see this:

snippets06

The [data] folder referenced is under that roaming folder.

You want to keep the example snippets Jonathan has already provided, as they are working examples of everything you need know, so create your preferred folder, locate those examples, and copy them into your preferred folder.

So that means copying everything in here…

C:\Users\[your username here]\AppData\Roaming\Brackets\extensions\user\jrowny.brackets.snippets\data

location01

… to here (or something like it, assuming you don’t want the default) …

C:\data\sandbox\Angular\Snippets\Data

location02

You then need to update the settings for the Editor to reflect the new location:

EditorSettings01

EditorSettings02

Once Brackets restarts, click on the S in the right toolbar, then on the first html.json entry under the Source column header (see example above):

In the IDE top bar, you should see that the editor has opened the file in the new location, i.e. in my case from C:\data\sandbox\Angular\Snippets\Data

Now you can actually use it (well, you could before, but not from the preferred place). The supplied example html.json nicely shows that the template that triggers the substitution can be either a link to a file in what I think is a hard-coded expectation of a folder caller Snippets…

suppliedSnippet01

or a macro, either just a plain substitution or taking substitution variables:

suppliedSnippet02

Just for completeness, here’s the referenced html5.snippet:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
!!{cursor}
</body>
</html>

In summary, it’s all pretty perfect. Thanks Jonathan.

Writing your own snippets

Let’s then take a trivial example to show how to write your own snippet.

We saw that there is a parent [Data] folder, and a child [Snippets] folder, and the latter has a single file in it, [html.json], with this content:

[
{
“name”: “html5”,
“trigger”: “html5”,
“usage”: “html5”,
“description”: “Create an HTML5 page”,
“template”: “html5.snippet”
},
{
“name”: “link”,
“trigger”: “a”,
“usage”: “a index.html home”,
“description”: “Create an anchor with an href”,
“template”: “<a href=\”$${href}\”>$${title}</a>”
}
]

To this I added a html5-ang entry, giving this:

[
{
“name”: “html5”,
“trigger”: “html5”,
“usage”: “html5”,
“description”: “Create an HTML5 page”,
“template”: “html5.snippet”
},
{
“name”: “html5-ang”,
“trigger”: “html5-ang”,
“usage”: “html5-ang”,
“description”: “Create an HTML5 page with Angular place-holders”,
“template”: “html5-ang.snippet
},
{
“name”: “link”,
“trigger”: “a”,
“usage”: “a index.html home”,
“description”: “Create an anchor with an href”,
“template”: “<a href=\”$${href}\”>$${title}</a>”
}
]

The editor now expects to find an entry for the blue template above, so we create a file for it:

twosnippets01

Exit and enter Brackets, and if you have done it right, you see this:

twosnippets02

If you now click on the Trigger/html5-ang entry, you now see this, or whatever went into your new snippet:

twosnippets03

Taking that a bit further, I now have a self-contained page that binds to fake data, but has no controller etc right now:

<!DOCTYPE html>
<html lang=”en-gb”>
<head lang=”en-gb”>
<meta charset=”UTF-8″>
<title>Tottenham Bike Maintenance</title>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js”></script&gt;
</head>
<body ng-app>
<table ng-init=’products = [
{ “productName”: “Trek Madone 4.9 Compact Ultegra Di2 2014 Road Bike Blue”,
“productCode”: “Di2 2014”,
“releaseDate”: “May 24 2014”,
“price”: 1950.00,
“tags”: [ “road”, “bike” ],
“imageUrl”: “http://images.evanscycles.com/product_image/image/938/b7d/eae/112334/product_page/trek-madone-49-compact-ultegra-di2-2014-road-bike.jpg&#8221;
},
{
“productName”: “Pinnacle Dolomite Six 2015 Road Bike”,
“productCode”: “6061-T6”,
“releaseDate”: “May 21, 2013”,
“price”: 805.00,
“tags”: [“MTB”],
“imageUrl”: “http://images.evanscycles.com/product_image/image/819/e1f/fd5/149393/product_page/pinnacle-dolomite-six-2015-road-bike.jpg&#8221;
}]’>
<thead>
<tr>
<td>Product</td>
<td>Code</td>
<td>Release Date</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr ng-repeat=”product in products”>
<td>
<img ng-src=”{{product.imageUrl}}”
title=”{{product.productName}}”>
</td>
<td>{{ product.productName}}</td>
<td>{{ product.productCode }}</td>
<td>{{ product.releaseDate }}</td>
<td>{{ product.price | currency:”£” }}</td>
</tr>
</tbody>
</table>
</body>
</html>

Currency and non-Dollar, in fact non-US countries:

https://docs.angularjs.org/api/ng/filter/currency

Advertisements

One thought on “Brackets: Snippets Editor

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s