json VScode片段

Posted 2021-05-18

"React Router Link": {
  "prefix": "rrlink",
  "body": [
    "import { Link } from 'react-router-dom';",
    ""
  ],
  "description": "React Router Link"
}

"React Translate Class Component": {
  "prefix": "rtcc",
  "body": [
    "import React, { Component } from 'react'",
    "import { translate } from 'react-i18next';",
    "",
    "class $TM_FILENAME_BASE extends Component {",
    "    render () {",
    "      const { t } = this.props;",
    "        return (",
    "            <div>",
    "                {t('$TM_FILENAME_BASE')}",
    "            </div>",
    "        )",
    "    }",
    "}",
    "",
    "export default translate()($TM_FILENAME_BASE)"
  ],
  "description": "React Translate Class Component"
}

  "React Class Component": {
    "prefix": "nrrcc",
    "body": [
      "import React, { Component } from 'react'",
      "",
      "class $TM_FILENAME_BASE extends Component {",
      "    render () {",
      "        return (",
      "            <div>",
      "                {'$TM_FILENAME_BASE'}",
      "            </div>",
      "        )",
      "    }",
      "}",
      "",
      "export default $TM_FILENAME_BASE"
    ],
    "description": "React Class Component"
  },

  "React Stateless Component": {
    "prefix": "nrrsc",
    "body": [
      "import React from 'react'",
      "",
      "const $TM_FILENAME_BASE = ({}) => {",
      "    return (",
      "        <div>",
      "            {'$TM_FILENAME_BASE'}",
      "        </div>",
      "    )",
      "}",
      "",
      "export default $TM_FILENAME_BASE"
    ],
    "description": "React Stateless Component"
  }

  "Redux Async Action": {
    "prefix": "rxasync",
    "body": [
      "const ${1:${ACTION/(*)${1:/upcase}}/} = '${1:ACTION/(*)${1:/upcase}/}';",
      "export const login = () => async (dispatch, getState, api) => {",
      "  dispatch({ type: ${1:ACTION/(*)${1:/upcase}/} });",
      "  try {",
      "     const payload = await api.get(`/${3:${TM_FILENAME_BASE/(.*)/${1:/downcase}/}}`);",
      "     dispatch({",
      "       type: FETCH_SUCCESS,",
      "       payload",
      "     });",
      "  } catch(error) {",
      "     dispatch({",
      "       type: FETCH_ERROR,",
      "       payload: error",
      "     });",
      "  }",
      "};"
    ],
    "description": "Redux Async Action"
  }
}

  "Redux Async Call": {
    "prefix": "rxapi",
    "body": [
      "import { assign } from 'lodash';",
      "",
      "const FETCHING = 'FETCHING_${1:${TM_FILENAME_BASE/(.*)/${1:/upcase}/}}';",
      "const FETCH_SUCCESS = 'FETCH_${1:${TM_FILENAME_BASE/(.*)/${1:/upcase}/}}_SUCCESS';",
      "const FETCH_ERROR = 'FETCH_${1:${TM_FILENAME_BASE/(.*)/${1:/upcase}/}}_ERROR';",
      "",
      "const initialState = {};",
      "",
      "export const fetch${2:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}} = () => async (dispatch, getState, api) => {",
      "  dispatch({ type: FETCHING });",
      "  try {",
      "     const payload = await api.get(`/${3:${TM_FILENAME_BASE/(.*)/${1:/downcase}/}}`);",
      "     dispatch({",
      "       type: FETCH_SUCCESS,",
      "       payload",
      "     });",
      "  } catch(error) {",
      "     dispatch({",
      "       type: FETCH_ERROR,",
      "       payload: error",
      "     });",
      "  }",
      "};",
      "",
      "export default (state = initialState, action) => {",
      "  const { type, payload } = action;",
      "  switch (type) {",
      "    case FETCH_SUCCESS:",
      "      return assign({}, state, {",
      "        error: false,",
      "        fetching: false,",
      "        data: payload",
      "      });",
      "    case FETCHING:",
      "      return assign({}, state, { error: false, fetching: true, data: [] });",
      "    case FETCH_ERROR:",
      "      return assign({}, state, { error: true, message: payload, data: [] });",
      "",
      "    default:",
      "      return state;",
      "  }",
      "};",
      ""
    ],
    "description": "Redux Async Call"
  }

"Express Request Response": {
  "prefix": "exrr",
  "body": [
    "(req, res) => {",
    "  try {",
    "    const data = ${1:method}();",
    "    res.${2:send}(${3:data})",
    "  } catch(error) {",
    "    logger.error(error);",
    "    res.status(503).send(error)",
    "  }",
    "}"
  ],
  "description": "Express Request Response"
}

"Express Request Response Async": {
  "prefix": "exarr",
  "body": [
    "async (req, res) => {",
    "  try {",
    "    const data = await ${1:method}();",
    "    res.${2:send}(${3:data})",
    "  } catch(error) {",
    "    logger.error(error);",
    "    res.status(503).send(error)",
    "  }",
    "}"
  ],
  "description": "Express Request Response Async"
}

  "React Translate Stateless Component": {
    "prefix": "rtsc",
    "body": [
      "import React from 'react'",
      "import { translate } from 'react-i18next';",
      "",
      "const $TM_FILENAME_BASE = ({ t }) => {",
      "    return (",
      "        <div>",
      "            {t('$TM_FILENAME_BASE')}",
      "        </div>",
      "    )",
      "}",
      "",
      "export default translate()($TM_FILENAME_BASE)"
    ],
    "description": "React Translate Stateless Component"
  }

"Async Anonymous Call": {
  "prefix": "asaw",
  "body": [
    "(async () => {",
    "    const ret = await ${1:methodName}",
    "    ${2}",
    "})();"
  ],
  "description": "Async Anonymous Call"
}