Vscode 常用代碼片段配置記錄

配置流程

漢化版本：（zh-cn）

• => 文件
• => 首選項
• => 用戶代碼片段
• => javascript.json

English：（en-us）

• => File
• => Preferences
• => User Snippets
• => javascript.json

{
  // Place your snippets for javascript 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.
  "import": {
    "prefix": "import 導入資源",
    "body": "import Name from '';",
  },
  "react-class-comp": {
    "prefix": "React Class Component",
    "body": [
      "import React, { Component } from 'react';",
      "$2",
      "/**",
      "|--------------------------------------------------",
      "| @${1:CompName}",
      "| #Component",
      "| 描述",
      "|--------------------------------------------------",
      "*/",
      "$2",
      "class ${1:CompName} extends Component {",
      "$2",
      "\trender() {",
      "\t\treturn (",
      "\t\t\t<div>page${1:CompName}</div>",
      "\t\t)",
      "\t}",
      "}",
      "$2",
      "export default ${1:Compname}"
    ],
    "description": "React Class 類組件",
  },
  "react-function-comp": {
    "prefix": "React Function Component",
    "body": [
      "import React from 'react';",
      "$2",
      "/**",
      "|--------------------------------------------------",
      "| @${1:CompName}",
      "| #Component",
      "| 描述",
      "|--------------------------------------------------",
      "*/",
      "$2",
      "const ${1:CompName} = ({ ...props }) => {",
      "$2",
      "\treturn (",
      "\t\t<div>${1:CompName}</div>",
      "\t)",
      "}",
      "$2",
      "export default ${1:CompName}"
    ],
    "description": "React 函數式組件",
  },
  "react-html-func-comp": {
    "prefix": "React Html Function Component",
    "body": [
      "// Todo",
      "const ${1:CompName} = (props) =>",
      "\t<div>${1:CompName}</div>"
    ],
    "description": "React 函數式組件",
  },
  "dva-connect-store": {
    "prefix": "Dva Connect Store",
    "body": [
      "@connect(({ ${1:StoreName}, loading }) => ({",
      "\t...${1:StoreName},",
      "\tloading: loading.models.${1:StoreName},",
      "}))",
      "$2",
    ],
    "description": "dva 關聯 store",
  },
  "dva-dispatch-store": {
    "prefix": "Dva Dispatch Store",
    "body": [
      "dispatch({",
      "\ttype: '${1:StorName}',",
      "\tpayload: {",
      "$2",
      "\t},",
      "})"
    ],
    "description": "dva 調用 store",
  },
  "dva-model-js": {
    "prefix": "Dva Model Js",
    "body": [
      "// import { Api } from './service';",
      "$2",
      "export default {",
      "\tnamespace: '${1:modelName}',",
      "\tstate: {",
      "$2",
      "\t},",
      "\tsubscriptions: {",
      "\t\tsetup({ dispatch, history }) {",
      "\t\t\thistory.listen(async location => {",
      "\t\t\t\tconst { pathname } = location;",
      "\t\t\t\tif (pathname === '/${1:modelName}') {",
      "\t\t\t\t\tconsole.log(pathname);",
      "\t\t\t\t}",
      "\t\t\t})",
      "\t\t}",
      "\t},",
      "\teffects: {",
      "\t\t// Todo",
      "\t\t* list({ payload ={} }, { call }) {",
      "\t\t\tconst { data } = yield call(list, payload);",
      "\t\t\tconsole.log(data)",
      "\t\t},",
      "\t},",
      "\treducers: {",
      "\t\tsave(state, { payload }) {",
      "\t\t\treturn { ...state, ...payload }",
      "\t\t}",
      "\t},",
      "}",
    ],
    "description": "dva 新建 model.js",
  },
  "dva-effects-action": {
    "prefix": "Dva Effects Action",
    "body": [
      "* ${1:action_name}({ payload ={} }, { call }) {",
      "\tconst { data } = yield call(Api.${2:actionName}, payload);",
      "\tconsole.log(data);",
      "\treturn data;",
      "},"
    ],
    "description": "dva 新建 action",
  },
  "form-props": {
    "prefix": "Form Props",
    "body": "form: { getFieldDecorator, validateFields, resetFields },",
    "description": "Antd Form 表單配置",
  },
  "form-html": {
    "prefix": "Form Html",
    "body": [
      "<FormItem label='${1:Name}' {...formLayout}>",
      "\t{",
      "\t\tgetFieldDecorator('${2:key}', {",
      "\t\t\tinitialValue: '初始值'",
      "\t\t})(",
      "\t\t\t<Input placeholder='請輸入' style={{ width: 240 }} />",
      "\t\t)",
      "\t}",
      "</FormItem>"
    ],
    "description": "Antd Form 表單組件",
  },
  "form-rules": {
    "prefix": "Form Rules",
    "body": "rules: [{ required: true, message: '${1:Name}不能爲空！' }],",
    "description": "Antd Form 表單校驗",
  },
  "function-common": {
    "prefix": "Function Common Style",
    "body": [
      "function ${1:name} () {",
      "$2",
      "}",
    ],
    "description": "普通函數",
  },
  "function-arrow": {
    "prefix": "Function Arrow Style",
    "body": [
      "const ${1:FuncName} = () => {",
      "$2",
      "};"
    ],
    "description": "箭頭函數",
  },
  "async-function-common": {
    "prefix": "Async Function Common  Style",
    "body": [
      "async function ${1:name} () {",
      "$2",
      "}",
    ],
    "description": "普通Async函數",
  },
  "async-function-arrow": {
    "prefix": "Async Function Arrow Style",
    "body": [
      "const ${1:FuncName} = async () => {",
      "$2",
      "};"
    ],
    "description": "箭頭Async函數",
  },
  "array-from": {
    "prefix": "Array From Object Array",
    "body": "const values = Array.from(${2:array}, ({ ${1:key} }) => ${1:key});",
    "description": "從二維數組中獲取一維數組",
  },
  "array-map": {
    "prefix": "Array Map Function",
    "body": "${1:array}.map((item, index) => {$2})",
    "description": "數組的map方法",
  },
  "array-forEach": {
    "prefix": "Array ForEach Function",
    "body": "${1:array}.forEach(item => {\n\tconst _item = item;\n})",
    "description": "數組的forEach方法",
  },
  "request-get": {
    "prefix": "Request GET Method",
    "body": [
      "// Todo",
      "export async function ${1:funcName}() {",
      "\treturn request(`${${2:Api}}`);",
      "}",
    ],
    "description": "Get 方法請求",
  },
  "request-post": {
    "prefix": "Request POST Method",
    "body": [
      "// Todo",
      "export async function ${1:funcName}(params) {",
      "\treturn request(`${${2:Api}}`, {",
      "\t\tmethod: 'POST',",
      "\t\tbody: {",
      "\t\t\t...params",
      "\t\t}",
      "\t})",
      "}",
    ],
    "description": "Post 方法請求",
  },
  "modal-props": {
    "prefix": "Modal Props",
    "body": [
      "// Todo",
      "const ${1:action}ModalProps = {",
      "\ttitle: '彈窗名稱',",
      "\tvisible: ${1:action}ModalVisible,",
      "\tclosable: false,\n\tkeyboard: false,\n\tmaskClosable: false,",
      "\t// 確認",
      "\tonConfirm: async payload => {\n\t\tconsole.log(payload)\n\t},",
      "\t// 取消",
      "\tonCancel() {",
      "\t\tdispatch({",
      "\t\t\ttype: '${2:StoreName}',",
      "\t\t\tpayload: {\n\t\t\t\t${1:action}ModalVisible: false\n\t\t\t}",
      "\t\t})",
      "\t}",
      "};",
    ],
    "description": "Modal的Props配置",
  },
  "table-props": {
    "prefix": "Table Props",
    "body": [
      "// Todo",
      "const ${1:action}TableProps = {",
      "\tloading,",
      "\tdata: dataArray,",
      "\t// 分頁",
      "\tonChange({ current, pageSize }) {\n\t\tconsole.log(current, pageSize)\n\t},",
      "\t// 操作",
      "\tonAction: async record => {\n\t\tconsole.log(record)\n\t},",
      "};",
    ],
    "description": "Table的Props配置",
  },
  "useState": {
    "prefix": "useState React Hooks",
    "body": "const [${1:state}, set${1:state}] = useState(value);",
    "description": "React Hooks useState"
  },
  "preventDefault": {
    "prefix": "PreventDefault",
    "body": "e.preventDefault();",
    "description": "阻止事件冒泡"
  }
}