一、hbuiderx

        1.打开hbuiderx，工具->代码设置->vue代码块  

 

        ​​​​​2.以下代码粘贴到vue.json里。

        'prefix' ：代码块的触发字符，就是敲什么字母匹配这个代码块(可根据自己习惯配置)。

        配置完成后输入你的指令+回车，就可以啦~

        

{
	// 注意：本文档仅支持单行注释，并且'//'前不能有任何非空字符！！！
	//
	// HBuilderX使用json扩展代码块，兼容vscode的代码块格式
	// 本文档修改完毕，保存即可生效，无需重启。
	// 本文档用于用户自定义{1}代码块。
	// 每个配置项的说明如下：
	// 'key'    ：代码块显示名称，显示在代码助手列表中的名字，以下例子中'console.log'就是一个key。
	// 'prefix' ：代码块的触发字符，就是敲什么字母匹配这个代码块。
	// 'body'   ：代码块的内容。内容中有如下特殊格式
	//          $1 表示代码块输入后光标的所在位置。如需要多光标，就在多个地方配置$1,如该位置有预置数据，则写法是${1:foo1}。多选项即下拉候选列表使用${1:foo1/foo2/foo3}
	//          $2 表示代码块输入后再次按tab后光标的切换位置tabstops（代码块展开后按tab可以跳到下一个tabstop）
	//          $0代表代码块输入后最终光标的所在位置（也可以按回车直接跳过去）。
	//          双引号使用\\'转义
	//          换行使用多个数组表示，每个行一个数组，用双引号包围，并用逗号分隔
	//          缩进需要用\\t表示，不能直接输入缩进！
	// 'triggerAssist' ：为true表示该代码块输入到文档后立即在第一个tabstop上触发代码提示，拉出代码助手，默认为false。
	// 每个代码块以key为主键，多个代码块需要逗号分隔。
	// 如果json语法不合法，底部会弹出错误信息，请注意修正。
	// 例子:
	"console.log": {
		"prefix": "logdemo",
		"body": [
			"<template>",
			"  <view class=\"\">",
			"  </view>",
			"</template>",
			"",
			"<script setup>",
			"import {",
			"  onLoad",
			"} from \"@dcloudio/uni-app\";",
			"import {",
			"  nextTick,",
			"  ref",
			"} from \"vue\";",
			"",
			"onLoad(() => {",
			"})",
			"</script>",
			"",
			"<style lang=\"scss\" scoped>",
			"</style>"
		],
		"triggerAssist": false,
		"description": "Log output to console twice"
	}
}

二、vscode

        1.打开vscode，文件->首选项->配置代码片段

        2.选择自己需要的语言打开

3.这里我生成的是uniapp

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. 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": {
		"scope": "javascript,typescript,vue",
		"prefix": "logdemo",
		"body": [
			"<template>",
			"\t<view class=''>",
			"\t</view>",
			"</template>",
			"",
			"<script setup>",
			"import {",
			"\tonLoad",
			"} from '@dcloudio/uni-app';",
			"onLoad(() => {",
			"})",
			"</script>",
			"",
			"<style lang='scss' scoped>",
			"</style>"
		],
		"description": "创建带有加载页面的Vue模板"
	}
}

prefix同上说明的一样

快去试吧！祝你成功~~~