add custom snippets to emmet

benoît picture benoît · May 27, 2014 · Viewed 7.7k times · Source

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

benoît picture benoît · Sep 8, 2014

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; }"    }
  }
}