VSCode快捷开发必备配置——配置用户代码片段

VSCode开发Vue3环境配置

在我们日常工作中经常会有重复使用到的代码，比如函数封装，请求，异步函数操作等等，这时我们就需要对这些经常用到的代码片段进行封装，通过简短的命令符快速生成，来提高我们的工作效率。

一、插件安装

推荐两个插件

1. Vetur
2. Vue 3 Snippets

其中，Vetur这个插件主要用于让VSCode识别Vue框架的语法，Vue 3 Snippets这个插件基于最新的 Vue 2 及 Vue 3 的 API 添加了 Code Snippets(代码片段)。你不需要记住什么snippets，就像往常一样在 vscode 里写代码就好了。比如你可以键入vcom 然后按上下键选中 VueConfigOptionMergeStrategies 再按Enter键，就输入了Vue.config.optionMergeStrategies了。代码片段可参考VSCode中的具体扩展。

二、配置Vue模板

1. 效果展示

快速构建一个vue3页面

2. 配置方法

步骤一：

步骤二：新建全局代码片段步骤三：输入配置文件名称，并添加快捷代码片段配置代码

验证是否生效：

三、常用代码片段配置代码

快速生成Vue3页面

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

element-ui组件快速生成

{
	"el-form模板": {
		"prefix": "el-form",
		"description": "创建el-form",
		"body": [
			"<el-form",
			"  :model=\"formData\"",
			"  :rules=\"rules\"",
			"  ref=\"formDataRef\"",
			"  label-width=\"80px\"",
			">",
			"<!--input输入-->",
			"  <el-form-item label=\"\" prop=\"\" >",
			"    <el-input clearable placeholder=\"提示信息\" v-model=\"formData.\"></el-input>",
			"  </el-form-item>",
			"<!--textarea输入-->",
			"  <el-form-item",
			"    label=\"\"",
			"    prop=\"\"",
			"    clearable",
			"    placeholder=\"提示信息\"",
			"    type=\"textarea\"",
			"    :rows=\"5\"",
			"    :maxlength=\"150\"",
			"    resize=\"none\"",
			"    show-word-limit",
			"    v-model=\"formData.\"",
			"  >",
			"  </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=\"\"",
			"   clearable",
			"   placeholder=\"提示信息\"",
			"   type=\"textarea\"",
			"   :rows=\"5\"",
			"   :maxlength=\"150\"",
			"   resize=\"none\"",
			"   show-word-limit",
			"   v-model=\"formData.\"",
			" >",
			"</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>",
		]
	},
}

watch快速生成

{
	"watch使用": {
		"prefix": "watch",
		"description": "快速实现watch",
		"body": [
			"watch(() => (newVal, oldVal) => {}, { immediate: true, deep: true });",
		]
	}
}

参考博客：VSCode 配置用户代码片段