vscode配置快捷指令

484 阅读1分钟

-步骤如下图

屏幕快照 2021-07-04 下午9.48.07.png

屏幕快照 2021-07-04 下午9.48.18.png

屏幕快照 2021-07-04 下午9.49.35.png 在vue.json.code-snippets输入以下代码片段

"Print1 to console": {
    	"prefix": "vv3",
    	"body": [
    	"<template>",
        "\t<div>",
        "\t</div>",
        "</template>",
        "<script lang=\"ts\">",
        "import { defineComponent } from 'vue';",
        "\nexport default defineComponent({",
        "\tname: 'App',",
        "});",
        "</script>\n",
    	],
    	"description": "Log output to console"
    }

然后在新创建的vue文件输入vv3可快速搭建相关模版.

vue2

	// Place your snippets for vue 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"
	// }

	"Print to console": {
			"prefix": "vv2",
			"body": [
					"<template>",
					"    <div class=\"$2\">$5</div>",
					"</template>",
					"",
					"<script>",
					"",
					"export default {",
					"    components: {},",
					"    data() {",
					"        return {",
					"",
					"        };",
					"    },",
					"    computed: {},",
					"    watch: {},",
					"    methods: {},",
					"    created() {},",
					"    mounted() {},",
					"    beforeCreate() {},",
					"    beforeMount() {},",
					"    beforeUpdate() {},",
					"    updated() {},",
					"    beforeDestroy() {},",
					"    destroyed() {},",
					"    activated() {},",
					"    }",
					"</script>",
					"<style lang='scss' scoped>",
					"//@import url($3); 引入公共css类",
					"$4",
					"</style>"
			],
			"description": "Log output to console"
	}

}