VS Code 用户自定义代码片段(React)

VS Code 用户自定义代码片段(React)

.jsxReact组件模板:javascriptreact.json

{
  "Import React": {
    "prefix": "importreact",
    "body": [
      "import React from 'react'
",
      "class ${1:${TM_FILENAME/(.*).(?:jsx|js)/$1/i}} extends React.Component {",
      "  render () {",
      "    return (",
      "      ${2|null|}",
      "    )",
      "  }",
      "}
",
      "export default ${1:${TM_FILENAME/(.*).(?:jsx|js)/$1/i}}
"
    ],
    "description": "引入React基本组件"
  },
  "Import PropTypes": {
    "prefix": "importproptypes",
    "body": [
      "import PropTypes from 'prop-types'"
    ],
    "description": "引入prop-types"
  },
  "Define defaultProps": {
    "prefix": "defaultProps",
    "body": [
      "static defaultProps = {",
      "  $1",
      "}
"
    ]
  }
}

.jsredux模板：javascript.json

{
  "Import Redux Action": {
    "prefix": "importaction",
    "body": [
      "import { ${1|handleActions,createAction|} } from 'redux-actions'"
    ],
    "description": "导入redux-actions"
  },
  "Create Reducer": {
    "prefix": "reducer",
    "body": [
      "import { handleActions } from 'reduce-actions'",
      "import * as ${1:types} from '@/constants/${2:${TM_FILENAME/(.*)State.(?:jsx|js)/$1Const/i}}'
",
      "const ${3:initState} = {",
      "	$4",
      "}
",
      "export default handleActions({",
      "	$5",
      "}, ${3:initState})
"
    ],
    "description": "导入一个reducer模板"
  },
  "Create Action": {
    "prefix": "action",
    "body": [
      "import { ${1|createAction, createActions|} } from 'redux-actions'",
      "import * as ${2:types} from '@/constans/${3:${TM_FILENAME/(.*)Action.(?:jsx|js)/$1Const/i}}'
",
      "$0"
    ]
  }
}