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

博客介绍了VS Code用户自定义代码片段(React),包含React组件模板和redux模板,内容转载自https://www.cnblogs.com/lantuoxie/p/9560336.html 。

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

.jsxReact组件模板:javascriptreact.json

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

.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}}'\n",
      "const ${3:initState} = {",
      "\t$4",
      "}\n",
      "export default handleActions({",
      "\t$5",
      "}, ${3:initState})\n"
    ],
    "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}}'\n",
      "$0"
    ]
  }
}

转载于:https://www.cnblogs.com/lantuoxie/p/9560336.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值