1. Set the. Vue template

Open the editor, click File – Preferences – User snippet, and an input box pops up.

Type vue in the input box and press Enter to open a vue.json file.

Copy the following code inside:

{
	"Print to console": {
		"prefix": "vue"."body": [
			"<!--"."* @Component: "."* @Maintainer: "."* @Description: "."-- >"."<template>"." 
      

       \n"
      
." "."</template>\n"."<script>"."export default {"." name: {\n"."},"." data() {"." return {\n"."}"."},"." mounted(){\n"."},"." methods: {\n"."},"." components: {\n"."}"."}"."</script>\n"."<style scoped lang=\"scss\">\n"."</style>"."$2"]."description": "Log output to console"}}Copy the code

The template content can be modified as you like.

Then create a.vue file, type vue and press TAB.

2. If the first step doesn’t work out

It’s best if the first step succeeds, in case pressing TAB fails to generate the template but instead adds a space:

Step 1: Go to File preferences Settings and modify the following Settings:

"emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
},
"emmet.triggerExpansionOnTab": true
Copy the code

Step 2: Click the file type in the lower right corner of the editor to the left of the smiley face, select Profile association, type vue and press Enter. The file type in the lower right corner changes from HTML to VUE. Then use the TAB key to successfully generate the template ~