add custom snippets to emmet - emmet

Question

I'm using emmet with Brackets.
In this file lib/AppSupport/Brackets/extensions/user/brackets-emmet/snippets.json
I add this line at the right place :
"clearfix":".clearfix:before, .clearfix:after { content: \" \"; display: table; } .clearfix:after { clear: both; } /* For IE 6/7 only */ .clearfix { *zoom: 1; }",
This works but this not looks like a good practice so I try to create an other file mysnippets.json in the same folder with this tiny sample :
{
"css": {
"snippets": {
"test": "ok"
}
}
}
But it doesn't work (after save/relaunch).
Is it possible to add an external json in the same folder ? What's worng ?

Answer 1

Here is the solution for Brackets (testing on 43) :
http://circlewaves.com/blog/how-to-add-custom-snippets-to-emmet-for-brackets/
All you need — is to create a JSON-file called with name started with “snippets”, for example: snippets-mysnippets.json, snippets_team.json, snippets-php.json and etc; and set extension folder with this JSON file in Emmet options:
On my mac I add something like : /Users/benoit/Documents/Brackets/
adding snippets-css.json with this :
{
"css": {
"snippets": {
"reset":"/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */\n html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } \n/* HTML5 display-role reset for older browsers */\n article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }",
"clearfix":".clearfix:before, .clearfix:after { content: \" \"; display: table; } .clearfix:after { clear: both; } /* For IE 6/7 only */ .clearfix { *zoom: 1; }" }
}
}

Answer 2

open brackets-emmet/main.js
define a variable at the near top like this:
var userSnippets = require('text!emmet/userSnippets.json');
and then find this line:
emmet.loadSystemSnippets(snippets);
copy it and replaces by this:
emmet.loadSystemSnippets(userSnippets);
and now, create a file named userSnippets.json in: brackets-emmet/node_modules/emmet/lib/
edit your custom snippets in here, finally is press F5 ( command + r ) to refresh Brackets.
Done! :)

Answer 3

The documentation at http://docs.emmet.io/customization/snippets/ directs you to create an extensions folder and place within it a snippets.json or snippets-*.json (where * can be any name). In the new json file, you create your new snippets or override the standard snippets in the standard snippets.json file. In the Emmet preferences, put the path to the extensions folder. In Win 7, it appears that you need forward slashes in the path name. Your custom snippets.json file will not be overridden with updates. Following this procedure works with Brackets sprint 41 on Win 7.

Answer 4

On my Windows I added to Brackets - emmet - preferences path:
C:/Users/Andrew/AppData/Roaming/Brackets/extensions/user
And created my own snippets.json in this folder and it works!

Answer 5

It looks like the Emmet extension for Brackets only loads snippets from that one location. So if you want to customize your snippets, it seems the only option is to edit that file (and re-apply your edits any time you update the extension version). The snippets.json format is officially documented here: http://docs.emmet.io/customization/snippets/
It would be nice if Emmet supported a separate user-editable config file, though. Might be worth filing an issue on the Emmet extension to request this...

Answer 6

"!!": "{<!DOCTYPE html>}>html[lang='dk']>(head>meta[charset='${charset}']+meta[http-equiv='X-UA-Compatible'][content='IE=edge']+meta[name='viewport'][content='width=device-width,initial-scale=1.0']+link[href=/css/bootstrap.min.css]+link:css+title>{titel})+(body>div.container>div.row>div.col-12)",
This worked for me and might work for you use it at your own risk!
Adding custom docksnippet to Emmet:
1). Go to Help --> Show Extension Folder.
2). Browse to: C:\Users\daniel\AppData\Roaming\Brackets\extensions\user\brackets-emmet\node_modules\emmet\lib\snippets.json and manke a backup of the file before you edit it!
3). Search snippts.json for "html" with Ctrl + F and look for "abbreviations".
4). Add custom template with hook:
"!!": "{}>html[lang='dk']>(head>meta[charset='${charset}']+meta[http-equiv='X-UA-Compatible'][content='IE=edge']+meta[name='viewport'][content='width=device-width,initial-scale=1.0']+link[href=/css/bootstrap.min.css]+link:css+title>{titel})+(body>div.container>div.row>div.col-12)",
5). Save the original snippts.json file and reload with extensions (F5).