I wrote a few Sublime Text 2 snippets the other day that I thought I would share with the world, I’ll probably add some more to this post over time as snippets are super easy to create, and super helpful!
First one is for jQuery plugins, and is based on http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/ thanks to Addy Osmani.
<snippet>
<content><![CDATA[
(function ( \$, window, document, undefined ) {
// Create the defaults once
var pluginName = '${1:name}',
defaults = {
propertyName: "value"
};
// The actual plugin constructor
function ${2:snippet}( element, options ) {
this.element = element;
this.options = \$.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
\$.extend(${2:snippet}.prototype, {
init: function () {
}
});
\$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!\$.data(this, pluginName)) {
\$.data(this, pluginName,
new ${2:snippet}( this, options ));
}
});
};
\$.fn.defaults = defaults;
})( jQuery, window, document );
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>jqplug</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js</scope>
</snippet>
And here’s another for RequireJS plugins.
<snippet>
<content><![CDATA[
define(['${1:deps}'], function (${2:args}) {
});
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>def</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js</scope>
</snippet>
There ya go! More to come hopefully…
Console.log
<snippet>
<content><![CDATA[
console.log("${1:message}")
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>log</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js</scope>
</snippet>
New HTML Page
<snippet> <content><![CDATA[ <!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html> ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <tabTrigger>htmlp</tabTrigger> <!-- Optional: Set a scope to limit where the snippet will trigger --> <--<scope>source.html</scope>--> </snippet>