vscode snip

typescriptreact.json

{
  "React_Class": {
    "prefix": "comp",
    "body": [
      "export interface ${TM_FILENAME_BASE}Props {}",
      "export interface ${TM_FILENAME_BASE}State {}",
      "export class ${TM_FILENAME_BASE} extends React.PureComponent<${TM_FILENAME_BASE}Props, ${TM_FILENAME_BASE}State> {",
      "  render () {",
      "    return (",
      "      <div />",
      "    )",
      "  }",
      "}"
    ],
    "description": "create React Class"
  },
  "HOC": {
    "prefix": "hoc",
    "body": [
      "export interface ${TM_FILENAME_BASE}InjectProps {}",
      "export interface ${TM_FILENAME_BASE}DependProps {}",
      "export function with${TM_FILENAME_BASE}<OwnerProps>(WrappedComponent: React.ComponentType<OwnerProps & ${TM_FILENAME_BASE}InjectProps>) {",
      "  return class ${TM_FILENAME_BASE}Hoc extends React.PureComponent<OwnerProps & ${TM_FILENAME_BASE}DependProps, {}> {",
      "    render () {",
      "      return (",
      "        <WrappedComponent {...this.props} />",
      "      )",
      "    }",
      "  }",
      "}"
    ],
    "description": "create HOC"
  },
  "FC": {
    "prefix": "fc",
    "body": [
      "${2:export }interface ${1:${TM_FILENAME_BASE}}Props {}",
      "",
      "${2:export }const ${1:${TM_FILENAME_BASE}}: React.FC<${1:${TM_FILENAME_BASE}}Props> = ({}) => {",
      "  return ${0:null}",
      "}",
      "${1:${TM_FILENAME_BASE}}.displayName = \"${1:${TM_FILENAME_BASE}}\""
    ]
  },
  "FCNP": {
    "prefix": "fcnp",
    "body": [
      "${2:export }const ${1:${TM_FILENAME_BASE}}: React.FC = () => {",
      "  return ${0:null}",
      "}",
      "${1:${TM_FILENAME_BASE}}.displayName = \"${1:${TM_FILENAME_BASE}}\""
    ]
  }
}

vue.json

{
  "Vue_Temp": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "<script lang=\"ts\">",
      "import { Component, Vue } from 'vue-property-decorator'",
      "@Component({})",
      "export default class ${TM_FILENAME_BASE} extends Vue {}",
      "</script>",
      "<style scoped>",
      "</style>"
    ],
    "description": "create Vue Class"
  }
}

It can change ${TM_FILENAME_BASE} to ${TM_FILENAME_BASE/(^|_)([a-z])/${2:/upcase}/g} for file which named lowercase with underscore, like: a_b.tsx