Skip to content

Instantly share code, notes, and snippets.

@joedooley
Last active February 1, 2021 18:42
Show Gist options
  • Save joedooley/02d890601d3f721e02d3f5b388636487 to your computer and use it in GitHub Desktop.
Save joedooley/02d890601d3f721e02d3f5b388636487 to your computer and use it in GitHub Desktop.
VSCode JS/React Snippets: Paste file into javascript.json. Go to Code Menu -> Preferences -> User Snippets and select the javascript.json file
{
"import": {
"prefix": "imp",
"body": "import ${2:moduleName} from '${1:module}'$0;"
},
"importDestructing": {
"prefix": "imd",
"body": "import { $2 } from '${1:module}'$0;"
},
"importEverything": {
"prefix": "ime",
"body": "import * as ${2:alias} from '${1:module};'$0"
},
"importNextRouter": {
"prefix": "nextr",
"body": "import { useRouter } from 'next/router'$0;"
},
"exportDefault": {
"prefix": "exp",
"body": "export default $1$0;"
},
"exportDestructing": {
"prefix": "exd",
"body": "export { $2 } from '${1:module};'$0"
},
"exportAs": {
"prefix": "exa",
"body": "export { ${2:originalName} as ${3:alias} } from '${1:module};'$0"
},
"exportNamedFunction": {
"prefix": "enf",
"body": [
"export const ${1:functionName} = (${2:params}) => {",
"\t$0",
"}",
""
],
"description": "Export named function in ES7 syntax"
},
"exportDefaultFunction": {
"prefix": "edf",
"body": ["export default (${1:params}) => {", "\t$0", "}", ""],
"description": "Export default function in ES7 syntax"
},
"forEach": {
"prefix": "fre",
"body": ["${1:array}.forEach(${2:currentItem} => {", "\t${0}", "})", ""],
"description": "Creates a forEach statement in ES7 syntax"
},
"forOf": {
"prefix": "fof",
"body": ["for(let ${1:item} of ${2:object}) {", "\t${0}", "}", ""],
"description": "Iterating over property names of iterable objects"
},
"forIn": {
"prefix": "fin",
"body": ["for(let ${1:item} in ${2:object}) {", "\t${0}", "}", ""],
"description": "Iterating over property values of iterable objects"
},
"anonymousFunction": {
"prefix": "anfn",
"body": ["(${1:params}) => {", "\t${2}", "}"],
"description": "Creates an anonymous function in ES7 syntax"
},
"namedFunction": {
"prefix": "nfn",
"body": ["const ${1:name} = (${2:params}) => {", "\t${3}", "}", ""],
"description": "Creates a named function in ES7 syntax"
},
"destructingObject": {
"prefix": "dob",
"body": "const {${1:propertyName}} = ${2:objectToDestruct}",
"description": "Creates and assigns a local variable using object destructing"
},
"destructingArray": {
"prefix": "dar",
"body": "const [${1:propertyName}] = ${2:arrayToDestruct}",
"description": "Creates and assigns a local variable using array destructing"
},
"setInterval": {
"prefix": "sti",
"body": ["setInterval(() => {", "\t${2}", "}, ${0:intervalInms})", ""],
"description": "Executes the given function at specified intervals in ES7 syntax"
},
"setTimeOut": {
"prefix": "sto",
"body": ["setTimeout(() => {", "\t${2}", "}, ${1:delayInms})", ""],
"description": "Executes the given function after the specified delay in ES7 syntax"
},
"promise": {
"prefix": "prom",
"body": ["return new Promise((resolve, reject) => {", "\t${1}", "})", ""],
"description": "Creates and returns a new Promise in the standard ES7 syntax"
},
"consoleAssert": {
"prefix": "cas",
"body": "console.assert(${1:expression}, ${2:object})",
"description": "If the specified expression is false, the message is written to the console along with a stack trace"
},
"consoleDir": {
"prefix": "cdi",
"body": "console.dir(${1:object})",
"description": "Prints a JavaScript representation of the specified object"
},
"consoleError": {
"prefix": "cer",
"body": "console.error(${1:object})",
"description": "Displays a message in the console and also includes a stack trace from where the method was called"
},
"consoleLog": {
"prefix": "clg",
"body": "console.log(${1:object})",
"description": "Displays a message in the console"
},
"consoleTrace": {
"prefix": "ctr",
"body": "console.trace(${1:object})",
"description": "Prints a stack trace from the point where the method was called"
},
"consoleLogObject": {
"prefix": "clo",
"body": "console.log(`${1:object}`, ${1:object})",
"description": "Logs property with name."
},
"import React": {
"prefix": "imr",
"body": ["import * as React from 'react';", ""]
},
"import React & PropTypes": {
"prefix": "imrmp",
"body": [
"import * as React from 'react';",
"import PropTypes from 'prop-types';",
""
]
},
"import PropTypes": {
"prefix": "impt",
"body": ["import PropTypes from 'prop-types';", ""]
},
"reactFunctionalComponentWithPropTypes": {
"prefix": "rfcp",
"body": [
"import * as React from 'react';",
"import PropTypes from 'prop-types';",
"",
"export default function ${1:${TM_FILENAME_BASE}}(props) {",
"\treturn (",
"\t\t<div>",
"\t\t\t$0",
"\t\t</div>",
"\t)",
"}",
"",
"${1:${TM_FILENAME_BASE}}.propTypes = {",
"",
"}",
"",
""
],
"description": "Creates a React Functional Component with ES7 module system with PropTypes"
},
"propTypeArray": {
"prefix": "pta",
"body": "PropTypes.array,",
"description": "Array prop type"
},
"propTypeArrayRequired": {
"prefix": "ptar",
"body": "PropTypes.array.isRequired,",
"description": "Array prop type required"
},
"propTypeBool": {
"prefix": "ptb",
"body": "PropTypes.bool,",
"description": "Bool prop type"
},
"propTypeBoolRequired": {
"prefix": "ptbr",
"body": "PropTypes.bool.isRequired,",
"description": "Bool prop type required"
},
"propTypeFunc": {
"prefix": "ptf",
"body": "PropTypes.func,",
"description": "Func prop type"
},
"propTypeFuncRequired": {
"prefix": "ptfr",
"body": "PropTypes.func.isRequired,",
"description": "Func prop type required"
},
"propTypeNumber": {
"prefix": "ptn",
"body": "PropTypes.number,",
"description": "Number prop type"
},
"propTypeNumberRequired": {
"prefix": "ptnr",
"body": "PropTypes.number.isRequired,",
"description": "Number prop type required"
},
"propTypeObject": {
"prefix": "pto",
"body": "PropTypes.object,",
"description": "Object prop type"
},
"propTypeObjectRequired": {
"prefix": "ptor",
"body": "PropTypes.object.isRequired,",
"description": "Object prop type required"
},
"propTypeString": {
"prefix": "pts",
"body": "PropTypes.string,",
"description": "String prop type"
},
"propTypeStringRequired": {
"prefix": "ptsr",
"body": "PropTypes.string.isRequired,",
"description": "String prop type required"
},
"propTypeNode": {
"prefix": "ptnd",
"body": "PropTypes.node,",
"description": "Anything that can be rendered: numbers, strings, elements or an array"
},
"propTypeNodeRequired": {
"prefix": "ptndr",
"body": "PropTypes.node.isRequired,",
"description": "Anything that can be rendered: numbers, strings, elements or an array required"
},
"propTypeElement": {
"prefix": "ptel",
"body": "PropTypes.element,",
"description": "React element prop type"
},
"propTypeElementRequired": {
"prefix": "ptelr",
"body": "PropTypes.element.isRequired,",
"description": "React element prop type required"
},
"propTypeInstanceOf": {
"prefix": "pti",
"body": "PropTypes.instanceOf($0),",
"description": "Is an instance of a class prop type"
},
"propTypeInstanceOfRequired": {
"prefix": "ptir",
"body": "PropTypes.instanceOf($0).isRequired,",
"description": "Is an instance of a class prop type required"
},
"propTypeEnum": {
"prefix": "pte",
"body": "PropTypes.oneOf(['$0']),",
"description": "Prop type limited to specific values by treating it as an enum"
},
"propTypeEnumRequired": {
"prefix": "pter",
"body": "PropTypes.oneOf(['$0']).isRequired,",
"description": "Prop type limited to specific values by treating it as an enum required"
},
"propTypeOneOfType": {
"prefix": "ptet",
"body": ["PropTypes.oneOfType([", "\t$0", "]),"],
"description": "An object that could be one of many types"
},
"propTypeOneOfTypeRequired": {
"prefix": "ptetr",
"body": ["PropTypes.oneOfType([", "\t$0", "]).isRequired,"],
"description": "An object that could be one of many types required"
},
"propTypeArrayOf": {
"prefix": "ptao",
"body": "PropTypes.arrayOf($0),",
"description": "An array of a certain type"
},
"propTypeArrayOfRequired": {
"prefix": "ptaor",
"body": "PropTypes.arrayOf($0).isRequired,",
"description": "An array of a certain type required"
},
"propTypeObjectOf": {
"prefix": "ptoo",
"body": "PropTypes.objectOf($0),",
"description": "An object with property values of a certain type"
},
"propTypeObjectOfRequired": {
"prefix": "ptoor",
"body": "PropTypes.objectOf($0).isRequired,",
"description": "An object with property values of a certain type required"
},
"propTypeShape": {
"prefix": "ptsh",
"body": ["PropTypes.shape({", "\t$0", "}),"],
"description": "An object taking on a particular shape"
},
"propTypeShapeRequired": {
"prefix": "ptshr",
"body": ["PropTypes.shape({", "\t$0", "}).isRequired,"],
"description": "An object taking on a particular shape required"
},
"propTypeExact": {
"prefix": "ptex",
"body": ["PropTypes.exact({", "\t$0", "}),"],
"description": "An object with warnings on extra properties"
},
"propTypeExactRequired": {
"prefix": "ptexr",
"body": ["PropTypes.exact({", "\t$0", "}).isRequired,"],
"description": "An object with warnings on extra properties required"
},
"staticPropTpyes": {
"prefix": "ptypes",
"body": ["static propTypes = {", "$0", "}", ""]
},
"propTypeAny": {
"prefix": "ptany",
"body": "PropTypes.any,",
"description": "Any prop type"
},
"useState": {
"prefix": "useState",
"body": [
"const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = React.useState(${2:initialState})"
]
},
"useEffect": {
"prefix": "useEffect",
"body": [
"React.useEffect(() => {",
"\t${1:effect}",
"\treturn () => {",
"\t\t${2:cleanup}",
"\t}",
"}, [${3:input}])"
]
},
"useContext": {
"prefix": "useContext",
"body": ["const ${1:context} = React.useContext(${2:contextValue})"]
},
"useReducer": {
"prefix": "useReducer",
"body": [
"const [state, dispatch] = React.useReducer(${1:reducer}, ${2:initialState}, ${3:init})"
]
},
"useCallback": {
"prefix": "useCallback",
"body": [
"React.useCallback(",
"\t() => {",
"\t\t${1:callback}",
"\t},",
"\t[${2:input}],",
")"
]
},
"useMemo": {
"prefix": "useMemo",
"body": ["React.useMemo(() => ${1:function}, ${2:input})"]
},
"useRef": {
"prefix": "useRef",
"body": ["const ${1:ref} = React.useRef(${2:initialValue})"]
},
"useImperativeHandle": {
"prefix": "useImperativeHandle",
"body": [
"React.useImperativeHandle(",
"\t${1:ref},",
"\t() => {",
"\t\t${2:handler}",
"\t},",
"\t[${3:input}],",
")"
]
},
"useDebugValue": {
"prefix": "useDebugValue",
"body": ["React.useDebugValue(${1:value})"]
},
"useLayoutEffect": {
"prefix": "useLayoutEffect",
"body": [
"React.useLayoutEffect(() => {",
"\t${1:effect}",
"\treturn () => {",
"\t\t${2:cleanup}",
"\t};",
"}, [${3:input}])"
]
},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment