Javascript for Sublime

3776 days ago, 0 views.

Better Javascript

JavaScript have many ways to do something and sometimes Sublime Text can’t interpeter good your Javascript code. For Example, If you define methods with prototype and try to use cmd + R shortcut to access it isn’t possible. In general this plugin fix this type of errors an convert this:

in this:

JavaScript Snippets

Suite of basics snippets for common actions in JavaScript.

[afn] anonymous function

function(${1:arguments}) {
    ${0:// body...}
}
[cd] console.dir

console.dir(${1:obj})${0}
[ce] console.error

console.error(${1:error})${0}
[cl] console.log

console.log(${1:msg})${0}
[cli] console.log with util.inspect

console.log(require('util').inspect(${1:obj}, true, ${2:10}, true))${0}
[ct] console.trace

console.trace(${1:msg})${0}
[fn] function

function ${1:methodName}(${2:arguments}) {
    ${0:// body...}
}
[ii] Immediately-invoked function expression

(function () {
    ${0:// body...}
})();
[me] module.exports

module.exports = ${1}
[okfe] Objects.keys and forEach

Object.keys(${1:obj}).forEach(function(key) {
    ${0:// body...}
})
[pe] process.exit

process.exit()
[proto] prototype

${1:ClassName}.prototype.${2:methodName} = function(${3:arguments}) {
    ${0:// body...}
}
[req] require

require('${1:package}')${0}
[sto] setTimeout

setTimeout(function() {
    ${2:// body...}
}, ${1:millis})
[sti] setInterval

setInterval(function() {
    ${2:// body...}
}, ${1:millis})
[us] use strict

'use strict'
Behaviorial Driven Development

[desc] describe

describe('${1:description}', function() {
    ${0:// body...}
})
[ita] asychronous it

it('${1:description}', function(done) {
    ${0:// body...}
})
[its] synchronous it

it('${1:description}', function() {
    ${0:// body...}
})

JavaScript Console

Improve your worfklow with snippets for all method of the console and greate way to call it.

/* Methods covered */

console.assert()
console.clear()
console.count()
console.debug()
console.dir()
console.dirxml()
console.error()
console.exception()
console.group()
console.groupCollapsed()
console.groupEnd()
console.info()
console.log()
console.profile()
console.profileEnd()
console.tab()
console.table()
console.time()
console.timeEnd()
console.timeStamp()
console.warn()

Also include the snippets for CoffeeScript.

JavaScript & NodeJS Snippets

Snippets for manipulate the DOM and good snippets for NodeJS. If you decide install only a one package of snippets, this is the key.

List of Snippets:

Console

[cd] console.dir

console.dir(${1:obj});
[ce] console.error

console.error(${1:obj});
[cl] console.log

console.log(${1:obj});
[cw] console.warn

console.warn(${1:obj});
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(${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

[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(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});
[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}
});
Misc

[us] use strict

'use strict';
[al] alert

alert('${1:msg}');
[pm] prompt

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

Tern for Sublime

Javascript Autocompletion for Sublime Text. Don’t work totally nice (because JavaScript is too dynamic to do this) but is better than nothing.

You can try a demo here.

Sublimelinter for Javascript

Linter is basic to write good code, and JSHint is the best linter for JavaScript . You must use it!

SublimeCodeIntel

Improve autocompletion. Complementary to TernJS and support more languages, like:


JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.

JS Format

I’m obsessive of the clean code. This plugin format your code for you. This plugin is based on the website jsbeautifier and really works fine. Remember configure it and don’t auto format JS files on save, breaks all open source proyects!

BONUS: Use Editorconfig to set up the identation style of your proyect.

Kiko Beats

Kiko Beats