VS Code Snippets for React Class Components in TypeScript

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"
    // }
    "ImportReact": {
        "prefix": "import ",
        "description": "Import all from React",
        "body": "import * as React from 'react';"
    },
    "ClassContainer": {
        "prefix": "class",
        "description": "Creates default exported React.Component with name property",
        "body": [
            "class ${1:ComponentName} extends React.Component {",
            "\tpublic render() {",
            "\t\treturn (",
            "\t\t\t<>",
            "\t\t\t\t${0}",
            "\t\t\t</>",
            "\t\t)",
            "\t}",
            "}",
            "\n",
            "export default ${1:ComponentName};"
        ]
    },
    "ClassContainerProps": {
        "prefix": "class",
        "description": "Include interface Props: Creates default exported React.Component with name property",
        "body": [
            "interface I${1:ComponentName}Props {",
            "\n"
            "}"
            "\n",
            "class ${1:ComponentName} extends React.Component<I${1:ComponentName}Props> {",
            "\tpublic render() {",
            "\t\treturn (",
            "\t\t\t<>",
            "\t\t\t\t${0}",
            "\t\t\t</>",
            "\t\t)",
            "\t}",
            "}",
            "\n",
            "export default ${1:ComponentName};"
        ]
    },
    "ClassContainerPropsState": {
        "prefix": "class",
        "description": "Include interface Props, State: Creates default exported React.Component with name property",
        "body": [
            "interface I${1:ComponentName}Props {",
            "\n"
            "}"
            "\n",
            "interface I${1:ComponentName}State {",
            "\n"
            "}"
            "\n"
            "class ${1:ComponentName} extends React.Component<I${1:ComponentName}Props, I${1:ComponentName}State> {",
            "\tpublic render() {",
            "\t\treturn (",
            "\t\t\t<>",
            "\t\t\t\t${0}",
            "\t\t\t</>",
            "\t\t)",
            "\t}",
            "}",
            "\n",
            "export default ${1:ComponentName};"
        ]
    }
}