snippets

gistfile1.txt

{
  // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  // Placeholders with the same ids are connected.
  // Example:
  "Print to fox": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "fox",
    "body": ["console.log('$1 : 🦊', $2);", "$3"],
    "description": "Log output to console"
  },
  "Export index": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "export ind",
    "body": ["export { default } from \"./$1\";"],
    "description": "export index"
  },
  "Import react": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "import r",
    "body": ["import React from \"react\";"],
    "description": "Import react"
  },
  "Export default react function": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "export default r",
    "body": [
      "import React from \"react\";",
      "",
      "export default function $1(props) {",
      "  return \"$2\";",
      "}"
    ],
    "description": "declare simple react function"
  },
  "Import styled": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "import styled",
    "body": ["import styled from \"styled-components\";"],
    "description": "Import styled component"
  },
  "paprika tokens": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "paprika tokens",
    "body": ["import tokens from \"@paprika/tokens\""],
    "description": "Import paprika tokens"
  },
  "paprika stylers": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "paprika stylers",
    "body": ["import stylers from \"@paprika/stylers\""],
    "description": "Import paprika stylers"
  },
  "Import styled-macro": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "import styled-macro",
    "body": ["import styled from \"styled-components/macro\";"],
    "description": "Import styled component macro for create react app"
  },
  "Whole enchilada": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "import enchilada",
    "body": [
      "import React from \"react\";",
      "import PropTypes from \"prop-types\";",
      "",
      "const propTypes = {};",
      "const defaultProps = {};",
      "",
      "export default function $1(props) {",
      "  return \"🦄\"",
      "}",
      "",
      "$1.propTypes = propTypes;",
      "$1.defaultProps = defaultProps;"
    ],
    "description": "Import whole enchilada"
  },
  "styled-component funct": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "func-styled",
    "body": ["${({ $0 }) => {", "  return `$1`", "}}"],
    "description": "Insert a style-component function"
  },
  "ts: event": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "ts:event",
    "body": [
      "function $0(event: React.SyntheticEvent) {",
      " // const target = event.target as HTMLInputElement;",
      " $1",
      "}"
    ]
  },
  "react.useState": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "useState",
    "body": ["const [$1, $2] = React.useState($3)"]
  },
  "i18n:TODO": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "i18nTODO",
    "body": ["/** i18n attention required! */"]
  },
  "styled:function": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "styledFunc",
    "body": ["export const $1 = styled.div(() => {", " return css`$2`;", "});"]
  },
  "ts:props": {
    "scope": "javascript,typescript,typescriptreact,javascriptreact",
    "prefix": "tsprops",
    "body": ["interface $1Props {$2}"]
  }
}