In this video we will create custom visual studio code JavaScript snippets with tabstops, placeholders and choices. We will use a fantastic generator tool at https://snippet-generator.app which can also be used for Sublime Text and Atom
Sponsor: Freelancer Bundle (Use “brad25” for 25% off)
https://studywebdevelopment.com/freelancing.html
Snippets We Did & More:
{ | |
"Console Log": { | |
"prefix": "cl", | |
"body": "console.log($1);", | |
"description": "Console Log" | |
}, | |
"Named Function": { | |
"prefix": "nfn", | |
"body": ["function ${1:functionName}($2) {", " $3", "}"], | |
"description": "Named Function" | |
}, | |
"Anonymous Function": { | |
"prefix": "fn", | |
"body": ["function() {", " $2", "}"], | |
"description": "Anonymous Function" | |
}, | |
"Arrow Function": { | |
"prefix": "arfn", | |
"body": ["const ${1:functionName} = ($2) => {", " $3", "}"], | |
"description": "Arrow Function" | |
}, | |
"Basic If Statement": { | |
"prefix": "ifc", | |
"body": ["if(${1:condition}) {", " $2", "}"], | |
"description": "If Statement" | |
}, | |
"If Else Statement": { | |
"prefix": "ifelsec", | |
"body": ["if(${1:condition}) {", " $2", "} else {", " $3", "}"], | |
"description": "If else statement" | |
}, | |
"Array Method": { | |
"prefix": "arrmth", | |
"body": [ | |
"${1|forEach,map,filter,reduce,some|}((${2:item}) => {", | |
" $3", | |
"})" | |
], | |
"description": "Array Method" | |
}, | |
"Axios Request": { | |
"prefix": "axreq", | |
"body": [ | |
"axios.${1|get,post,put,delete|}('${2:url}')", | |
" .then(res => console.log(res.data))", | |
" .catch(err => console.log(err));" | |
], | |
"description": "Axios Request" | |
}, | |
"Fetch Request": { | |
"prefix": "fetchreq", | |
"body": [ | |
"fetch('${1:url}')", | |
" .then(res => res.json())", | |
" .then(data => console.log(data));" | |
], | |
"description": "Fetch Request" | |
}, | |
"asfetchreq": { | |
"prefix": "Async Await Fetch", | |
"body": [ | |
"const request = async ($1) => {", | |
" const response = await fetch('${2:url}');", | |
" const data = await response.json();", | |
" console.log(data);", | |
"}" | |
], | |
"description": "Fetch Async/Await" | |
}, | |
"Node Require": { | |
"prefix": "ndrq", | |
"body": "const ${1:import} = require('${module}');", | |
"description": "Require a Node.js module" | |
}, | |
"Express Server": { | |
"prefix": "expsrv", | |
"body": [ | |
"const express = require('express');", | |
"", | |
"const app = express();", | |
"", | |
"app.${1|get,post,put,delete|}('${2:route}', (req, res) => {", | |
" $3", | |
"});", | |
"", | |
"const PORT = process.env.PORT || ${4|3000,5000,8000,8080|};", | |
"", | |
"app.listen(PORT, () => console.log(`Server Running On Port ${PORT}`));" | |
], | |
"description": "Express Server" | |
}, | |
"Express Route": { | |
"prefix": "exprt", | |
"body": "app.${1|get,post,put,delete|}('${3:/}', (req, res) => {});", | |
"description": "Express Route" | |
}, | |
"Express Init Middleware": { | |
"prefix": "exmw", | |
"body": "app.use(${1:middleware});", | |
"description": "Express Middleware" | |
} | |
} |
Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia
Website & Udemy Courses
http://www.traversymedia.com
Follow Traversy Media:
https://www.facebook.com/traversymedia
Tweets by traversymedia
https://www.instagram.com/traversymedia
Source
Do you love us?, Please donate to us ,thank you.
BTC
38WPVc3xMYmoMp1GcnpDXd1fEzbfgujsCB
Etherum
0x6c11844FD079b2490CDd44039e1C2f0940d098dc