VS Code Snippets for TypeScript React & Next.js

typescriptreact.json

{
  "TS React Dual Export": {
    "prefix": "rfac",
    "body": [
      "import React from \"react\"",
      "",
      "export type Props = {",
      "",
      "}",
      "",
      "export const $TM_FILENAME_BASE: React.FC<Props> = () => {",
      "\treturn (",
      "\t\t<div>",
      "",
      "\t\t</div>",
      "\t);",
      "};",
      "",
      "export default $TM_FILENAME_BASE;"
    ],
    "description": "Creates a React Arrow Function Component with ES7 module system & default export (custom snippet)"
  },
  "TS Next.js Component": {
    "prefix": "rfacn",
    "body": [
      "type Props = {",
      "",
      "}",
      "",
      "const $TM_FILENAME_BASE: React.FC<Props> = () => {",
      "\treturn (",
      "\t\t<div>",
      "",
      "\t\t</div>",
      "\t);",
      "};",
      "",
      "export default $TM_FILENAME_BASE;"
    ],
    "description": "Creates a Next.js (React) Arrow Function Component with default export (custom snippet)"
  }
}

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
• ${1:label}, ${2:another} for placeholders

Placeholders with the same ids are connected.