说明：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, $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"
// }
"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>",
]
},
}