vscode增加自定义模板(vue3.x/2.x)

平常想输入某个关键字，tab 生成自己想要的模板，vscode里的实现。

我主要想输入vue的时候生成一个我定制化的模板
只需要 文件 ------->首选项-------->用户代码片段，输入vue,点击打开 vue.json

---

vue2代码片段

因为我最近用的 vue+ts+less
我改成了这样

{
	//$0,$1,$2是为了创建模板时切换光标的
	// ${1:another} 这种是占位符
	// same ids are connected.
	// Example:
	"Create vue2.x+ts+less template": {
		"prefix": "vue",
		 /*scope 确定范围的, 默认全局（所有文件）
			vue只在.vue 文件内有效,javascript 在 .js 中有效,以此类推
			可以多个 "javascript，typescript"
		*/，
		 "scope": "vue",
		"body": [
            "<template>",
            "  <div class=\"componentName\"></div>",
            "</template>",
            "<script lang=\"ts\">",
            "import { Vue, Component } from \"vue-property-decorator\";",
            "@Component",
            "export default class ComponentName extends Vue {$0}",
            "</script>",
			"<style lang=\"less\" scoped>$1</style>",
			"",
		],
		"description": "Create vue2.x+ts+less template"
	}
}

如上配置后，随便建个.vue文件
里面输入vue,再Tab键，输出如下：

<template>
  <div class="componentName"></div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component
export default class ComponentName extends Vue {}
</script>
<style lang="less" scoped></style>

---

vue3代码片段

新建 vue3.json 文件

粘贴如下内容：

{
	// 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.
	"Create vue2.x+scss template": {
		"prefix": "vue3",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script>",
			"import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'",
			"export default {",
			"  name: '',",
			"  setup() {",
			"    const state = reactive({})",
			"    onBeforeMount(() => {})",
			"    onMounted(() => {})",
			"    return {",
			"      ...toRefs(state),",
			"    }",
			"  },",
			"}",
			"",
			"</script>",
			"<style scoped lang='scss'>",
			"</style>",
			
	],
		"description": "Create vue2.x+scss template"
	}
}

保存退出。

新建 xxx.vue 文件
输入 vue3, tab

<template>
  <div></div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
export default {
  name: '',
  setup() {
    const state = reactive({})
    onBeforeMount(() => {})
    onMounted(() => {})
    return {
      ...toRefs(state),
    }
  },
}

</script>
<style scoped lang='scss'>
</style>