2022년 1월 2일 일요일

VSCODE 사용자코드

 {

    // Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    "Create Functional React Component": {
        "prefix": "cfrc",
        "body": [
          "import React from 'react';",
          "",
          "const ${TM_FILENAME_BASE} = () => {",
          "    return (",
          "        <>",
          "            ${TM_FILENAME_BASE}",
          "        </>",
          "    );",
          "}",
          "",
          "export default ${TM_FILENAME_BASE};"
        ],
        "description": "Create Functional React Component"
    },
    "Styled Functional React Component": {
        "prefix": "sfrc",
        "body": [
          "import React from 'react';",
          "import styled from 'styled-components';",
          "",
          "const ${TM_FILENAME_BASE}Block = styled.div``;",
          "",
          "const ${TM_FILENAME_BASE} = () => {",
          "    return (",
          "        <${TM_FILENAME_BASE}Block>",
          "            ${TM_FILENAME_BASE}",
          "        </${TM_FILENAME_BASE}Block>",
          "    );",
          "}",
          "",
          "export default ${TM_FILENAME_BASE};"
        ],
        "description": "Styled Functional React Component"
    },
    "Create Class React Component": {
        "prefix": "ccrc",
        "body": [
          "import React, { Component } from 'react';",
          "",
          "class ${TM_FILENAME_BASE} extends Component {",
          "    render() {",
          "        return (",
          "            ${TM_FILENAME_BASE}",
          "        )",
          "    }",
          "}",
          "",
          "export default ${TM_FILENAME_BASE};"
        ],
        "description": "Create Class React Component"
    },
    "Create Redux Module": {
        "prefix": "crdm",
        "body": [
          "import { createAction, handleActions } from 'redux-actions';",
          "// import { takeLatest, call } from 'redux-saga/effects';",
          "// import createRequestSaga, { createRequestActionTypes } from '../lib/createRequestSaga';",
          "",
          "const INITIALIZE = '${TM_FILENAME_BASE}/INITIALIZE';",
          "const CHANGE_VALUE = '${TM_FILENAME_BASE}/CHANGE_VALUE';",
          "// const [ACTION, ACTION_SUCCESS, ACTION_FAILURE] = createRequestActionTypes('${TM_FILENAME_BASE}/ACTION');",
          "// const [REACTION, REACTION_SUCCESS, REACTION_FAILURE] = createRequestActionTypes('${TM_FILENAME_BASE}/REACTION');",
          "",
          "export const ${TM_FILENAME_BASE}Initialize = createAction(INITIALIZE);",
          "export const ${TM_FILENAME_BASE}ChangeValue = createAction(CHANGE_VALUE, ({key, value}) => ({key, value}));",
          "// export const action = createAction(ACTION, data => data);",
          "",
          "// const actionSaga = createRequestSaga(ACTION, actionAPI.action);",
          "// function reactionSaga() {",
          "//     try {",
          "//         yield call(actionAPI.reaction);",
          "//     } catch (e) {",
          "//         console.error(e);",
          "//     }",
          "// }",
          "",
          "export function* ${TM_FILENAME_BASE}Saga() {",
          "    // yield takeLatest(ACTION, actionSaga);",
          "    // yield takeLatest(REACTION, reactionSaga);",
          "}",
          "",
          "const initialState = {",
          "    ${TM_FILENAME_BASE}: null,",
          "    error: null",
          "};",
          "",
          "const ${TM_FILENAME_BASE} = handleActions(",
          "    {",
          "        [INITIALIZE]: () => initialState,",
          "        [CHANGE_VALUE]: (state, { payload: {key, value}}) => ({",
          "            ...state,",
          "            [key]: value,",
          "        }),",
          "    },",
          "    initialState,",
          ");",
          "",
          "export default ${TM_FILENAME_BASE};"
        ],
        "description": "Create Redux Module"
      }
}

댓글 없음:

댓글 쓰기