VS Code snippets for React

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"
  },
  "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 PropTypes":{
    "prefix":"impt",
    "body":[
      "import PropTypes from 'prop-types';",
      ""
    ]
  },
  "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"
  },
  "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}])"
    ]
  },
  "import React, PropTypes, css, and styled":{
    "prefix":"imreact",
    "body":[
      "import * as React from 'react';",
      "import PropTypes from 'prop-types';",
      "import styled from '@emotion/styled';",
      "import { css } from '@emotion/react';",
      ""
    ]
  },
  "reactFunctionalComponentWithPropTypes":{
    "prefix":"rfcp",
    "body":[
      "import * as React from 'react';",
      "import PropTypes from 'prop-types';",
      "import styled from '@emotion/styled';",
      "import { css } from '@emotion/react';",
      "",
      "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"
  },
  "Emotion: import { css } & styled":{
    "prefix":"imemo",
    "body":[
      "import styled from '@emotion/styled';",
      "import { css } from '@emotion/react';",
      "${1}"
    ],
    "description":"Imports `{ css }` and `styled` from Emotion."
  },
  "Emotion: import { mq } from '@/styles/util'":{
    "prefix":"imemomq",
    "body":[
      "import { mq } from '@/styles/utils';",
      "${1}"
    ],
    "description":"Imports `{ mq }` from style utils."
  },
  "Emotion: `css` Prop":{
    "prefix":"emocss",
    "body":[
      "css={theme => css`",
      "\tpadding: ${theme.space[4]};",
      "\t${2}",
      "`}"
    ],
    "description":"Create Emotion `css` method for inline styling with access to the theme config."
  },
  "Emotion: `styled` Component":{
    "prefix":"emosty",
    "body":[
      "const ${1:Component} = styled.${2:div}(",
      "\t({ theme }) => css`",
      "\t\tcolor: ${theme.colors.white.primary};",
      "\t\tfont-size: ${theme.fontSizes[0]};",
      "\t\tline-height: ${theme.lineHeights.default};",
      "\t\t${3}",
      "\t`",
      ");",
      "",
      "${3}"
    ],
    "description":"Create Emotion styled component with access to the theme config."
  },
  "Emotion: `css` Prop for media queries":{
    "prefix":"emocssmq",
    "body":[
      "css={mq({",
      "\tdisplay: ['none', 'flex'],",
      "\t${2}",
      "})}"
    ],
    "description":"Create Emotion `css` method for inline media queries."
  },
  "importNextLink":{
    "prefix":"nextl",
    "body":"import Link from 'next/link';$0",
    "description":"Import the Next.js `Link` commponent."
  },
  "importNextImage":{
    "prefix":"nexti",
    "body":"import Image from 'next/image';$0",
    "description":"Import the Next.js `Image` commponent."
  },
  "importNextRouter":{
    "prefix":"nextr",
    "body":"import { useRouter } from 'next/router';$0",
    "description":"Import the Next.js `useRouter` hook."
  },
  "initUseRouter":{
    "prefix":"nextuserouter",
    "body":[
      "const router = useRouter();${0}"
    ],
    "description":"Bind useRouter() to `router` variable."
  },
  "importNextDynamic":{
    "prefix":"nextd",
    "body":"import dynamic from 'next/dynamic';$0",
    "description":"Import the Next.js `dynamic` method."
  },
  "Framer Motion: import { motion } from 'framer-motion';":{
    "prefix":"imfram",
    "body":[
      "import { motion } from 'framer-motion';",
      "${1}"
    ],
    "description":"Imports `{ motion }` from 'framer-motion'."
  },
  "Yup: import * as yup from 'yup';":{
    "prefix":"imyup",
    "body":[
      "import * as yup from 'yup';${1}"
    ],
    "description":"Imports `yup` from 'yup'."
  }
}