VS Code snippets

typescriptreact.json

{
  "React function component": {
    "prefix": "nrf",
    "body": [
      "import * as React from \"react\";",
      "",
      "export interface ${1:$TM_FILENAME_BASE}Props {}",
      "",
      "const ${1:$TM_FILENAME_BASE}: React.FC<${1:$TM_FILENAME_BASE}Props> = props => {",
      "  return <>{props.children}</>;",
      "};",
      "",
      "export default ${1:$TM_FILENAME_BASE};",
      ""
    ]
  },

  "React component test suite": {
    "prefix": "cts",
    "body": [
      "import * as React from \"react\";",
      "",
      "import ${1:${TM_FILENAME/(.+?)\\..*/${1}/}} from \"./${1:${TM_FILENAME/(.+?)\\..*/${1}/}}\";",
      "",
      "describe(\"${1:${TM_FILENAME/(.+?)\\..*/${1}/}}\", () => {",
      "  it(\"renders without crashing\", () => {",
      "    $2",
      "  });",
      "});"
    ]
  },

  "React component story": {
    "prefix": "csf",
    "body": [
      "import * as React from \"react\";",
      "",
      "import { ${1:${TM_FILENAME/(.+?)\\..*/$1/}} } from \".\";",
      "",
      "export default {",
      "  title: \"${TM_DIRECTORY/^.+\\/(.*)$/${1:/capitalize}/}/${1:${TM_FILENAME/(.+?)\\..*/$1/}}\",",
      "  component: ${1:${TM_FILENAME/(.+?)\\..*/$1/}},",
      "};",
      "",
      "export const Intro: React.FC = () => {",
      "  return ${2:<${1:${TM_FILENAME/(.+?)\\..*/$1/}} />};",
      "};",
      ""
    ],
    "description": "React component story"
  }
}