rfc rfcd Auto to Create React Function Components

custom-vscode-snippets.json

{
    "Typescript default React component": {
        "prefix": "rfcd",
        "body": [
            "import React, { FC } from 'react'",
            "",
            "interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}Props {",
            "  $1",
            "}",
            "",
            "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}: FC<${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}Props> = ({ $2 }) => {",
            "  return (",
            "    <div>",
            "     ${3:$TM_FILENAME_BASE}",
            "    </div>",
            "  )",
            "}",
            "",
            "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g};"
        ]
    },
    "Typescript React component": {
        "prefix": "rfc",
        "body": [
            "import React, { FC } from 'react'",
            "",
            "interface ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}Props {",
            "  $1",
            "}",
            "",
            "export const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}: FC<${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}Props> = ({ $2 }) => {",
            "  return (",
            "    <div>",
            "     ${3:$TM_FILENAME_BASE}",
            "    </div>",
            "  )",
            "}"
        ]
    }
}