zenorocha/sublime-javascript-snippets

JavaScript & NodeJS Snippets for Sublime Text 2/3

JavaScript Snippets for Sublime

Install

To install through Package Control, search for JavaScript & NodeJS Snippets. If you still don't have Package Control in Sublime Text, go get it. It's pure awesomeness.

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.

Console

[cd] console.dir

console.dir(${1:obj});

[ce] console.error

console.error(${1:obj});

[ci] console.info

console.info(${1:obj});

[cl] console.log

console.log(${1:obj});

[cw] console.warn

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

[de] debugger

debugger;

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

[cel] createElement

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

[cdf] createDocumentFragment

${1:document}.createDocumentFragment();

[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

[fn] function

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

[afn] anonymous function

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

[pr] prototype

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

[iife] immediately-invoked function expression

(function(${1:window}, ${2:document}) {
	${1}
})(${1:window}, ${2: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}
}

JSON

[jp] JSON.parse

JSON.parse(${1:obj});

[js] JSON.stringify

JSON.stringify(${1:obj});

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

[me] module.exports

module.exports = ${1:name};

[pe] process.exit

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

[re] require

require('${1:module}');

BDD

[desc] describe

describe('${1:description}', function() {
	${2}
});

[ita] it asynchronous

it('${1:description}', function(done) {
	${2}
});

[its] it synchronous

it('${1:description}', function() {
	${2}
});

[itp] it pending

it('${1:description}');

Misc

[us] use strict

'use strict';

[al] alert

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

[co] confirm

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

[pm] prompt

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

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

History

Check Releases for detailed changelog.

License

MIT License © Zeno Rocha

sublime-javascript-snippets's Issues

[fn] for funcion callbacks

You know, for when you need callback functions. See this gist

Completions

Por quê não deixa tudo em um único arquivo .sublime-completions?

Exemplo:

{
  "scope": [
    "text.js - source - meta.tag, punctuation.definition.tag.begin"
  ],
  "completions": [
    {
        "trigger": "gi",
        "contents": "${1:document}.getElementById('${2:id}');"
    },
    {
        "trigger": "gc",
        "contents": "${1:document}.getElementsByClassName('${2:class}');"
    }
  ]
}

http://sublimetext.info/docs/en/extensibility/completions.html

Tab key sequence isn't quite correct sometimes

In some cases I get a weird behavior, when pressing tab to autocomplete. E.g. when defining a function inside a function instead of autocompleting 'fu' to

function methodName (arguments) {
    // body...
}

when pressing the 'tab' key it jumps to the end of the outer function. Same with BDD 'description' and 'it'. I hope you can reproduce the bug. I'm going to issue a pull request later fixing this (but maybe it's a desired behavior, since no one else seems to have recognized it so far?).

how about use [gc$] to select the #$ item of your list?

gc0 = getElementsByClassName('${2:class}')[0]
gc8 = getElementsByClassName('${2:class}')[8]

and you also can use the same process to [gt]

Fix build

Currently the grunt-lintspaces dependence is breaking the npm install , causing the build to fail. Updating to the last version fix the problem.

ES6 Feats

What dou you think about add some ES6 features?

Space before argument lists in function expressions

#20 changed this to remove the space, but JSHint's white option, which suggests Crockford's whitespace style, requires that space to be there.

I know that whitespace is a subjective topic, but could this be discussed?

Remove semicolon from snippets

What do you think about removing semicolon from snippets?

I've been using standardjs and looks like we don't need to use semicolons anywhere anymore. They gave some cool links explaining about this, that's the summary and some cool links.

If you agree with not using semicolons, I'll fork and submit a PR later removing the semicolons

Trigger [ce] duplicated

[ce] > console.error and [ce] createElement.
Possible solution: alter console.error trigger > [cerr] or [cer].

Remove unnecessary {0:// body}

You always need to remove it, so why keep it?

Reported by @eduardolundgren.

Defines String Input

I have noticed that a lot of the patterns define a string input for a function when a string type is not allowed.

Ex
document.appendChild('elem');

appendChild cannot accept a string type.

Do you still accept PR?

Hi @zenorocha I wonder if you still accept PR to this repo?

Hampering Semicolon

assert.equal(table_ref, document.querySelector('selector');)

It's just smiling and winking at me like the devil