Vscode代码片段配置

说明：VsCode作为前端开发比较常用的编程工具，配置代码片段之后可以大大提升我们的开发效率。

一、打开配置栏

打开文件 - 首选项 - 配置用户代码片段

二、配置你需要的代码片段类型

vue.json

{"vue3模板":{ //快捷输入的时候显示的提示
        "prefix":"v3", //输入的前缀，就是输入这个会有提示
        "description":"vue3模板", //描述
        "body":[ //这个是一个字符串数组，就是会输出的内容，如果内容含有 双引号，需要转义，比如最下面的lang=\"scss\"
            "<template>",
            "  <div></div>",
            "</template>",
            "",
            "<script setup>",
            "",
            "</script>",
            "",
            "<style lang=\"scss\" scoped>",
            "</style>",
            ""]},
}

javascript.json 

{"dialog弹窗配置":{"prefix":"dialogConfig",
        "description":"弹窗config配置",
        "body":["const dialogConfig = reactive({",
            "  show: false,",
            "  title: \"标题\",",
            "  buttons: [",
            "   {",
            "    type: \"danger\",",
            "    text: \"确定\",",
            "    click: (e) => {",
            "      submitForm();",
            "    },",
            "  },",
            " ],",
            "});"]},
    "formData配置":{"prefix":"form",
        "description":"快速实现添加form配置",
        "body":["const formData = ref({});",
            "const formDataRef = ref();",
            "const rules = {",
            "  title: [{ required: true, message: \"请输入内容\" }],",
            "};",
        ]},
    "发送reqeust请求":{"prefix":"request",
        "description":"发送reqeust请求",
        "body":["let result = await proxy.Request({",
            "   url:",
            "   params:{",
            "   }",
            "})",
            "if(!result){",
            "  return;",
            "}",
        ]},
    "watch使用":{"prefix":"watch",
        "description":"快速实现watch",
        "body":["watch(() => (newVal, oldVal) => {}, { immediate: true, deep: true });",
        ]},
    "import 基本信息":{"prefix":"import",
        "description":"快速导入基本组件",
        "body":["import { ref, reactive, getCurrentInstance, nextTick } from \"vue\"",
            "const { proxy } = getCurrentInstance();",
        ]},
    "submitForm提交表单":{"prefix":"submitForm",
        "description":"快速导入基本组件",
        "body":["formDataRef.value.validate(async (valid) => {",
            "   if (!valid) {",
            "     return;",
            "   }",
            "   let params = {};",
            "   Object.assign(params, formData.value);",
            "   let result = await proxy.Request({",
            "     url: api.,",
            "     params,",
            "   });",
            "   if (!result) {",
            "     return;",
            "   }",
            "});",
        ]}}

html.json

{
    // Place your snippets for html 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, $2for tab stops, $0for 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"
    // }"Dialog模板":{"prefix":"dialog",
        "description":"快速新建dialog 模板",
        "body":["<Dialog",
            "  :show=\"dialogConfig.show\"",
            "  :title=\"dialogConfig.title\"",
            "  :buttons=\"dialogConfig.buttons\"",
            "  width=\"400px\"",
            "  :showCancel=\"false\"",
            "  @close=\"dialogConfig.show = false\">",
            "</Dialog>",
        ]},
    "el-form模板":{"prefix":"el-form",
        "description":"创建el-form",
        "body":["<el-form",
            "  :model=\"formData\"",
            "  :rules=\"rules\"",
            "  ref=\"formDataRef\"",
            "  label-width=\"80px\"",
            "  @submit.prevent",
            ">",
            "<!--input输入-->",
            "  <el-form-item label=\"\" prop=\"\" >",
            "    <el-input clearable placeholder=\"提示信息\" v-model.trim=\"formData.\"></el-input>",
            "  </el-form-item>",
            "<!--textarea输入-->",
            "  <el-form-item label=\"\" prop=\"\">",
            "    <el-input",
            "      clearable",
            "      placeholder=\"提示信息\"",
            "      type=\"textarea\"",
            "      :rows=\"5\"",
            "      :maxlength=\"150\"",
            "      resize=\"none\"",
            "      show-word-limit",
            "      v-model.trim=\"formData.\"",
            "  ></el-input>",
            "  </el-form-item>",
            "<!-- 单选 -->",
            "  <el-form-item label=\"\" prop=\"\" >",
            "    <el-radio-group v-model=\"formData.\">",
            "      <el-radio :label=\"值1\">显示信息</el-radio>",
            "      <el-radio :label=\"值2\">显示信息</el-radio>",
            "    </el-radio-group>",
            "  </el-form-item>",
            "<!-- 下拉框 -->",
            "  <el-form-item label=\"\" prop=\"\" >",
            "    <el-select clearable  placeholder=\"提示信息\" v-model=\"formData.\" ,>",
            "      <el-option :value=\"值1\" label=\"显示信息\"></el-option>",
            "      <el-option :value=\"值2\" label=\"显示信息\"></el-option>",
            "    </el-select>",
            "  </el-form-item>",
            "</el-form>",
        ]},
    "el-input模板":{"prefix":"el-input",
        "description":"创建el-input",
        "body":["<!--input输入-->",
            "  <el-form-item label=\"\" prop=\"\" >",
            "    <el-input clearable placeholder=\"提示信息\" v-model=\"formData.\"></el-input>",
            "  </el-form-item>",
        ]},
    "el-textarea模板":{"prefix":"el-textarea",
        "description":"创建el-input",
        "body":["<!--textarea输入-->",
            "<el-form-item label=\"\" prop=\"\">",
            "  <el-input",
            "    clearable",
            "    placeholder=\"提示信息\"",
            "    type=\"textarea\"",
            "    :rows=\"5\"",
            "    :maxlength=\"150\"",
            "    resize=\"none\"",
            "    show-word-limit",
            "    v-model=\"formData.\"",
            "  ></el-input>",
            "</el-form-item>",
        ]},
    "el-radio模板":{"prefix":"el-radio",
        "description":"创建el-radio",
        "body":["<!-- 单选 -->",
            "  <el-form-item label=\"\" prop=\"\" >",
            "    <el-radio-group v-model=\"formData.\">",
            "      <el-radio :label=\"值1\">显示信息</el-radio>",
            "      <el-radio :label=\"值2\">显示信息</el-radio>",
            "    </el-radio-group>",
            "  </el-form-item>",
        ]},
    "el-select模板":{"prefix":"el-select",
        "description":"创建el-select模板",
        "body":["<!-- 下拉框 -->",
            "  <el-form-item label=\"\" prop=\"\" >",
            "    <el-select clearable  placeholder=\"提示信息\" v-model=\"formData.\" ,>",
            "      <el-option :value=\"值1\" label=\"显示信息\"></el-option>",
            "      <el-option :value=\"值2\" label=\"显示信息\"></el-option>",
            "    </el-select>",
            "  </el-form-item>",
        ]},
    "el-menu模板":{"prefix":"el-menu",
        "description":"创建el-menu下拉菜单",
        "body":["<el-dropdown trigger=\"click\">",
            "  <span class=\"iconfont icon-more\"> </span>",
            "  <template #dropdown>",
            "    <el-dropdown-menu>",
            "      <el-dropdown-item @click=\"\" >菜单选项</el-dropdown-item>",
            "    </el-dropdown-menu>",
            "  </template>",
            "</el-dropdown>",
        ]},
    "el-tab模板":{"prefix":"el-tab",
        "description":"创建el-tab",
        "body":["<el-tabs v-model=\"activeName\" @tab-click=\"handleClick\">",
            "  <el-tab-pane label=\"用户管理\" name=\"first\">用户管理</el-tab-pane>",
            "</el-tabs>",
        ]},
    "el-card模板":{"prefix":"el-card",
        "description":"创建el-card",
        "body":["<el-card class=\"box-card\">",
            "  <div slot=\"header\" class=\"clearfix\">",
            "    <span>卡片名称</span>",
            "    <el-button style=\"float: right; padding: 3px 0\" type=\"text\">操作按钮</el-button>",
            "  </div>",
            "  <div>",
            "    这里是内容",
            "  </div>",
            "</el-card>",
        ]},
}

三、以上都可以根据自己的需求进行取舍

四、现在在vue文件中输入v3就可以提示配置的代码片段了