vscode创建vue快捷代码片段

迷南。 2022-02-03 00:55 589阅读 0赞

（1）打开 文件首选项 —> 用户代码片段

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

在搜索框搜索vue 选择vue.json文件，如果没有安装vue.json：安装插件VueHelper

（2）修改vue.json文件

{
    	// 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": "vue",
    		"body": [
    			"<template>",
                "    <div>\n$0",
                "    </div>",
                "</template>\n",
                "<script>",
                "export default {",
                "    props: {\n",
                "    },",
                "    data() {",
                "        return {\n",
                "        };",
                "    },",
                "    computed: {\n",
                "    },",
                "    created() {\n",
                "    },",
                "    mounted() {\n",
                "    },",
                "    watch: {\n",
                "    },",
                "    methods: {\n",
                "    },",
                "    components: {\n",
                "    },",
                "};",
                "</script>\n",
                "<style lang=\"${1:scss}\" scoped>\n",
                "</style>\n",
    		],
    		"description": "Create vue template"
    	}
    }

重启vscode就可以了

在vue组件页面中输入 vue+tab键就可以快捷生成

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20220203/c75a44d9c5a74e7dba9c777cda90b0c8.png