Steven Snippets for Sublime Text

HTML, CSS and JS snippets for your Sublime Text 2 & 3

How to install

With Package Control

To install through package control, search for Steven Snippets or typically the keywords js or javascript are suitable.

Without Package Control

If you prefer to install it manually, you can download the package and put it inside your Packages directory. It should work but will not update automatically.

Go to your Sublime Text 2 Packages directory and clone the repository using the command below:

git clone git://github.com/wangwen1220/steven-snippets.git steven-snippets

Console

[cw] console.warn

console.warn(${1:msg});

DOM

[ae] addEventListener

${1:document}.addEventListener('${2:event}', function(e) {
  $3
});

[ac] appendChild

${1:document}.appendChild(${2:elem});

[rc] removeChild

${1:document}.removeChild(${2:elem});

[ib] insertBefore

${1:document}.insertBefore(${2:elem}, ${3:null});

[cel] createElement

${1:document}.createElement(${2:elem});

[cdf] createDocumentFragment

${1:document}.createDocumentFragment(${2:elem});

[ca] classList.add

${1:document}.classList.add('${2:class}');

[ct] classList.toggle

${1:document}.classList.toggle('${2:class}');

[cr] classList.remove

${1:document}.classList.remove('${2:class}');

[gi] getElementById

${1:document}.getElementById('${2:id}');

[gc] getElementsByClassName

${1:document}.getElementsByClassName('${2:class}');

[gt] getElementsByTagName

${1:document}.getElementsByTagName('${2:tag}');

[ga] getAttribute

${1:document}.getAttribute('${2:attr}');

[sa] setAttribute

${1:document}.setAttribute('${2:attr}', ${3:value});

[ra] removeAttribute

${1:document}.removeAttribute('${2:attr}');

[ih] innerHTML

${1:document}.innerHTML = '${2:elem}';

[tc] textContent

${1:document}.textContent = '${2:content}';

[qs] querySelector

${1:document}.querySelector('${2:selector}');

[qsa] querySelectorAll

${1:document}.querySelectorAll('${2:selector}');

Loop

[fe] forEach

${1:myArray}.forEach(function(${2:elem}) {
  ${3}
});

[fi] for in

for (${1:prop} in ${2:obj}) {
  if (${2:obj}.hasOwnProperty(${1:prop})) {
    ${3}
  }
}

Function

[wfn] function

function ${1:methodName}(${2:arguments}) {
  ${3}
}

[wafn] anonymous function

function(${1:arguments}) {
  ${2}
}

[wii] Immediately-invoked function expression

(function($1) {
  $2
})($0);

[wjq] jQuery function

(function($) {
  $0
})(jQuery);

[pr] prototype

${1:ClassName}.prototype.${2:methodName} = function(${3:arguments}) {
  ${4}
}

[iife] immediately-invoked function expression

(function(window, document, undefined) {
  ${1}
})(window, document);

[call] function call

${1:methodName}.call(${2:context}, ${3:arguments})

[apply] function apply

${1:methodName}.apply(${2:context}, [${3:arguments}])

[ofn] function as a property of an object

${1:functionName}: function (${2:arguments}) {
  ${3}
}

Timer

[si] setInterval

setInterval(function() {
  ${2}
}, ${1:delay});

[st] setTimeout

setTimeout(function() {
  ${2}
}, ${1:delay});

NodeJS

[ase] assert.equal

assert.equal(${1:actual}, ${2:expected});

[asd] assert.deepEqual

assert.deepEqual(${1:actual}, ${2:expected});

[asn] assert.notEqual

assert.notEqual(${1:actual}, ${2:expected});

[pe] process.exit

process.exit(${1:code});

[pm] prompt

prompt(${1:'msg'});

JS Snippets

do {
  ${1:expression}
} while (${2:condition});

if (${1:condition}) {
  $2
}

ife

if (${1:condition}) {
  $2
} else {
  $3
}

ifeif

if (${1:condition}) {
  $2
} else if {
  $3
} else {
  $4
}

for

for (${1:var i = 0}; ${2:i < ${3:elements.length}}; ${4:i++}) {
  ${5:expression}
}

log

console.log(${1:'test'});

alt

alert(${1:'test'});

if (localStorage.${1:item}) {
  var ${1:item} = localStorage.${1:item};
  $2
}

.pd

.preventDefault();

.sp

.stopPropagation();

rand

Math.floor(Math.random() * ${1:10})

switch

switch(${1:var}) {
  case $2:
    $3
    break;
  case $4:
    $5
    break;
  default:
    {$6:break};
}

setInterval

setInterval(function() {
  $2
}, ${1:millis});

setTimeout

setTimeout(function() {
  $2
}, ${1:millis});

while

while (${1:condition}) {
  ${2:expression}
};

Author

Steven Wang