vscode - create vue template

Step 1: Create a new template and save it

File --> Preferences --> User Code Snippet --> Enter vue, select vue.json --> Copy the template content in the third step and save the content

 

Step 2: Add configuration to allow vscode to allow custom code snippet prompts

File --> Preferences --> Settings ---> Copy and add these 2 items

 

// Show code snippet suggestions above other suggestions.

"editor.snippetSuggestions": "top",

// Automatically format pasted content

"editor.formatOnPaste": true

 

Step 3: Copy the following code, save and restart vscode

{
  "Print to console": {
	  "prefix": "vue",
	  "body": [
	    "<template>",
	    "  <div class=\"page\">\n",
	    "  </div>",
	    "</template>\n",
	    "<script>",
	    "export default {",
			"  name: '',",
		  "  components: {},",
	    "  data() {",
	    "    return {\n",
	    "    }",
	    "  }",
	    "}",
	    "</script>\n",
	    "<style scoped lang=\"stylus\">",
	    "</style>",
	    "$2"
	  ],
	  "description": "Log output to console"
	}
}

 

Step 4: Test whether the addition is successful

Test method: Create a new vue suffix file, enter vue, press the tab key, OK

Note: If the test in the fourth step is unsuccessful, check the lower right corner of vscode. The file type needs to be vue. If the file type in the lower right corner of the file with the .vue suffix is ​​html, manually change it to vue and repeat the fourth step again.

 

The disadvantage is that it is impossible to create a new vue file like sublime to automatically bring the corresponding template.

Let me make a complaint: In webstorm, there is a problem with the compatibility of the Chinese input method. It is said that it is a compatibility problem with versions above Microsoft .NET Framework 4.5.2, and it cannot be repaired after changing the version many times. Helpless can only switch to vscode