Skip to content

Instantly share code, notes, and snippets.

@xavierartot

xavierartot/Snippet one file

Last active January 19, 2018 17:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save xavierartot/6fd9442fff6d586e250f40bcd30e2052 to your computer and use it in GitHub Desktop.
Save xavierartot/6fd9442fff6d586e250f40bcd30e2052 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Snippet one file
#https://gist.github.com/xavierartot/6fd9442fff6d586e250f40bcd30e2052
# Functions
# prototype
snippet .
$('.${1:ele}').${0:VISUAL}
snippet proto
${1:class_name}.prototype.${2:method_name} = function(${3}) {
${0:${VISUAL}}
};
# Function
snippet fun
function ${1:function_name}(${2}) {
${0:${VISUAL}}
}
# Anonymous Function
snippet f "" w
function(${1}) {
${0:${VISUAL}}
}
# Anonymous Function assigned to variable
snippet vaf
var ${1:function_name} = function(${2}) {
${0:${VISUAL}}
};
# Function assigned to variable
snippet vf
var ${1:function_name} = function $1(${2}) {
${0:${VISUAL}}
};
# Immediate function
snippet (f
(function(${1}) {
${0:${VISUAL}}
}(${2}));
# Minify safe iife
snippet ;fe
;(function(${1}) {
${0:${VISUAL}}
}(${2}))
# self-defining function
snippet sdf
var ${1:function_name} = function (${2:argument}) {
${3}
$1 = function ($2) {
${0:${VISUAL}}
};
};
# Flow control
# if
snippet if
if (${1:true}) {
${0:${VISUAL}}
}
# if ... else
snippet ife
if (${1:true}) {
${0:${VISUAL}}
} else {
${2}
}
# tertiary conditional
snippet ter
${1:/* condition */} ? ${2:/* if true */} : ${0:/* if false */}
# switch
snippet switch
switch (${1:expression}) {
case '${3:case}':
${4}
break;
${0}
default:
${2}
}
snippet case
case '${1:case}':
${0:${VISUAL}}
break;
snippet try
try {
${0:${VISUAL}}
} catch (${1:e}) {
${2:/* handle error */}
}
snippet tryf
try {
${0:${VISUAL}}
} catch (${1:e}) {
${2:/* handle error */}
} finally {
${3:/* be executed regardless of the try / catch result*/}
}
# throw Error
snippet terr
throw new Error('${1:error message}')
# return
snippet ret
return ${0:result};
snippet for "for (...) {...}"
for (var ${1:i} = 0, ${2:len} = ${3:Things.length}; $1 < $2; $1++) {
${0:${VISUAL}}
}
snippet forr "reversed for (...) {...}"
for (var ${2:i} = ${1:Things.length} - 1; $2 >= 0; $2--) {
${0:${VISUAL}}
}
snippet wh "(condition) { ... }"
while (${1:/* condition */}) {
${0:${VISUAL}}
}
snippet do "do { ... } while (condition)"
do {
${0:${VISUAL}}
} while (${1:/* condition */});
# For in loop
snippet fori
for (var ${1:prop} in ${2:object}) {
${0:$2[$1]}
}
# Objects
# Object Method
snippet :f
${1:method_name}: function (${2:attribute}) {
${0:${VISUAL}}
},
# hasOwnProperty
snippet has
hasOwnProperty(${0})
# singleton
snippet sing
function ${1:Singleton} (${2:argument}) {
// the cached instance
var instance;
// rewrite the constructor
$1 = function $1($2) {
return instance;
};
// carry over the prototype properties
$1.prototype = this;
// the instance
instance = new $1();
// reset the constructor pointer
instance.constructor = $1;
${0}
return instance;
}
# Crockford's object function
snippet objc
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
# Define multiple properties
snippet props
var ${1:my_object} = Object.defineProperties(
${2:new Object()},
{
${3:property} : {
get : function $1_$3_getter() {
// getter code
},
set : function $1_$3_setter(value) {
// setter code
},
value : ${4:value},
writeable : ${5:boolean},
enumerable : ${6:boolean},
configurable : ${0:boolean}
}
}
);
# Define single property
snippet prop
Object.defineProperty(
${1:object},
'${2:property}',
{
get : function $1_$2_getter() {
// getter code
},
set : function $1_$2_setter(value) {
// setter code
},
value : ${3:value},
writeable : ${4:boolean},
enumerable : ${5:boolean},
configurable : ${0:boolean}
}
);
# Documentation
# docstring
snippet /**
/**
* ${0:description}
*
*/
snippet @par
@param {${1:type}} ${2:name} ${0:description}
snippet @ret
@return {${1:type}} ${0:description}
# JSON
# JSON.parse
snippet jsonp
JSON.parse(${0:jstr});
# JSON.stringify
snippet jsons
JSON.stringify(${0:object});
# DOM selectors
# Get elements
snippet get
getElementsBy${1:TagName}('${0}')
# Get element
snippet gett
getElementBy${1:Id}('${0}')
snippet gebi
getElementBy${1:Id}('${2:ele}')
snippet ele
getElementBy${1:Id}('${2:ele}')
# Elements by class
snippet by.
${1:document}.getElementsByClassName('${0:class}')
# Element by ID
snippet by#
${1:document}.getElementById('${0:element ID}')
# Query selector all
snippet qsa
${1:document}.querySelectorAll('${0:CSS selector}')
# Debugging
snippet de
debugger;
snippet cl "console.log"
console.log(${0})
snippet cd "console.debug"
console.debug(${0})
snippet ce "console.error"
console.error(${0})
snippet cw "console.warn"
console.warn(${0})
snippet ci "console.info"
console.info(${0})
snippet ct "console.trace"
console.trace(${0:label});
snippet ctime "console.time ... console.timeEnd"
console.time("${1:label}")
${0:${VISUAL}}
console.timeEnd("$1")
snippet ctimestamp "console.timeStamp"
console.timeStamp("${1:label}");
snippet ca "console.assert"
console.assert(${1:expression}, ${0:obj});
snippet cclear "console.clear"
console.clear()
snippet cdir "console.dir"
console.dir(${0:obj})
snippet cdirx "console.dirxml"
console.dirxml(${1:object})
snippet cgroup "console.group"
console.group("${1:label}")
${0:${VISUAL}}
console.groupEnd()
snippet cgroupc "console.groupCollapsed"
console.groupCollapsed("${1:label}");
${0:${VISUAL}}
console.groupEnd()
snippet cprof "console.profile"
console.profile("${1:label}");
${0:${VISUAL}}
console.profileEnd();
snippet ctable "console.table"
console.table(${1:"${2:value}"});
# Misc
# 'use strict';
snippet us
'use strict';
# setTimeout function
snippet timeout
setTimeout(function () {${0}}${2}, ${1:10});
snippet r
return ${0:false};
snippet vq
\`\${${1:i}} ${0} \`
snippet vari
var ${1:variable_name} = ${2:value};${0}
snippet vard
var ${1:variable_name}, ${2:value};
# array
snippet arr
let ${1:array_name} = []
snippet arr0
let ${1:array_name} = [${1}];
snippet arr1
let ${1:array_name} = [${1}, ${2}];
snippet arr2
let ${1:array_name} = [${2:0}, ${3:1}, ${4:2}];${0}
snippet arr3
let ${1:array_name} = [${2:0}, ${3:1}, ${4:2}, ${5:3}];${0}
snippet arr4
let ${1:array_name} = [${2:0}, ${3:1}, ${4:2}, ${5:3}, ${6:4}];${0}
snippet arr5
let ${1:array_name} = [${2:0}, ${3:1}, ${4:2}, ${5:3}, ${6:4}, ${7:5}];${0}
# Functions
# prototype
snippet prototype
${1:class_name}.prototype.${2:method_name} = (${3}) => {
${0}
};
# Function
snippet fun
function ${1:function_name}(${2:args}) {
${0}
}
snippet function
function ${1:function_name}() {
${0}
}
# Anonymous Function assigned to variable
snippet varf
var ${1:function_name} = function(${2}) {
${0}
};
# Immediate function
snippet immediate-function
(function(${1}) {
${0}
}(${2}));
# Immediate function
snippet iife
(function(${1}) {
${0}
}(${2}));
# self-defining function
snippet closure
let ${1:function_name} = (${2:argument}) => {
${3}
$1 = ($2) => {
${0}
};
};
# Flow control
# if
snippet if
if (${1}) {
}
# if ... else
snippet ife
if (${1}) {
} else {
}
# if ... else if ... else
snippet ifeife
if (${1}) {
} else if(${3}){
} else {
}
# if ... else if
snippet ifeif
if (${1}) {
} else if(){
}
# else.. if
snippet eif
else if(${1}){
${0}
}
snippet elseif
else if(${1}){
${0}
}
snippet else
else{
${0}
}
# tertiary conditional
snippet ter
let ${1:variable} = (${2}) ? ${3} : ${4}
snippet terv
let ${1:variable} = (${2:/* condition */}) ? ${3:/* if true */} : ${4:/* if false */}
snippet terl
let ${1:variable} = (${2:/* condition */}) ? ${3:/* if true */} : ${4:/* if false */}
# tertiary conditional with return
snippet terr
${1:return} (${2:/* condition */}) ? ${3:/* if true */} : ${4:/* if false */}
# switch
snippet switch
switch (${1:expression}) {
case '${3:case}':
${4}
break;
${0}
default:
${2}
}
# case
snippet case
case '${1:case}':
${2}
break;
${0}
# try
snippet catch
try {
${1}
} catch (${2:e}) {
${0:/* handle error */}
}
# try
snippet try
try {
${1}
} catch (${2:e}) {
${0:/* handle error */}
}
# try finally
snippet try-finally
try {
${1}
} catch (${2:e}) {
${0:/* handle error */}
} finally {
${3:/* be executed regardless of the try / catch result*/}
}
# throw Error
snippet throw-error
throw new Error('${1:error message}')
# Loops
# for loop
snippet for
for (let i = 0, l = ${1:arr}.length; i < l; i++) {
let current = $1[i], prev = $1[i-1];
${0}
}
snippet fl
for (let i = 0, l = ${1:arr}.length; i < l; i++) {
let current = $1[i], prev = $1[i-1];
${0}
}
snippet fo
for (let i = 0, l = ${1:arr}.length; i < l; i++) {
let current = $1[i], prev = $1[i-1];
${0}
}
# Reversed forr
snippet for-reversed
for (let i = ${1:arr}.length - 1; i >= 0; i--) {
let current = $1[i], prev = $1[i-1];
${0}
}
# Reversed forr
snippet forr
for (let i = ${1:arr}.length - 1; i >= 0; i--) {
let current = $1[i], prev = $1[i-1];
${0}
}
# While loop
snippet wh
while (${1:/* condition */}) {
${0}
}
snippet while
while (${1:/* condition */}) {
${0}
}
# Do while loop
snippet do-while
do {
${0}
} while (${1:/* condition */});
snippet do
do {
${0}
} while (${1:/* condition */});
snippet dowh
do {
${0}
} while (${1:/* condition */});
snippet letin
for (let ${1:prop} in ${2:object}) {
$2[$1] ${0}
}
snippet li
for (let ${1:prop} in ${2:object}) {
$2[$1] ${0}
}
# forEach
snippet foreach
${1:array}.forEach(function (${2:cle}, ${3:index}, origin) {
console.log(\`cle = \${$2}, val= $1[cle]}, index = \${$3}, origin = \${$3}\`);
${0}
});
snippet fe
${1:array}.forEach(function (${2:cle}, ${3:index}, origin) {
console.log(\`cle = \${$2}, val= $1[cle]}, index = \${$3}, origin = \${$3}\`);
${0}
});
snippet forEach
${1:array}.forEach(function (${2:cle}, ${3:index}, origin) {
console.log(\`cle = \${$2}, val= $1[cle]}, index = \${$3}, origin = \${$3}\`);
${0}
});
# Objects
# Object Method
snippet object-method
${1:method_name}: function (${2:attribute}) {
${3}
},
snippet om
${1:method_name}: function (${2:attribute}) {
${3}
},
snippet objf
var ${1:name} = {
${2:prop} : ${3:value}
};
snippet o
var ${1:name} = {
${2:prop} : ${3:value}
};
snippet o1
var ${1:name} = {
${2:prop} : ${3:value}
};
snippet o2
var ${1:name} = {
${2:prop} : ${3:value},
${3:prop} : ${4:value}
};
snippet o3
var ${1:name} = {
${2:prop} : ${3:value},
${3:prop} : ${4:value},
${5:prop} : ${6:value}
};
snippet obj
var ${1:name} = {
${2:prop} : ${3:value}
};
# hasOwnProperty
snippet hasOwnProperty
hasOwnProperty(${0})
snippet hop
hasOwnProperty(${0})
snippet singleton
function ${1:Singleton} (${2:argument}) {
// the cached instance
let instance;
// rewrite the constructor
$1 = function $1($2) {
return instance;
};
// carry over the prototype properties
$1.prototype = this;
// the instance
instance = new $1();
// reset the constructor pointer
instance.constructor = $1;
${0}
return instance;
}
# Crockford's object function
snippet object-function-Crockford
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
# Define multiple properties
snippet properties-multiple
let ${1:my_object} = Object.defineProperties(
${2:new Object()},
{
${3:property} : {
get : function $1_$3_getter() {
// getter code
},
set : function $1_$3_setter(value) {
// setter code
},
value : ${4:value},
writeable : ${5:boolean},
enumerable : ${6:boolean},
configurable : ${0:boolean}
}
}
);
# Define single property
snippet define-single-property
Object.defineProperty(
${1:object},
'${2:property}',
{
get : function $1_$2_getter() {
// getter code
},
set : function $1_$2_setter(value) {
// setter code
},
value : ${3:value},
writeable : ${4:boolean},
enumerable : ${5:boolean},
configurable : ${0:boolean}
}
);
# Documentation
snippet @param
@param {${1:type}} ${2:name} ${0:description}
snippet @ret
@return {${1:type}} ${0:description}
# JSON
# JSON.parse
snippet JSON.parse
JSON.parse(${0:jstr});
# JSON.stringify
snippet JSON.stringify
JSON.stringify(${0:object});
# DOM selectors
# Get elements
snippet geb
getElementsBy${1:TagName}('${0}')
snippet gebtn
getElementsBy${1:TagName}('${0}')
snippet getElementsByTagName
getElementsBy${1:TagName}('${0}')
snippet id
${1:document}.getElementById('${0:ele}')
# Elements by class
snippet byClassName
${1:document}.getElementsByClassName('${0:class}')
# Element by ID
snippet getElementsBy
${1:document}.getElementById('${0:element ID}')
# Query selector
snippet querySelector
${1:document}.querySelector('${0:selector}')
snippet querySelectorAll
${1:document}.querySelectorAll('${0:selector}')
snippet selector
${1:document}.querySelector('${0:selector}')
snippet selectorAll
${1:document}.queryselectorAll('${0:selector}')
snippet vqs
var ${1:name} = document.querySelector('${0:.class}')
snippet qs
${1:document}.querySelector('${0:.class}')
snippet qsac
let ${1:var} = document.querySelectorAll('${2:.class}')
for (let i = 0; i < $1.length; i++) {
$1[i].addEventListener('click', function(e) {
console.log(e.target);
${0}
e.preventDefault();
});
}
# Debugging
snippet debugger
debugger;
# console.debug
snippet cd
console.debug(${0});
# console.trace
snippet ct
console.trace(${0:label});
# console.time
snippet ctime
console.time(${0:label});
# console.assert
snippet ca
console.assert(${1:expression}, ${0:obj});
# console.dir
snippet cdir
console.dir(${0:obj});
# Misc
# 'use strict';
snippet us
'use strict';
# setTimeout function
snippet timeout
setTimeout(function () {${0}}${2}, ${1:10});
snippet l
let ${1:var1} = ${0}
snippet letd
let ${1}, ${2}
snippet forin
for (let ${1:prop} in ${2:obj}){
if ($2.hasOwnProperty($1)) {
console.log($2[$1])
${0}
}
}
snippet fi
for (${1:prop} in ${2:obj}){
if ($2.hasOwnProperty($1)) {
console.log($2[$1])
${0}
}
}
snippet lf
let ${1:function_name} = (${2}) => {
${0}
}
snippet l=>
let ${1:function_name} = (${2}) => {
${0}
}
snippet lfs
let ${1:function_name} = (${2}) => ${0}
snippet c=>
const ${1:function_name} = (${2}) => {
${0}
}
snippet cf
const ${1:function_name} = (${2}) => {
${0}
}
snippet cfs
const ${1:function_name} = (${2}) => ${0}
snippet import
import ${1} from '${2}';
snippet im
import ${1} from '${2}';
snippet class
class ${1} {
constructor(${2}){
this.$2 = $2
}
${3}
}
let ${0} = new $1()
snippet map6
map( (${1:element}, ${2:i}) => {
//console.log($1, $2)
${0}
})
snippet =>
(${1}) => {
${0}
}
snippet fa
(${1}) => {
${0}
}
snippet sym
const ${1} = Symbol('${0}');
snippet ed
export default ${0}
snippet $
$('${1}')${0}
snippet getset
get ${1}() {
return this.val * this.val
}
set $1(${3}) {
this.$1 = ${3}
}
}
snippet get
get ${1}() {
return this.val * this.val
}
snippet set
set $1(${1}) {
this.$1 = ${2}
}
}
#D3 ---------------------------------------------------
snippet .attr
.attr("${1}", ${2})
snippet .style
.style("${1}", ${2})
snippet axis
d3.svg.axis()
.orient(${1})
.scale(${2})
snippet fd
function(d) { ${1} }
snippet fdi
function(d, i) { ${1} }
snippet marginconvention
var ${1:margin} = { top: ${2:10}, right: ${3:10}, bottom: ${4:10}, left: ${5:10} };
var ${6:width} = ${7:970} - $1.left - $1.right;
var ${8:height} = ${9:500} - $1.top - $1.bottom;
var ${10:svg} = d3.select("${11}").append("svg")
.attr("width", $6 + $1.left + $1.right)
.attr("height", $8 + $1.top + $1.bottom)
.append("g")
.attr("transform", "translate(" + $1.left + "," + $1.top + ")")
snippet nest
d3.nest()
.key(${1})
.entries(${2})
snippet scale
d3.scale.linear()
.domain(${1})
.range(${2})
#NODE -------------------------------------------------
snippet #!
#!/usr/bin/env node
# module exports
snippet ex
module.exports = ${1};
# require
snippet ne
let ${1} = require('${2:module_name}');
# EventEmitter
snippet on
on('${1:event_name}', (${2:stream}) => {
${3}
});
snippet emit
emit('${1:event_name}', ${2:args});
snippet once
once('${1:event_name}', (${2:stream}) => {
${3}
});
# http. User js function snippet as handler
#http.createServer(${1:handler}).listen(${2:port_number});
snippet http
http.createServer()
.on('request', (request, response) => {
${1:handler}
})
.on('end', () => {
${2:handler}
})
.listen(8124);
# net
snippet net
net.createServer( (${1:socket}) => {
${1}.on('data', ('data') => {
${2}
]});
${1}.on('end', () => {
${3}
});
}).listen(${4:8124});
# Stream snippets
snippet pipe
pipe(${1:stream})${2}
# Express snippets
snippet eget
${1:app}.get('${2:route}', ${3:handler});
snippet epost
${1:app}.post('${2:route}', ${3:handler});
snippet eput
${1:app}.put('${2:route}', ${3:handler});
snippet edel
${1:app}.delete('${2:route}', ${3:handler});
# process snippets
snippet stdin
process.stdin
snippet stdout
process.stdout
snippet stderr
process.stderr
snippet pu
${1:array}.push(${2:i})
snippet canvas
let canvas = document.getElementById('tutoriel');
if (canvas.getContext){
let ctx = canvas.getContext('2d');
${0}
}
# innerHTML
snippet inner
innerHTML
snippet inn
innerHTML
snippet ih
innerHTML
snippet tc
${1:node}.textContent = ${2:text}
snippet textcontent
${1:node}.textContent = ${2:text}
# event
snippet ael
${1:element}.addEventListener('${2:click}', function(e) {
//console.log(e.target);
${3}
e.preventDefault();
});
snippet click
${1:element}.addEventListener('click', function(e) {
//console.log(e.target);
${0}
e.preventDefault();
});
snippet addeventlistener
${1:element}.addEventListener('${2:click}', function(e) {
//console.log(e);
${3}
e.preventDefault();
});
snippet addevent
${1:element}.addEventListener('${2:click}', function(e) {
//console.log(e);
${3}
e.preventDefault();
});
snippet rel
${1:element}.removeEventListener("click");
snippet hasatt
//let element = document.getElementById("div1");
if (${1:element}.hasAttribute('${2:align}')) {
$1.setAttribute('$2', '${3:center}');
}
snippet hasattribute
//let element = document.getElementById("div1");
if (${1:element}.hasAttribute('${2:align}')) {
$1.setAttribute('$2', '${3:center}');
}
snippet ha
//let element = document.getElementById("div1");
if (${1:element}.hasAttribute('${2:align}')) {
$1.setAttribute('${4:center}', '${5:center}');
}
snippet has
//let element = document.getElementById("div1");
if (${1:element}.hasAttribute('${2:align}')) {
$1.setAttribute('${4:center}', '${5:center}');
}
snippet geta
let ${1:align} = ${2:div1}.getAttribute('${3:align}');
snippet getattribute
let ${1:align} = ${2:div1}.getAttribute('${3:align}');
snippet ga
let ${1:align} = ${2:div1}.getAttribute('${3:align}');
snippet getattr
let ${1:align} = ${2:div1}.getAttribute('${3:align}');
snippet removeattribute
document.getElementById('${1:id}').removeAttribute('${2:attribute}');
snippet removeattr
document.getElementById('${1:id}').removeAttribute('${2:attribute}');
snippet ra
document.getElementById('${1:id}').removeAttribute('${2:attribute}');
snippet setattribute
let ${1:element} = document.querySelector('${2:button}');
$1.setAttribute('${3:disabled}','${4:disabled}');
snippet setattr
let ${1:element} = document.querySelector('${2:button}');
$1.setAttribute('${3:disabled}','${4:disabled}');
snippet sa
let ${1:element} = document.querySelector('${2:button}';
$1.setAttribute('${3:disabled}','${4:disabled}');
#//---------- VANILLA
#var clonedElement = $('#about').clone()
snippet cloneelement
let clonedElement = document.querySelector('${1:id}').cloneNode(true)
snippet cloneele
let clonedElement = document.querySelector('${1:id}').cloneNode(true)
snippet clone
let clonedElement = document.querySelector('${1:id}').cloneNode(true)
snippet parent
//var parent = element.parentElement;
let parent = document.querySelector('${1:id}').parentNode
snippet nextsibling
let ${1:nextElement } = document.querySelector('${2:id}').nextSibling
snippet nextsib
let ${1:nextElement } = document.querySelector('${2:id}').nextSibling
snippet nextelement
let ${1:nextElement } = document.querySelector('${2:id}').nextSibling
snippet nextele
let ${1:nextElement } = document.querySelector('${2:id}').nextSibling
snippet next
let ${1:nextElement } = document.querySelector('${2:id}').nextSibling
snippet prevelement
//return the id of the previous element
let ${1:prevElement} = document.querySelector('${2:.class}').previousSibling.id
snippet prevele
//return the id of the previous element
let ${1:prevElement} = document.querySelector('${2:.class}').previousSibling.id
snippet prev
//return the id of the previous element
let ${1:prevElement} = document.querySelector('${2:.class}').previousSibling.id
snippet createelement
let ${1:newDiv} = document.createElement('${2:div}')
$1.appendChild(${3:div});
snippet ce
let ${1:newDiv} = document.createElement('${2:div}')
$1.appendChild(${3:div});
snippet ac
//document.body.appendChild('div');
let ${1:newDiv} = document.createElement('${2:div}')
$1.appendChild(${3:div});
snippet appendchild
//document.body.appendChild('div');
let ${1:newDiv} = document.createElement('${2:div}')
$1.appendChild(${3:div});
snippet setAttribute
document.querySelector('${1:img}').setAttribute('${2:alt}', '${3:My image}')
snippet append
//document.getElementById('$1').innerHTML += '<p>$2</p>';
let ${1:varEle} = document.querySelector(${1:container}).innerHTML += '<p>${2:more content}</p>';
snippet appendContent
//document.getElementById('$1').innerHTML += '<p>$2</p>';
let ${1:varEle} = document.querySelector(${1:container}).innerHTML += '<p>${2:more content}</p>';
snippet appendtext
//document.getElementById('$1').innerHTML += '<p>$2</p>';
let ${1:varEle} = document.querySelector(${1:container}).innerHTML += '${2:more content}';
snippet empty
//document.getElementById('${1:container}').innerHTML = null;
let ${1:remove} = document.querySelector(${1:.class}).textContent = null
snippet remove
let ${1:remove} = document.querySelector('${2:class}')
$1.parentNode.removeChild($1);
snippet rm
let ${1:remove} = document.querySelector('${2:class}')
$1.parentNode.removeChild($1);
snippet classlist
${3:div}.classList.${4:add|remove|contain|toggle}('${3:class}')
snippet classr
${1:div}.classList.remove('${2:class}')
snippet classlistr
${1:div}.classList.remove('${2:class}')
snippet cla
${1:div}.classList.add('${2:class}')
snippet claa
${1:div}.classList.add('${2:class}')
snippet addclass
${1:div}.classList.add('${2:class}')
snippet classa
${1:div}.classList.add('${2:class}')
snippet contains
${1:div}.classList.contains('${2:class}')
snippet classc
${1:div}.classList.contains('${2:class}')
snippet classt
${1:div}.classList.toggle('${2:visible, i < 10}')
snippet toggle
${1:div}.classList.toggle('${2:visible, i < 10}')
snippet next
let nextElement = ${1:document}.getElementById('${2:wrap}').nextSibling
snippet get
let httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = function (data) {
// code
}
httpRequest.open('GET', ${1:url})
httpRequest.send()
snippet post
var httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = function (data) {
// code
}
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
httpRequest.open('POST', ${1:url})
httpRequest.send('${2:var}=' + encodeURIComponent($2))
snippet json
// jQuery
//$.getJSON('//openexchangerates.org/latest.json?callback=?', function (data) {
// // code
//})
//vanilla
function success(data) {
// code
}
var scr = document.createElement('script')
scr.src = '${1://openexchangerates.org/latest.json?callback=formatCurrency}'
document.body.appendChild(scr)
snippet getJson
// jQuery
//$.getJSON('//openexchangerates.org/latest.json?callback=?', function (data) {
// // code
//})
//vanilla
function success(data) {
// code
}
var scr = document.createElement('script')
scr.src = '${1://openexchangerates.org/latest.json?callback=formatCurrency}'
document.body.appendChild(scr)
snippet si
setInterval(function () {
${1}
}, 1000);//1s
snippet st
setTimeout(function () {
${1}
}, 1000);//1s
snippet cli
clearInterval(${1:function name})
snippet closure
circularLoop(init) => {
let current = init;
return function() {
currnet
}
}
snippet module
//https://toddmotto.com/mastering-the-module-pattern/#revealing-module-pattern
let ${1:Module} = ( () => {
let data = { name : 'Xavier'}
let private${2:Method} = () => {
// private
};
let ${3:someMethod} = () => {
// public
console.log(this.data)
};
let ${4:anotherMethod } = () => {
// public
};
//return an object
return {
$3 : $3,
$4 : $4,
data : data.name
};
})();
//$1.$3()
//$1.$4()
snippet one
//http://codeblog.cz/vanilla/events.html#delegate-event
${1:el}.addEventListener('click', function(e) {
//- remove the event
event.target.removeEventListener(e.type, arguments.callee);
});
snippet trigger
//http://codeblog.cz/vanilla/events.html#delegate-event
//trigger the event attached to the element
${1:el}.dispatchEvent(new Event('click'));
snippet after
target.after(${1:el});
snippet prev
var prev = element.previousElementSibling;
snippet un
undefined
#jquery
snippet jajax
$.ajax({
url: '${1:mydomain.com/url}',
type: '${2:POST}',
dataType: '${3:xml/html/script/json}',
data: $.param( $('${4:Element or Expression}') ),
complete: function (jqXHR, textStatus) {
${5:// callback}
},
success: function (data, textStatus, jqXHR) {
${6:// success callback}
},
error: function (jqXHR, textStatus, errorThrown) {
${0:// error callback}
}
});
snippet jajax-complete
${1:obj}.ajaxComplete(function (${1:e}, xhr, settings) {
${0:// callback}
});
snippet jajax-error
${1:obj}.ajaxError(function (${1:e}, xhr, settings, thrownError) {
${2:// error callback}
});
${0}
snippet jajax-get
$.get('${1:mydomain.com/url}',
${2:{ param1: value1 },}
function (data, textStatus, jqXHR) {
${0:// success callback}
}
);
snippet jajax-post
$.post('${1:mydomain.com/url}',
${2:{ param1: value1 },}
function (data, textStatus, jqXHR) {
${0:// success callback}
}
);
$.ajaxPrefilter(function (${1:options}, ${2:originalOptions}, jqXHR) {
${0: // Modify options, control originalOptions, store jqXHR, etc}
});
snippet jajax-send
${1:obj}.ajaxSend(function (${1:request, settings}) {
${2:// error callback}
});
${0}
snippet jajax-setup
$.ajaxSetup({
url: "${1:mydomain.com/url}",
type: "${2:POST}",
dataType: "${3:xml/html/script/json}",
data: $.param( $("${4:Element or Expression}") ),
complete: function (jqXHR, textStatus) {
${5:// callback}
},
success: function (data, textStatus, jqXHR) {
${6:// success callback}
},
error: function (jqXHR, textStatus, errorThrown) {
${0:// error callback}
}
});
snippet jajaxStart
$.ajaxStart(function () {
${1:// handler for when an AJAX call is started and no other AJAX calls are in progress};
});
${0}
snippet jajaxStop
$.ajaxStop(function () {
${1:// handler for when all AJAX calls have been completed};
});
${0}
snippet jajaxSuccess
$.ajaxSuccess(function (${1:e}, xhr, settings) {
${2:// handler for when any AJAX call is successfully completed};
});
${0}
snippet jandSelf
${1:obj}.andSelf()
snippet janim
${1:obj}.animate({${2:param1: value1, param2: value2}}, ${3:speed})
snippet janimate
${1:obj}.animate({${2:param1: value1, param2: value2}}, ${3:speed})
snippet jappend
${1:obj}.append('${2:Some text <b>and bold!</b>}')
snippet jappendTo
${1:obj}.appendTo('${2:selector expression}')
snippet jattr
${1:obj}.attr('${2:attribute}', '${3:value}')
snippet jattr-multiple
${1:obj}.attr({'${2:attr1}': '${3:value1}', '${4:attr2}': '${5:value2}'})
snippet jbefore
${1:obj}.before('${2:Some text <b>and bold!</b>}')
snippet jbind
${1:obj}.bind('${2:event name}', function (${3:e}) {
${0:// event handler}
});
snippet jblur
${1:obj}.blur(function (${2:e}) {
${0:// event handler}
});
snippet jcallbacks
$.Callbacks()
snippet jadd-callbacks
${1:callbacks}.add(${2:callbacks})
snippet jdisable
${1:callbacks}.disable()
snippet jempty-callback
${1:callbacks}.empty()
snippet jfire-callback
${1:callbacks}.fire(${2:args})
snippet jfired-callback
${1:callbacks}.fired()
snippet jfirew-callback
${1:callbacks}.fireWith(${2:this}, ${3:args})
snippet jhas-callback
${1:callbacks}.has(${2:callback})
snippet jlock-callback
${1:callbacks}.lock()
snippet jlocked-callback
${1:callbacks}.locked()
snippet jrem-callback
${1:callbacks}.remove(${2:callbacks})
snippet jchange
${1:obj}.change(function (${2:e}) {
${0:// event handler}
});
snippet jchildren
${1:obj}.children('${2:selector expression}')
snippet jclearQueue
${1:obj}.clearQueue(${2:'queue name'})
snippet jclick
${1:obj}.click(function (${2:e}) {
${0:// event handler}
});
snippet jclone
${1:obj}.clone()
snippet jcontains
$.contains(${1:container}, ${0:contents});
snippet jcss
${1:obj}.css('${2:attribute}', '${3:value}')
snippet jcsshooks
$.cssHooks['${1:CSS prop}'] = {
get: function (elem, computed, extra) {
${2: // handle getting the CSS property}
},
set: function (elem, value) {
${0: // handle setting the CSS value}
}
};
snippet jcss-multiple
${1:obj}.css({${2:attribute1}: '${3:value1}', ${4:attribute2}: '${5:value2}'})
snippet jdeferred
$.Deferred()
snippet jdeferred-always
${1:deferred}.always(${2:callbacks})
snippet jDdone
${1:deferred}.done(${2:callbacks})
snippet jDfail
${1:deferred}.fail(${2:callbacks})
snippet jDisrej
${1:deferred}.isRejected()
snippet jDisres
${1:deferred}.isResolved()
snippet jDnotify
${1:deferred}.notify(${2:args})
snippet jDnotifyw
${1:deferred}.notifyWith(${2:this}, ${3:args})
snippet jDpipe
${1:deferred}.then(${2:doneFilter}, ${3:failFilter}, ${4:progressFilter})
snippet jDprog
${1:deferred}.progress(${2:callbacks})
snippet jDprom
${1:deferred}.promise(${2:target})
snippet jDrej
${1:deferred}.reject(${2:args})
snippet jDrejw
${1:deferred}.rejectWith(${2:this}, ${3:args})
snippet jDres
${1:deferred}.resolve(${2:args})
snippet jDresw
${1:deferred}.resolveWith(${2:this}, ${3:args})
snippet jDstate
${1:deferred}.state()
snippet jDthen
${1:deferred}.then(${2:doneCallbacks}, ${3:failCallbacks}, ${4:progressCallbacks})
snippet jDwhen
$.when(${1:deferreds})
snippet jdata
.data(${1:obj})
snippet jdataa
$.data('${1:selector expression}', '${2:key}'${3:, 'value'})
snippet jdblclick
${1:obj}.dblclick(function (${2:e}) {
${0:// event handler}
});
snippet jdelay
.delay('${1:slow/400/fast}'${2:, 'queue name'})
snippet jdele
${1:obj}.delegate('${2:selector expression}', '${3:event name}', function (${4:e}) {
${0:// event handler}
});
snippet jdequeue
${1:obj}.dequeue(${2:'queue name'})
snippet jdeqq
$.dequeue('${1:selector expression}'${2:, 'queue name'})
snippet jdetach
${1:obj}.detach('${2:selector expression}')
snippet jdie
${1:obj}.die(${2:event}, ${3:handler})
snippet jeach
${1:obj}.each(function (index) {
${0:this.innerHTML = this + " is the element, " + index + " is the position";}
});
snippet jel
$('<${1}/>'${2:, {}})
snippet jel-trim
$.trim('${1:string}')
snippet jel-empty
${1:obj}.empty()
snippet jel-end
${1:obj}.end()
snippet jel-eq
${1:obj}.eq(${2:element index})
snippet jel-error
${1:obj}.error(function (${2:e}) {
${0:// event handler}
});
snippet jeventsmap
{
:f${0}
}
snippet jextend
$.extend(${1:true, }${2:target}, ${3:obj})
snippet jfadein
.fadeIn('${1:slow/400/fast}')
snippet jfadein-callback
${1:obj}.fadeIn('slow/400/fast', function () {
${0:// callback};
});
snippet jfadeout
.fadeOut('${1:slow/400/fast}')
snippet jfadeOut
${1:obj}.fadeOut('${2:slow/400/fast}')
snippet jfadeout-callback
${1:obj}.fadeOut('slow/400/fast', function () {
${0:// callback};
});
snippet jfadeTo
.fadeTo('${1:slow/400/fast}', ${2:0.5})
snippet jfadeto-callback
${1:obj}.fadeTo('slow/400/fast', ${2:0.5}, function () {
${0:// callback};
});
snippet jfilter
.filter('${2:selector expression}')
snippet jfiltert
${1:obj}.filter(function (${2:index}) {
${3}
})
snippet jfind
.find('${1:selector expression}')
snippet jfocus
.focus(function (${1:e}) {
${0:// event handler}
});
snippet jfocusIn
${1:obj}.focusIn(function (${2:e}) {
${0:// event handler}
});
snippet jfocusOut
${1:obj}.focusOut(function (${2:e}) {
${0:// event handler}
});
snippet jget
${1:obj}.get(${2:element index})
snippet jgetJSON
$.getJSON('${1:mydomain.com/url}',
${2:{ param1: value1 },}
function (data, textStatus, jqXHR) {
${0:// success callback}
}
);
snippet jgetScript
$.getScript('${1:mydomain.com/url}', function (script, textStatus, jqXHR) {
${0:// callback}
});
snippet jgrep
$.grep(${1:array}, function (item, index) {
${2}
}${0:, true});
snippet jhasclass
.hasClass('${2:className}');
snippet jhasClass
.hasClass('${2:className}');
snippet jhasdata
$.hasData('${0:selector expression}');
snippet jhasData
$.hasData('${0:selector expression}');
snippet jheight
.height(${2:integer});
snippet jh
$('${1}').hide();
snippet jhide
$('${1}').hide();
snippet jhide-callback
${1:obj}.hide(${2:200/400/600}, function () {
${0:// callback}
});
snippet jhover
${1:obj}.hover(function (${2:e}) {
}, function ($2) {
});
snippet jhtml
.html('${2:Some text <b>and bold!</b>}');
snippet jinArray
$.inArray(${1:value}, ${0:array});
snippet jinsertAfter
${1:obj}.insertAfter('${2:selector expression}')
snippet jinsertBefore
${1:obj}.insertBefore('${2:selector expression}')
snippet jis
${1:obj}.is('${2:selector expression}')
snippet jisArray
$.isArray(${1:obj})
snippet jisEmptyObject
$.isEmptyObject(${1:obj})
snippet jisFunction
$.isFunction(${1:obj})
snippet jisNUmeric
$.isNumeric(${1:value})
snippet jisPlainObject
$.isPlainObject(${1:obj})
snippet jisWindow
$.isWindow(${1:obj})
snippet jisXMLDoc
$.isXMLDoc(${1:node})
snippet jjj
$('${1:selector}')
snippet jkdown
${1:obj}.keydown(function (${2:e}) {
${0:// event handler}
});
snippet jkpress
${1:obj}.keypress(function (${2:e}) {
${0:// event handler}
});
snippet jkup
${1:obj}.keyup(function (${2:e}) {
${0:// event handler}
});
snippet jlast
${1:obj}.last('${1:selector expression}')
snippet jlive
${1:obj}.live('${2:events}', function (${3:e}) {
${0:// event handler}
});
snippet jload
${1:obj}.load(function (${2:e}) {
${0:// event handler}
});
snippet jloadf
${1:obj}.load('${2:mydomain.com/url}',
${2:{ param1: value1 },}
function (responseText, textStatus, xhr) {
${0:// success callback}
}
});
snippet jmakearray
$.makeArray(${0:obj});
snippet jmap
${1:obj}.map(function (${2:index}, ${3:element}) {
${0:// callback}
});
snippet jmapp
$.map(${1:arrayOrObject}, function (${2:value}, ${3:indexOrKey}) {
${0:// callback}
});
snippet jmerge
$.merge(${1:target}, ${0:original});
snippet jmdown
${1:obj}.mousedown(function (${2:e}) {
${0:// event handler}
});
snippet jmenter
${1:obj}.mouseenter(function (${2:e}) {
${0:// event handler}
});
snippet jmleave
${1:obj}.mouseleave(function (${2:e}) {
${0:// event handler}
});
snippet jmmove
${1:obj}.mousemove(function (${2:e}) {
${0:// event handler}
});
snippet jmout
${1:obj}.mouseout(function (${2:e}) {
${0:// event handler}
});
snippet jmover
${1:obj}.mouseover(function (${2:e}) {
${0:// event handler}
});
snippet jmup
${1:obj}.mouseup(function (${2:e}) {
${0:// event handler}
});
snippet jnext
${1:obj}.next('${2:selector expression}')
snippet jnexta
${1:obj}.nextAll('${2:selector expression}')
snippet jnextu
${1:obj}.nextUntil('${2:selector expression}'${3:, 'filter expression'})
snippet jnot
${1:obj}.not('${2:selector expression}')
snippet joff
${1:obj}.off('${2:events}', '${3:selector expression}'${4:, handler})
snippet joffset
${1:obj}.offset()
snippet joffsetp
${1:obj}.offsetParent()
snippet jon
${1:obj}.on('${2:events}', '${3:selector expression}', function (${4:e}) {
${0:// event handler}
});
snippet jone
${1:obj}.one('${2:event name}', function (${3:e}) {
${0:// event handler}
});
snippet jouterh
${1:obj}.outerHeight()
snippet jouterw
${1:obj}.outerWidth()
snippet jparam
$.param(${1:obj})
snippet jparent
${1:obj}.parent('${2:selector expression}')
snippet jparents
${1:obj}.parents('${2:selector expression}')
snippet jparent-until
${1:obj}.parentsUntil('${2:selector expression}'${3:, 'filter expression'})
snippet jparseJSON
$.parseJSON(${1:data})
snippet jparseXML
$.parseXML(${1:data})
snippet jpositioon
${1:obj}.position()
snippet jprepend
${1:obj}.prepend('${2:Some text <b>and bold!</b>}')
snippet jprependTo
${1:obj}.prependTo('${2:selector expression}')
snippet jprev
${1:obj}.prev('${2:selector expression}')
snippet jprevAll
${1:obj}.prevAll('${2:selector expression}')
snippet jprevUntil
${1:obj}.prevUntil('${2:selector expression}'${3:, 'filter expression'})
snippet jpromise
${1:obj}.promise(${2:'fx'}, ${3:target})
snippet jprop
${1:obj}.prop('${2:property name}')
snippet jproxy
$.proxy(${1:function}, ${2:this})
snippet jpushstack
${1:obj}.pushStack(${2:elements})
snippet jqueue
${1:obj}.queue(${2:name}${3:, newQueue})
snippet jqueuee
$.queue(${1:element}${2:, name}${3:, newQueue})
snippet jready
$(function () {
${0}
});
snippet jdocument
$(document).ready(function() {
${0}
});
snippet jremove
${1:obj}.remove()
snippet jremoveAttr
${1:obj}.removeAttr('${2:attribute name}')
snippet jremoveClass
${1:obj}.removeClass('${2:class name}')
snippet jremoveData
${1:obj}.removeData('${2:key name}')
snippet jremoveData
$.removeData(${1:element}${2:, 'key name}')
snippet jremoveProp
${1:obj}.removeProp('${2:property name}')
snippet jreplaceAll
${1:obj}.replaceAll(${2:target})
snippet jreplaceWith
${1:obj}.replaceWith(${2:content})
snippet jreset
${1:obj}.reset(function (${2:e}) {
${0:// event handler}
});
snippet jresize
${1:obj}.resize(function (${2:e}) {
${0:// event handler}
});
snippet jscroll
${1:obj}.scroll(function (${2:e}) {
${0:// event handler}
});
snippet jscrollLeft
${1:obj}.scrollLeft(${2:value})
snippet jscrollTop
${1:obj}.scrollTop(${2:value})
snippet jslideDown
${1:obj}.slideDown('${2:slow/400/fast}')
snippet jslideDown-callback
${1:obj}.slideDown('${2:slow/400/fast}', function () {
${0:// callback};
});
snippet jselect
${1:obj}.select(function (${2:e}) {
${0:// event handler}
});
snippet jserialize
${1:obj}.serialize()
snippet jserialize-array
${1:obj}.serializeArray()
snippet js
${1:obj}.show('${2:slow/400/fast}')
snippet jshow
${1:obj}.show('${2:slow/400/fast}')
snippet jshow-callback
${1:obj}.show('${2:slow/400/fast}', function () {
${0:// callback}
});
snippet jsiblings
${1:obj}.siblings('${2:selector expression}')
snippet jsize
${1:obj}.size()
snippet jslice
${1:obj}.slice(${2:start}${3:, end})
snippet jslideToggle
${1:obj}.slideToggle('${2:slow/400/fast}')
snippet jstop
${1:obj}.stop('${2:queue}', ${3:false}, ${4:false})
snippet jsubmit
${1:obj}.submit(function (${2:e}) {
${0:// event handler}
});
snippet jslideUp
${1:obj}.slideUp('${2:slow/400/fast}')
snippet jslideUp-callback
${1:obj}.slideUp('${2:slow/400/fast}', function () {
${0:// callback};
});
snippet jtext
${1:obj}.text(${2:'some text'})
snippet jthis
$(this)
snippet jto-array
${0:obj}.toArray()
snippet jtoggle
${1:obj}.toggle(function (${2:e}) {
${3:// event handler}
}, function ($2) {
${4:// event handler}
});
${0}
snippet jtoggleclass
${1:obj}.toggleClass('${2:class name}');
snippet jtogglesh
${1:obj}.toggle('${2:slow/400/fast}');
snippet jtriger
${1:obj}.trigger('${2:event name}');
snippet jtriggerHandler
${1:obj}.triggerHandler('${2:event name}');
snippet j$trim
$.trim(${1:str});
snippet j$type
$.type(${1:obj});
snippet junbind
${1:obj}.unbind('${2:event name}');
snippet jundele
${1:obj}.undelegate(${2:selector expression}, ${3:event}, ${4:handler})
snippet juniq
$.unique(${1:array});
snippet junload
${1:obj}.unload(function (${2:e}) {
${0:// event handler}
});
snippet junwrap
${1:obj}.unwrap();
snippet jval
${1:obj}.val('${2:text}');
snippet jwidth
${1:obj}.width(${2:integer});
snippet jwrap
${1:obj}.wrap('${2:&lt;div class="extra-wrapper"&gt;&lt;/div&gt;}');
snippet jaddclass
${1:obj}.addClass('${1:class}');
snippet jac
${1:obj}.addClass('${1:class}');
snippet jremoveClass
${1:obj}.removeClass('${1:class}');
snippet jrc
${1:obj}.removeClass('${1:class}');
#end jquery
#https://gist.github.com/xavierartot/a29b1d65bc81f8e7f3ff8a9958635a72
snippet ri
import ${1:React} from '${0:react}';
snippet ir
import React from 'react';
snippet ird
import ReactDOM from 'react-dom';
snippet rid
import ${1:ReactDOM } from '${0:react-dom}';
snippet cdm
componentDidMount() {
${1}
}
snippet cdup
componentDidUpdate(prevProps, prevState) {
${1}
}
snippet cwm
componentWillMount() {
${1}
}
snippet cwr
componentWillReceiveProps(nextProps) {
${1}
}
snippet cwun
componentWillUnmount() {
${1}
}
snippet cwu
componentWillUpdate(nextProps, nextState) {
${1}
}
snippet fup
forceUpdate(${1:callback});
snippet dp
static defaultProps = {
${1}: ${2},
}
snippet st
this.state = {
${1}: ${2},
}
snippet rts
this.state = {
${1}: ${2},
}
snippet pt
static propTypes = {
${1}: React.PropTypes.${2:type},
}
snippet rcc
import React from 'react';
class ${1:ClassName} extends React.Component {
render() {
return (
<div>
${0:}
</div>
);
}
}
export default $1;
snippet rcf
import React from 'react';
function ${1:ClassName} (props) {
return (
<div>
${0:}
</div>
);
}
export default $1;
snippet rsl
export ${1:ClassName} = (props) => {
return (
<div ClassName='$1'>
${0:}
</div>
);
}
snippet rslf
export const ${1:ClassName} = (props) => {
return (
<div ClassName='$1'>
${0:}
</div>
);
}
snippet rfsl
export const ${1:ClassName} = (props) => {
return (
<div ClassName='$1'>
${0:}
</div>
);
}
snippet rdr
ReactDOM.render(${1}, ${2})
snippet ercc
export default class ${1:ClassName} extends React.Component {
render() {
return (
<div>
${0:}
</div>
);
}
}
snippet ctor
constructor() {
super();
${1:this}
}
snippet ren
render() {
return (
<div>
${0:}
</div>
);
}
snippet rss
this.setState({
${1}: ${2}
});
snippet sst
this.setState({
${1}: ${2}
});
snippet scu
shouldComponentUpdate(nextProps, nextState) {
${1}
}
snippet prp i
this.props.${1}
snippet rp
this.props.${1}
snippet ste i
this.state.${1}
snippet rs
this.state.${1}
snippet rpt
${1}.propTypes = {
${2}: React.PropTypes.${3:string|number}.${4:isRequired}
}
snippet rrr
render() {
return (
<div>
${0:jsx}
</div>
);
}
snippet rcl
class ${1:MyComponent} extends React.Component {
render() {
return (
<div>
${2:jsx}
</div>
);
}
snippet rc
{/* ${0} */}
snippet rcs
constructor() {
super();
${1:this}
}
snippet ref
ref={ (${1:input}) => this.${2:nameVar} = $1}
snippet roc
onClick={${1:this.}} ${0}
snippet ros
onSubmit={${1:this.}} ${0}
snippet roh
onHover={${1:this.}} ${0}
snippet rcn
className="${1:name}"
snippet rb
this.${1:method} = this.$1.bind(this);
snippet rbind
this.${1:method} = this.$1.bind(this);
snippet red
export default ${1};
snippet re
export default ${1};
snippet rfj
function(props) {
return (
<div>
{${1:props.}}
</div>
);
}
snippet rfi
function(props) {
return (
<img className='${1:class}'
src={${2:props.path}}
alt={${3:props.text}} />
</div>
);
}
snippet rd
<div className='${1:class}'>{${2:props.}}</div>
snippet rr
return (
<div>
{${0:props.}}
</div>
);
snippet rul
<ul className='${1:name class}'>
{
{${0:props.}
}
</ul>
snippet redc
export default class ${1} extends React.Component {
constructor(props) {
super(props);
this.state = {
${2}: ''
}
}
render() {
return (
<div></div>
);
}
}
snippet recc
export default class ${1} extends React.Component {
constructor(props) {
super(props);
this.state = {
${2}: ''
}
}
render() {
return (
<div></div>
);
}
}
snippet redcc
export default class ${1} extends React.Component {
constructor(props) {
super(props);
this.state = {
${2}: ''
}
}
render() {
return (
<div></div>
);
}
}
snippet ep
e.preventDefault()
snippet epd
e.preventDefault()
snippet rec
import React from 'react';
export const ${1:Name} = props => {
return {
render(
<div className="list$1">
<ul>
{this.props.map( element => <li key={element.toString()}>element</li>}
</ul>
</div>
)
}
}
snippet rm=>
${1:function_name} = (${2}) => {
${0}
}
snippet m=>
${1:function_name} = (${2}) => {
${0}
}
snippet rf
${1:function_name} = (${2:e}) => {
${0}
}
snippet const
const ${1} = ${0}
snippet let
let ${1} = ${0}
snippet im "import xyz from 'xyz'"
import ${1} from '${2:$1}';
snippet imas "import * as xyz from 'xyz'"
import * as ${1} from '${2:$1}';
snippet imp "import { member } from 'xyz'"
import { ${1} } from '${2}';
snippet clax
class ${1} extends ${2} {
${0:${VISUAL}}
}
snippet clac
class ${1} {
constructor(${2}) {
${0}
}
}
snippet foro "for (const prop of object}) { ... }"
for (const ${1:prop} of ${2:object}) {
${0:$1}
}
# Generator
snippet fun*
function* ${1:function_name}(${2}) {
${0}
}
snippet c=>
const ${1:function_name} = (${2}) => {
${0}
}
snippet l=>
let ${1:function_name} = (${2}) => {
${0}
}
snippet caf
const ${1:function_name} = (${2}) => {
${0}
}
snippet =>(
(${1}) => {
${0}
}
snippet =>{
(${1}) => {
${0}
}
snippet =>i
${1} => ${0}
snippet af
(${1}) => {
${0}
}
snippet afi
${1} => ${0}
snippet sym
const ${1} = Symbol('${0}');
snippet ed
export default ${0}
snippet $
${${1}}${0}
snippet map
${1}.map( (element) => {
return element${0}
});
snippet filter
${1}.filter( (element) => {
element${0}
});
snippet sort
${1}.sort( (element => ) {
element${0}
});
snippet reduce
${1}.reduce((previousVal, currentVal) => {
previousVal + currentVal${0}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment