Last active
June 7, 2021 17:21
-
-
Save joedooley/8cde383907f7af1edeafbe3c611b08bc to your computer and use it in GitHub Desktop.
Revisions
-
joedooley revised this gist
Jun 7, 2021 . 1 changed file with 567 additions and 484 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,485 +1,568 @@ { "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'." } } -
Jun 7, 2021 . No changes.There are no files selected for viewing
-
Jun 7, 2021 . No changes.There are no files selected for viewing
-
Jun 7, 2021 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,485 @@ { "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'." } }