SnipJS

A collection of common javascript statement snippets for faster development in Visual Studio Code.

Feel free to install the extension from VS Code or from here.

See the demo.

---

• Assignments
• Functions
• Conditions
• Validations
• DOM manipulations
• Console
• Destructuring
• Others

---

Assignments

la => let assignment

let ${1:name} = ${2:value}

va => var assignment

var ${1:name} = ${2:value}

ca => const assignment

const ${1:name} = ${2:value}

aa => array assignment

let ${1:name} = [${2:value1}, ${3:value2}]

oa => object assignment

 let ${1:name} = {
     "${2:key}": ${3:value}
 }

---

Functions

af => arrow function

const ${1:name} = (${2:param}) => {

}

nf => named function

function ${1:name} (${2:param}) {

}

---

Conditions

ec => equal condition

${1:value1} === ${2:value2}

nec => not equal condition

${1:value1} !== ${2:value2}

gtc => greater than condition

${1:value1} > ${2:value2}

ltc => less than condition

${1:value1} < ${2:value2}

getc => greater equal than condition

${1:value1} >= ${2:value2}

letc => less equal than condition

${1:value1} <= ${2:value2}

oc => or condition

${1:condition1} || ${2:condition2}

ac => and condition

${1:condition1} && ${2:condition2}

co => condition operator

let ${1:name} = ${2:condition} ? ${3:value1} : ${4:value2}

---

Validations

zlv => zero length validation

${1:value}.length === 0

plv => positive length validation

${1:value}.length > 0

esv => empty string validation

${1:value} === ""

nesv => not empty string validation

${1:value} !== ""

nv => null validation

${1:value} === null

nnv => not null validation

${1:value} !== null

uv => undefined validation

typeof ${1:value} === "undefined"

nuv => not undefined validation

typeof ${1:value} !== "undefined"

iov => instance of validation

${1:value1} instanceof ${2:value2}

av => array validation

Array.isArray(${1:value}) || ${1:value}.length

ov => object validation

Object.keys(${1:value}).length === 0 && ${1:value}.constructor === Object

cv => contains validation

${1:value1}.indexOf(${2:value2}) > -1

dcv => doesn't contain validation

${1:value1}.indexOf(${2:value2}) === -1

---

DOM manipulations

ael => add event listener

document.addEventListener("${1:event}", (${2:param}) => {

})

rel => remove event listener

document.removeEventListener("${1:event}", (${2:param}) => {

})

cel => create element

document.createElement("${1:value}")

ach => append child

document.appendChild("${1:value}")

rch => remove child

document.removeChild("${1:value}")

gei => get element by id

document.getElementById("${1:value}")

gec => get element by class name

document.getElementsByClassName("${1:value}")

get => get element by tag name

document.getElementsByTagName("${1:value}")

qs => query selector

document.querySelector("${1:value}")

qsa => query selector all

document.querySelectorAll("${1:value}")

---

Console

cl => console log

console.log(${1:value})

cw => console warn

console.warn(${1:value})

ce => console error

console.error(${1:value})

---

Destructuring

od => object destructuring

let { ${1:value1} } = ${2:value2}

ad => array destructuring

let [${1:value1}, ${2:value2}] = ${3:value3}

---

Others

rbt => react bind this

this.${1:name} = this.${1:name}.bind(this)

car => clone array

let ${1:name} = ...${2:value}

ph1 => placeholder 1

`${${1:value}}`

ph2 => placeholder 2

`${${1:value1}} ${${2:value2}}`

ph3 => placeholder 3

`${${1:value1}} ${${2:value2}} ${${3:value3}}`

---

Demo

These are the results after executing each and every snippet from the collection.

// Assignments

let name = value // la
var name = value // va
const name = value // ca
let name = { // oa
   "key": value
}
let name = [value1, value2] // aa

// Functions

const name = (param) => { // af
    
}
function name (param) { // nf
    
}

// Conditions 

value1 === value2 // ec
value1 !== value2 // nec
value1 > value2 // gtc
value1 < value2 // ltc
value1 >= value2 // getc
value1 <= value2 // letc
condition1 || condition2 // oc
condition1 && condition2 // ac
let name = condition ? value1 : value2 // co

// Validations

value.length === 0 // zlv
value.length > 0 // plv
value === "" // esv
value !== "" // nesv
value === null // nv
value !== null // nnv
typeof value === "undefined" // uv
typeof value !== "undefined" // nuv
value1 instanceof value2 // iov
Array.isArray(value) || value.length // av
Object.keys(value).length === 0 && value.constructor === Object // ov
value1.indexOf(value2) > -1 // cv
value1.indexOf(value2) === -1 // dcv

// DOM manipulations

document.addEventListener("event", (param) => { // ael
    
})
document.removeEventListener("event", (param) => { // rel
    
})
document.createElement("value") // cel
document.appendChild("value") // ach
document.removeChild("value") // rch
document.getElementById("value") // gei
document.getElementsByClassName("value") // gec
document.getElementsByTagName("value") // get
document.querySelector("value") // qs
document.querySelectorAll("value") // qsa

// Console 

console.log(value) // cl
console.warn(value) // cw
console.error(value) // ce

// Destructuring

let { value1 } = value2 // od
let [value1, value2] = value3 // ad

// Others 

// Specially for ReactJS developers
this.name = this.name.bind(this) // rbt
let name = ...value // car
`${value}` // ph1
`${value1} ${value2}` // ph2
`${value1} ${value2} ${value3}` // ph3

---

Questions, problems or something else?

There is a bug? Leave an issue on the issues page or send a pull request with new features.

For questions, do not hesitate to write me an email - dimitar.dyakov98@gmail.com

Leave a star if you like and find the snippets helpful!

---

Code by Dimitar Dyakov. Copyright 2019