vscode snippets

typescript.json

{
  // Place your snippets for typescript here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. 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 console": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "Default to Named Export": {
    "prefix": "ex",
    "body": ["export { default as $1 } from './$1'"]
  },
  "Default to Named Export with Props": {
    "prefix": "exp",
    "body": [
      "export { default as $1 } from './$1'",
      "export type { $1Props } from './$1'"
    ]
  },
  "Import": {
    "prefix": "im",
    "body": ["import { $2 } from '$1'"]
  }
}

typescriptreact.json

{
  // Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. 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 console": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }
  "Import": {
    "prefix": "im",
    "body": ["import { $2 } from '$1'"]
  },
  "Preact Component": {
    "prefix": "comp",
    "body": [
      "import { h, FunctionComponent } from 'preact'",
      "",
      "export interface ${1:Component}Props {",
      "}",
      "",
      "export const $1: FunctionComponent<$1Props> = ({}) => (",
      "  <${2:div}>",
      "    $0",
      "  </$2>",
      ")",
      "",
      "export default $1"
    ]
  },
  "React Stateless Functional Component": {
    "prefix": "sfc",
    "body": [
      "import React from 'react';",
      "",
      "export interface $1Props {",
      "}",
      "",
      "const ${1:Component}: React.SFC<$1Props> = ({}) => (",
      "  <${2:div}>",
      "    $0",
      "  </$2>",
      ");",
      "",
      "export default $1;"
    ]
  },
  "React Functional Component": {
    "prefix": "fc",
    "body": [
      "import React from 'react';",
      "",
      "const styles = {",
      "  component: { className: 'c_' },",
      "}",
      "",
      "export interface $1Props {",
      "}",
      "",
      "const ${1:Component}: React.FC<$1Props> = () => (",
      "  <${2:div} {...styles.component}>",
      "    ${1}${0}",
      "  </$2>",
      ");",
      "",
      "export default $1;"
    ]
  },
  "React Functional Component 2": {
    "prefix": "fc2",
    "body": [
      "import React from 'react'",
      "",
      "const styles = {",
      "  component: { className: 'c_' },",
      "}",
      "",
      "export interface $1Props {",
      "}",
      "",
      "const ${1:Component}: React.FC<$1Props> = () => {",
      "  return (",
      "    <${2:div} {...styles.component}>",
      "      ${1}${0}",
      "    </$2>",
      "  )",
      "}",
      "",
      "export default $1;"
    ]
  },
  "Storybook Story": {
    "prefix": "story",
    "body": [
      "import React from 'react'",
      "import { Story, Meta } from '@storybook/react'",
      "import { $1, $1Props } from '../..$2'",
      "",
      "export default {",
      "  title: 'Pages/$1',",
      "  component: $1,",
      "} as Meta",
      "",
      "const Template: Story<$1Props> = (args) => <$1 {...args} />",
      "",
      "export const $1Default = Template.bind({})"
    ]
  },
  "React FC Emotion": {
    "prefix": "fce",
    "body": [
      "import { css } from '@emotion/react'",
      "",
      "import React from 'react'",
      "",
      "const componentCss = css`",
      "`",
      "",
      "export interface $1Props {",
      "}",
      "",
      "const ${1:Component}: React.FC<$1Props> = () => {",
      "  return (",
      "    <${2:div} css={componentCss}>",
      "      ${1}${0}",
      "    </$2>",
      "  )",
      "}",
      "",
      "export default $1;"
    ]
  }
}