VSCode JS/React Snippets: Paste file into javascript.json. Go to Code Menu -> Preferences -> User Snippets and select the javascript.json file

javascript.json

{
  "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}])"
    ]
  },
}