a complete set of Javascript snippets for Visual Studio Code
MIT License
Optinionated set of JS snippets. Originally forked from https://github.com/gaboesquivel/atom-standardjs-snippets, but we've added couple more. Also these are not using special characters because vscode doesn't accept them in the snippets.
A collection of javascript and react snippets for faster JavaScript development in Visual studio Code.
This collection is complementary to atom/language-javascript. It's based on extrabacon/atom-turbo-javascript.
Yes!, no semicolons:
Snippets are optimized to be short and easy to remember. Shortest are the ones you should be using most often. Note that these links work only on github, not on VSCode marketplace:
v⇥
var statementvar ${1:name}
va⇥
var assignmentvar ${1:name} = ${2:value}
l⇥
let statementlet ${1:name}
la⇥
let assignment awaitedlet ${1:name} = await ${2:value}
ly⇥
let yielded assignmentlet ${1:name} = yield ${2:value}
c⇥
const statementconst ${1:name}
cd⇥
const from destructuringconst { ${1:name} } = ${2:value}
ca⇥
const assignment awaitedconst ${1:name} = await ${2:value}
cd⇥
const from destructuring awaitedconst { ${1:name} } = await ${2:value}
cf⇥
const arrow function assignmentconst ${1:name} = (${2:arguments}) => {\n\treturn ${0}\n}
cy⇥
const yielded assignmentconst ${1:name} = yield ${2:value}
i⇥
if statementif (${1:condition}) {
${0}
}
te⇥
ternary statement${1:cond} ? ${2:true} : ${3: false}
ta⇥
ternary assignmentconst ${0} = ${1:cond} ? ${2:true} : ${3: false}
el⇥
else statementelse {
${0}
}
ife⇥
else statementif (${1:condition}) {
${0}
} else {
}
ei⇥
else if statementelse if (${1:condition}) {
${0}
}
fl⇥
for loop (ES6)for (let ${1:i} = 0, ${2:len} = ${3:iterable}.length ${1:i} < ${2:len}; ${1:i}++) {
${0}
}
fi⇥
for in loop (ES6)for (let ${1:key} in ${2:source}) {
if (${2:source}.hasOwnProperty(${1:key})) {
${0}
}
}
fo⇥
for of loop (ES6)for (const ${1:key} of ${2:source}) {
${0}
}
wl⇥
while loopwhile (${1:condition}) {
${0}
}
wid⇥
while iteration decrementinglet ${1:array}Index = ${1:array}.length
while (${1:array}Index--) {
${0}
}
tc⇥
try/catchtry {
${0}
} catch (${1:err}) {
}
tf⇥
try/finallytry {
${0}
} finally {
}
tcf⇥
try/catch/finallytry {
${0}
} catch (${1:err}) {
} finally {
}
fan⇥
anonymous functionfunction (${1:arguments}) {${0}}
fn⇥
named functionfunction ${1:name}(${2:arguments}) {
${0}
}
asf⇥
async functionasync function (${1:arguments}) {
${0}
}
aa⇥
async arrow function withasync (${1:arguments}) => {
${0}
}
iife⇥
immediately-invoked function expression (IIFE);(function (${1:arguments}) {
${0}
})(${2})
aiife⇥
async immediately-invoked function expressionvery useful when you don't have top level await(node 16 and lower)
;(async (${1:arguments}) => {
${0}
})(${2})
af⇥
arrow function (ES6)(${1:arguments}) => ${2:statement}
afi⇥
arrow function identity;(v) => v
fd⇥
arrow function with destructuring({${1:arguments}}) => ${2:statement}
fdr⇥
arrow function with destructuring returning destructured({${1:arguments}}) => ${1:arguments}
f⇥
arrow function with body (ES6)(${1:arguments}) => {
${0}
}
fr⇥
arrow function with return (ES6)(${1:arguments}) => {
return ${0}
}
fro⇥
arrow function with single returned object(${1:arguments}) => ({
${0}
})
gf⇥
generator function (ES6)function* (${1:arguments}) {
${0}
}
gfn⇥
named generator function (ES6)function* ${1:name}(${1:arguments}) {
${0}
}
fe⇥
forEach loop${1:iterable}.forEach((${2:item}) => {
${0}
})
map⇥
map function${1:iterable}.map((${2:item}) => {
${0}
})
mapsd⇥
map single desctructured argument${1:iterable}.map((${2:item}) => ${2:item})
reduce⇥
reduce function${1:iterable}.reduce((${2:previous}, ${3:current}) => {
${0}
}${4:, initial})
filter⇥
filter function${1:iterable}.filter((${2:item}) => {
${0}
})
find⇥
ES6 find function${1:iterable}.find((${2:item}) => {
${0}
})
every⇥
every function${1:iterable}.every((${2:item}) => {
${0}
})
some⇥
some function${1:iterable}.some((${2:item}) => {
${0}
})
cs⇥
class (ES6)class ${1:name} {
constructor(${2:arguments}) {
${0}
}
}
csx⇥
extend a class (ES6)class ${1:name} extends ${2:base} {
constructor(${2:arguments}) {
super(${2:arguments})
${0}
}
}
m⇥
method (ES6 syntax)${1:method} (${2:arguments}) {
${0}
}
get⇥
getter (ES6 syntax)get ${1:property} () {
${0}
}
set⇥
setter (ES6 syntax)set ${1:property} (${2:value}) {
${0}
}
gs⇥
getter and setter (ES6 syntax)get ${1:property} () {
${0}
}
set ${1:property} (${2:value}) {
}
proto⇥
prototype method${1:Class}.prototype.${2:methodName} = function (${3:arguments}) {
${0}
}
ok
Object.keysObject.keys(${1:obj})
ov
Object.valuesObject.values(${1:obj})
oe
Object.entriesObject.entries(${1:obj})
oc
Object.createObject.create(${1:obj})
oa
Object.assignObject.assign(${1:dest}, ${2:source})
og
Object.getOwnPropertyDescriptorObject.getOwnPropertyDescriptor(${1:dest}, '${2:prop}')
od
Object.definePropertyObject.defineProperty(${1:dest}, '${2:prop}', {
${0}
})
r⇥
returnreturn ${0}
rt⇥
return thisreturn this
rn⇥
return nullreturn null
rf⇥
return arrow functionreturn (${1:arguments}) => ${2:statement}
ro⇥
return new objectreturn {
${0}
}
ra⇥
return new arrayreturn [
${0}
]
rp⇥
return Promise (ES6)return new Promise((resolve, reject) => {
${0}
})
tof⇥
typeof comparisontypeof ${1:source} === '${2:undefined}'
tf⇥
thisthis.
iof⇥
instanceof comparison${1:source} instanceof ${2:Object}
ia⇥
isArrayArray.isArray(${1:source})
pa⇥
Promise.allPromise.all(${1:value})
p⇥
new Promise (ES6)new Promise((resolve, reject) => {
${0}
})
pt⇥
Promise.then${1:promise}.then((${2:value}) => {
${0}
})
pc⇥
Promise.catch${1:promise}.catch(error => {
${0}
})
e⇥
module exportexport ${1:member}
ed⇥
module default exportexport default ${1:member}
edf⇥
module default export functionexport default function ${1:name} (${2:arguments}) {\n\t${0}\n}
ec⇥
module export constexport const ${1:member} = ${2:value}
ef⇥
module export constexport function ${1:member} (${2:arguments}) {\n\t${0}\n}
im⇥
module importimport ${1:*} from '${2:module}'
ia⇥
module import asimport ${1:*} as ${2:name} from '${3:module}'
id⇥
module import destructuringimport { $1 } from '${2:module}'
desc⇥
describedescribe('${1:description}', function () {
${0}
})
dt
describe top leveldescribe('${TM_FILENAME_BASE}', function () {
${0}
})
it⇥
asynchronous "it"it('${1:description}', async () => {
${0}
})
itd⇥
"it" with callbackit('${1:description}', (done) => {
${0}
})
its⇥
"it" synchronousit('${1:description}', () => {
${0}
})
bf⇥
before test suitebefore(function () {
${0}
})
bfe⇥
before each testbeforeEach(function () {
${0}
})
aft⇥
after test suiteafter(function () {
${0}
})
afe⇥
after each testafterEach(function () {
${0}
})
st⇥
setTimeoutsetTimeout(() => {
${0}
}, ${1:delay})
si⇥
setIntervalsetTimeout(() => {
${0}
}, ${1:delay})
sim⇥
setImmediatesetImmediate(() => {
${0}
})
ae⇥
addEventListener${1:document}.addEventListener('${2:event}', ${3:ev} => {
${0}
})
rel⇥
removeEventListener${1:document}.removeEventListener('${2:event}', ${3:listener})
evc
dom event cancel default and propagationev.preventDefault()
ev.stopPropagation()
return false
gi⇥
getElementById${1:document}.getElementById('${2:id}')
gc⇥
getElementsByClassNameArray.from(${1:document}.getElementsByClassName('${2:class}'))
gt⇥
getElementsByTagNameArray.from(${1:document}.getElementsByTagName('${2:tag}'))
qs⇥
querySelector${1:document}.querySelector('${2:selector}')
qsa⇥
querySelectorAllArray.from(${1:document}.querySelectorAll('${2:selector}'))
cdf⇥
createDocumentFragment${1:document}.createDocumentFragment(${2:elem});
cel⇥
createElement${1:document}.createElement(${2:elem});
heac⇥
appendChild${1:document}.appendChild(${2:elem});
herc⇥
removeChild${1:document}.removeChild(${2:elem});
hecla⇥
classList.add${1:document}.classList.add('${2:class}');
hect⇥
classList.toggle${1:document}.classList.toggle('${2:class}');
heclr⇥
classList.remove${1:document}.classList.remove('${2:class}');
hega⇥
getAttribute${1:document}.getAttribute('${2:attr}');
hesa⇥
setAttribute${1:document}.setAttribute('${2:attr}', ${3:value});
hera⇥
removeAttribute${1:document}.removeAttribute('${2:attr}');
cb⇥
Node.js style callbackfunction (err, ${1:value}) {
if (err) throw err
t${0}
}
rq⇥
require a modulerequire('${1:module}')
cr⇥
require and assign a moduleconst ${1:module} = require('${1:module}')
em⇥
export memberexports.${1:name} = ${2:value}
me⇥
module.exportsmodule.exports = ${1:name}
on⇥
attach an event handler${1:emitter}.on('${2:event}', (${3:arguments}) => {
${0}
})
uss⇥
use strict'use strict'
js⇥
JSON StringifyJSON.stringify($0)
jp⇥
JSON ParseJSON.parse($0)
a⇥
awaitawait ${0}
apa⇥
Promise.allawait Promise.all(${1:value})
apm⇥
Promise.all mapawait Promise.all(${1:array}.map((async ${2:value}) => {\n\t${0}\n}))
ast⇥
Promise sleepawait new Promise((r) => setTimeout(r, ${0}))
cl⇥
console.logconsole.log(${0})
cv⇥
console.logconsole.log('${0}:', ${0})
ce⇥
console.errorconsole.error(${0})
cw⇥
console.warnconsole.warn(${0})
cod⇥
console.dirconsole.dir(${0})
Are only enabled in jsx
or tsx
files. If you write your jsx in js
files, you need to copy the react.json
files manually and add it to your custom snippets.
If you're not writing react, including them should not really bother you because they are not short as the regular JS snippets. Also IMHO react is the leading solution for FE apps deserves to be included by default, because any JS dev will have to write some react eventually over the course of his/her careeer. By having them in a single package we can easily make sure --there aren't any conflicts in the trigger prefixes.
These were originally taken from https://github.com/TimonVS/vscode-react-standard because the maintainer wasn't able to publish a new version for months even when there was a considerable flaw in the released version. Below is a list of all available snippets and the triggers of each one.
Trigger | Content |
---|---|
j |
jsx element |
dp |
destructuring of props |
ds |
destructuring of props |
jc |
jsx self-closed element |
jm |
jsx elements map |
jmr |
jsx elements map with return |
rfc |
functional component. Prefer for 99% of new react component |
rfce |
functional component with emotion css import |
rcc |
class component skeleton |
rccp |
class component skeleton with prop types after the class |
rcjc |
class component skeleton without import and default export lines |
rcfc |
class component skeleton that contains all the lifecycle methods |
rfcp |
stateless component with prop types skeleton |
rpt |
empty propTypes declaration |
con |
class default constructor with props |
conc |
class default constructor with props and context |
est |
empty state object |
cwm |
componentWillMount method |
cdm |
componentDidMount method |
cwr |
componentWillReceiveProps method |
cgd |
componentGetDerivedStateFromProps method |
scu |
shouldComponentUpdate method |
cwup |
componentWillUpdate method |
cdup |
componentDidUpdate method |
cwun |
componentWillUnmount method |
ren |
render method |
sst |
this.setState with object as parameter |
ssf |
this.setState with function as parameter |
tp |
this.props |
ts |
this.state |
us |
useState |
ue |
useEffect |
uec |
useEffect with a cleanup function |
ur |
useRef |
cc |
createContext |
uc |
useContext |
ume |
useMemo |
------- | ---------------------------------------------------------------- |
uq |
useQuery to be used with graphql-codegen |
uqc |
useQuery that loads up data for current component, to be used with graphql-codegen |
um |
useMutation to be used with graphql-codegen |
uqg |
useQuery with raw gql |
umg |
useMutation with raw gql |
There are also snippets to be triggered with a text selection(trigger via insert snippet command):
jsx element wrap selection