vscode snippet

javascript.json

{
  "propTypeArray": {
    "prefix": "pta",
    "body": "PropTypes.array,",
    "description": "Array prop type"
  },
  "propTypeArrayRequired": {
    "prefix": "ptar",
    "body": "PropTypes.array.isRequired,",
    "description": "Array prop type required"
  },
  "propTypeBool": {
    "prefix": "ptb",
    "body": "PropTypes.bool,",
    "description": "Bool prop type"
  },
  "propTypeBoolRequired": {
    "prefix": "ptbr",
    "body": "PropTypes.bool.isRequired,",
    "description": "Bool prop type required"
  },
  "propTypeFunc": {
    "prefix": "ptf",
    "body": "PropTypes.func,",
    "description": "Func prop type"
  },
  "propTypeFuncRequired": {
    "prefix": "ptfr",
    "body": "PropTypes.func.isRequired,",
    "description": "Func prop type required"
  },
  "propTypeNumber": {
    "prefix": "ptn",
    "body": "PropTypes.number,",
    "description": "Number prop type"
  },
  "propTypeNumberRequired": {
    "prefix": "ptnr",
    "body": "PropTypes.number.isRequired,",
    "description": "Number prop type required"
  },
  "propTypeObject": {
    "prefix": "pto",
    "body": "PropTypes.object,",
    "description": "Object prop type"
  },
  "propTypeObjectRequired": {
    "prefix": "ptor",
    "body": "PropTypes.object.isRequired,",
    "description": "Object prop type required"
  },
  "propTypeString": {
    "prefix": "pts",
    "body": "PropTypes.string,",
    "description": "String prop type"
  },
  "propTypeStringRequired": {
    "prefix": "ptsr",
    "body": "PropTypes.string.isRequired,",
    "description": "String prop type required"
  },
  "propTypeNode": {
    "prefix": "ptnd",
    "body": "PropTypes.node,",
    "description": "Anything that can be rendered: numbers, strings, elements or an array"
  },
  "propTypeNodeRequired": {
    "prefix": "ptndr",
    "body": "PropTypes.node.isRequired,",
    "description": "Anything that can be rendered: numbers, strings, elements or an array required"
  },
  "propTypeElement": {
    "prefix": "ptel",
    "body": "PropTypes.element,",
    "description": "React element prop type"
  },
  "propTypeElementRequired": {
    "prefix": "ptelr",
    "body": "PropTypes.element.isRequired,",
    "description": "React element prop type required"
  },
  "propTypeInstanceOf": {
    "prefix": "pti",
    "body": "PropTypes.instanceOf($0),",
    "description": "Is an instance of a class prop type"
  },
  "propTypeInstanceOfRequired": {
    "prefix": "ptir",
    "body": "PropTypes.instanceOf($0).isRequired,",
    "description": "Is an instance of a class prop type required"
  },
  "propTypeEnum": {
    "prefix": "pte",
    "body": "PropTypes.oneOf(['$0']),",
    "description": "Prop type limited to specific values by treating it as an enum"
  },
  "propTypeEnumRequired": {
    "prefix": "pter",
    "body": "PropTypes.oneOf(['$0']).isRequired,",
    "description": "Prop type limited to specific values by treating it as an enum required"
  },
  "propTypeOneOfType": {
    "prefix": "ptet",
    "body": [
      "PropTypes.oneOfType([",
      "  $0",
      "]),"
    ],
    "description": "An object that could be one of many types"
  },
  "propTypeOneOfTypeRequired": {
    "prefix": "ptetr",
    "body": [
      "PropTypes.oneOfType([",
      "  $0",
      "]).isRequired,"
    ],
    "description": "An object that could be one of many types required"
  },
  "propTypeArrayOf": {
    "prefix": "ptao",
    "body": "PropTypes.arrayOf($0),",
    "description": "An array of a certain type"
  },
  "propTypeArrayOfRequired": {
    "prefix": "ptaor",
    "body": "PropTypes.arrayOf($0).isRequired,",
    "description": "An array of a certain type required"
  },
  "propTypeObjectOf": {
    "prefix": "ptoo",
    "body": "PropTypes.objectOf($0),",
    "description": "An object with property values of a certain type"
  },
  "propTypeObjectOfRequired": {
    "prefix": "ptoor",
    "body": "PropTypes.objectOf($0).isRequired,",
    "description": "An object with property values of a certain type required"
  },
  "propTypeShape": {
    "prefix": "ptsh",
    "body": [
      "PropTypes.shape({",
      "  $0",
      "}),"
    ],
    "description": "An object taking on a particular shape"
  },
  "propTypeShapeRequired": {
    "prefix": "ptshr",
    "body": [
      "PropTypes.shape({",
      "  $0",
      "}).isRequired,"
    ],
    "description": "An object taking on a particular shape required"
  },
  "staticPropTpyes": {
    "prefix": "ptypes",
    "body": [
      "static propTypes = {",
      "$0",
      "}",
      ""
    ]
  },
  "propTypeAny": {
    "prefix": "ptany",
    "body": "PropTypes.any,",
    "description": "Any prop type"
  },
  "dva model": {
    "prefix": "dvamodel",
    "body": [
      "export default {",
      "  namespace: '${1:namespace}',",
      "",
      "  state: {",
      "    ${2:}",
      "  },",
      "",
      "  reducers: {},",
      "",
      "  effects: {},",
      "",
      "  subscriptions: {},",
      "}",
      ""
    ],
    "description": "dva model"
  },
  "dva effects": {
    "prefix": "dvaeff",
    "body": [
      "*${1:fun}({ type, payload }, { put, call, select }) {",
      "  $3",
      "},",
    ],
    "description": "dva effects"
  },
  "dva reducers": {
    "prefix": "dvareducer",
    "body": [
      "${1:type}(preState, { type, payload }) {",
      "  return { ",
      "    ...preState,",
      "    ${2:}",
      "  }",
      "},",
    ],
    "description": "dva reducers"
  },
  "dva subscriptions": {
    "prefix": "dvasub",
    "body": [
      "setup({ dispatch, history }) {",
      "  history.listen(location => {",
      "    ${1:}",
      "  })",
      "},",
    ]
  },
  "React Component": {
    "prefix": "tsrc",
    "body": [
      "import React from 'react'",
      "import PropTypes from 'prop-types'",
      "",
      "export default class ${1:$TM_FILENAME_BASE} extends React.Component {",
      "  static propTypes = {",
      "  }",
      "",
      "  render() {",
      "    return (",
      "      <div>",
      "        ${2:}",
      "      </div>",
      "    )",
      "  }",
      "}",
      "",
    ],
    "description": "Create a React Component with props"
  },
  "React PureComponent": {
    "prefix": "tsrpcc",
    "body": [
      "import React from 'react'",
      "import PropTypes from 'prop-types'",
      "",
      "export default class ${1:$TM_FILENAME_BASE} extends React.PureComponent {",
      "  static propTypes = {",
      "  }",
      "",
      "  render() {",
      "    return (",
      "      <div>",
      "        ${2:}",
      "      </div>",
      "    )",
      "  }",
      "}",
      "",
    ],
    "description": "Create a React PureComponent"
  },
  "React Pure Function Component": {
    "prefix": "tsrfc",
    "body": [
      "import React from 'react'",
      "import PropTypes from 'prop-types'",
      "",
      "const ${1:$TM_FILENAME_BASE} = (props) => {",
      "    return (",
      "      <div>",
      "        ${0}",
      "      </div>",
      "    )",
      "}",
      "",
      "${1:}.propTypes = {",
      "",
      "}",
      "",
      "export default ${1:}",
      "",
    ],
    "description": "Create a React Pure Function Component"
  },
  "constructor": {
    "prefix": "conc",
    "body": [
      "constructor(props) {",
      "  super(props)",
      "  this.state = {",
      "    ${1:}",
      "  }",
      "}",
      ""
    ],
    "description": "Add a constructor in class."
  },
  "getDerivedStateFromProps": {
    "prefix": "gdsfp",
    "body": [
      "static getDerivedStateFromProps(nextProps, prevState) {",
      "  ${0}",
      "  return null",
      "}",
      ""
    ],
    "description": "Invoked right before calling the render method, both on the initial mount and on subsequent updates"
  },
  "componentDidMount": {
    "prefix": "didmount",
    "body": [
      "componentDidMount() {",
      "  ${0}",
      "}"
    ],
    "description": "component did mount"
  },
  "componentDidUpdate": {
    "prefix": "didupdate",
    "body": [
      "componentDidUpdate(prevProps, prevState, snapshot) {",
      "  ${0}",
      "}"
    ],
    "description": "component did update"
  },
  "componentWillUnmount": {
    "prefix": "willumount",
    "body": [
      "componentWillUnmount() {",
      "  ${0}",
      "}"
    ],
    "description": "component did Unmount"
  },
  "shouldComponentUpdate": {
    "prefix": "shouldupdate",
    "body": [
      "shouldComponentUpdate(nextProps, nextState) {",
      "  ${0}",
      "  return true",
      "}"
    ],
    "description": "should component update"
  },
  "getSnapshotBeforeUpdate": {
    "prefix": "gsbu",
    "body": [
      "getSnapshotBeforeUpdate(prevProps, prevState) {",
      "  return ${0}",
      "}",
      ""
    ],
    "description": "Invoked right before the most recently rendered output is committed to e.g. the DOM"
  },
  "HOC React Component": {
    "prefix": "ihoc",
    "body": [
      "import React, { PureComponent } from 'react'",
      "import PropTypes from 'prop-types'",
      "",
      "export default const With${1:} = WrappedComponent =>",
      "  class With${1:}Comp extends PureComponent {",
      "",
      "    static propTypes = {",
      "      ${2:}",
      "    }",
      "",
      "    render() {",
      "      return <WrappedComponent {...this.props} />",
      "    }",
      "  }",
      "",
    ],
    "description": "Create HOC"
  }
}

typescript.json

{
  "dva model": {
    "prefix": "dvamodel",
    "body": [
      "export default {",
      "  namespace: '${1:namespace}',",
      "",
      "  // 初始状态",
      "  state: {",
      "    ${2:}",
      "  },",
      "",
      "  // 更新状态",
      "  reducers: {},",
      "",
      "  // 异步操作与业务",
      "  effects: {},",
      "",
      "  // 订阅事件",
      "  subscriptions: {},",
      "}",
      ""
    ],
    "description": "dva model"
  },
  "dva effects": {
    "prefix": "dvaeff",
    "body": [
      "// ${2:}动作",
      "*${1:fun}Async({ type, payload }, { put, call, select }) {",
      "  $3",
      "},",
    ],
    "description": "dva effects"
  },
  "dva reducers": {
    "prefix": "dvareducer",
    "body": [
      "// ${3:}状态变更",
      "${1:type}Reducer: (preState, { type, payload }) => ({",
      "  ...preState,",
      "  ${2:}",
      "}),",
    ],
    "description": "dva reducers"
  },
  "dva subscriptions": {
    "prefix": "dvasub",
    "body": [
      "// 监听路由变化事件",
      "setup({ dispatch, history }) {",
      "  history.listen(location => {",
      "    ${1:}",
      "  })",
      "},",
    ]
  },
  "export * from 'module'": {
    "prefix": "efa",
    "body": [
      "export * from '$1'"
    ],
    "description": "export * from "
  },
  "React Component": {
    "prefix": "tsrc",
    "body": [
      "import * as React from 'react'",
      "",
      "export interface ${1:App}Props {}",
      "",
      "export class ${1:} extends React.Component<${1:}Props, any> {",
      "  public render() {",
      "    return (",
      "      <div>",
      "        ${2:}",
      "      </div>",
      "    )",
      "  }",
      "}",
      "",
      "export default ${1:}",
      "",
    ],
    "description": "Create a React Component with props"
  },
  "React Component Full": {
    "prefix": "tsrcfull",
    "body": [
      "import * as React from 'react'",
      "",
      "export interface ${1:App}Props {}",
      "",
      "export interface ${1:App}State {}",
      "",
      "export class ${1:} extends React.Component<${1:}Props, ${1:}State> {",
      "  public render() {",
      "    return (",
      "     <div>",
      "       ${2:}",
      "     </div>",
      "    )",
      "  }",
      "}",
      "",
      "export default ${1:}",
      "",
    ],
    "description": "Create a React Component with props and state"
  },
  "React PureComponent": {
    "prefix": "tsrpcc",
    "body": [
      "import * as React from 'react'",
      "",
      "export interface ${1:App}Props {",
      "}",
      "",
      "class ${1:} extends React.PureComponent<${1:}Props, any> {",
      "  render() {",
      "    return (",
      "      <div>",
      "        ${2:}",
      "      </div>",
      "    )",
      "  }",
      "}",
      "",
      "export default ${1:}",
      "",
    ],
    "description": "Create a React PureComponent"
  },
  "React Pure Function Component": {
    "prefix": "tsrfc",
    "body": [
      "import * as React from 'react'",
      "",
      "export interface ${1:App}Props {",
      "}",
      "",
      "export const ${1:} = (props: ${1:}Props) => {",
      "    return (",
      "      <div>",
      "        ${0}",
      "      </div>",
      "    )",
      "}",
      "",
      "export default ${1:}",
      "",
    ],
    "description": "Create a React Pure Function Component"
  },
  "constructor": {
    "prefix": "conc",
    "body": [
      "constructor(props: any) {",
      "  super(props)",
      "  ${1:}",
      "}"
    ],
    "description": "Add a constructor in class."
  },
  "componentDidMount": {
    "prefix": "cdm",
    "body": [
      "componentDidMount() {",
      "  ${1:}",
      "}"
    ],
    "description": "Invoked immediately after a component is mounted."
  },
  "componentDidUpdate": {
    "prefix": "cdu",
    "body": [
      "componentDidUpdate(prevProps: ${1:}, prevState) {",
      "  ${2:}",
      "}"
    ],
    "description": "Invoked immediately after updating occurs. This method is not called for the initial render"
  },
  "method": {
    "prefix": "met",
    "body": [
      "${1:methodName} = (${2:e}) => {",
      "  ${3:}",
      "}"
    ],
    "description": "Create a method"
  },
  "getDerivedStateFromProps": {
    "prefix": "gdsfp",
    "body": [
      "static getDerivedStateFromProps(nextProps: ${1:any}, prevState: ${2:any}) {",
      "  ${0}",
      "}"
    ],
    "description": "Invoked right before calling the render method, both on the initial mount and on subsequent updates"
  },
  "getSnapshotBeforeUpdate": {
    "prefix": "gsbu",
    "body": [
      "static getSnapshotBeforeUpdate(prevProps: ${1:any}, prevState: ${2:any}) {",
      "  ${0}",
      "}"
    ],
    "description": "Invoked right before the most recently rendered output is committed to e.g. the DOM"
  },
  "mapStateToProps": {
    "prefix": "mpstp",
    "body": [
      "// 全局状态映射到props",
      "function mapStateToProps({ ${1:} }: { ${1:}: any }) {",
      "  return { ${1:} }",
      "}"
    ],
    "description": "mapStateToProps"
  }
}

typescriptreact.json

{
"Typescript React function component": {
    "prefix": "tsrfc",
    "body": [
      "import { FC } from \"react\";",
      "",
      "export interface I${0:${TM_FILENAME_BASE/(^.)/${1:/upcase}/}}Props {}",
      "",
      "export const ${0:${TM_FILENAME_BASE/(^.)/${1:/upcase}/}}: FC<I${0:${TM_FILENAME_BASE/(^.)/${1:/upcase}/}}Props> = (props) => {",
      "  return <div></div>;",
      "};"
    ]
  },
}