Method of quickly creating custom code template in vscade

Time:2020-9-15

Quick creation of custom code template in vscade

A fresh, eat all day, learn this inVscodeI believe you will have a good command of other code templates.

I’ll take the creation of Vue as an example, but my Vue is created in HTML.

  • For beginners of Vue, we usually study in.htmlThe Vue package is introduced into the file, and then the Vue code is written.
  • Blindly following the online tutorials to create Vue templates doesn’t work.
  • Because the template we created is in.htmlFile, so our template must be in thehtml.jsonTo write.

The tutorial is as follows:

Use text and text together, understanding more clearly in place!

Found in vscadeset up -> User code snippetIn the input boxhtml, and click the first onehtml.json

For the first time, the first onehtml.jsonMaybe not.jsonSuffix, do not care, click directlyhtmlEnter.

We enter thehtml.jsonPage, this is where we write our own template:

The next step is to write our template. Our template needs the following items:

1. Basic HTML framework.
2. Introduce the script path of Vue package.
3. Some basic Vue code structures.

I have prepared the template. The template is as follows:

"Html5-Vue": {
	"prefix": "vue",
	"body": [
		"<!DOCTYPE html>",
		"<html lang=\"zh-CN\">\n",
		"<head>",
		"\t<meta charset=\"UTF-8\">",
		"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
		"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
		"\t<title>Document</title>",
		"\t<script src=\"../lib/vue-2.5.17/vue.js\"></script>",
		"</head>\n",
		"<body>",
		"\t<div id=\"app\">$1</div>\n",
		"\t<script>",
		"\t\tvar vm = new Vue({",
		"\t\t\tel: '#app',",
		"\t\t\tdata: {},",
		"\t\t\tmethods: {}",
		"\t\t});",
		"\t</script>",
		"</body>\n",
		"</html>"
	],
	"Description": "quickly create Vue template written in HTML5"
}

Copy the above template tohtml.jsonOf course, the path should become your own local path, and you can change the rest if you feel uncomfortable.

After saving, we create one.htmlFile, input Vue, press enter to automatically generate the template we need. Template example:

Necessary explanation

In order to prevent unnecessary errors when you change the template, I would like to give you a brief introduction to the template:

  • Don’t get tangled with the beginning: “HTML5 Vue”, which is just a template name.
  • What is specified here is the keyword of the trigger template. I specify that the trigger word is Vue.
  • Our templates are all written in “body”: [].
    • Each line of template code should be included in double quotation marks.
    • If a double quotation mark also appears in the middle of the code included in the double quotation mark, you need to use the escape character \ \ escape.
    • \N means line break, and t is the tab character. These two are used to indent the generated template to make the generated template easy to read.
    • The $1 in the template represents the cursor. Its position is the default position of the cursor. There can be multiple cursors: $2, $3, $4, etc.
  • The double quotation marks include the description of the template and the explanation of the trigger word in the smart prompt after you input the trigger word in the. HTML page.
  • Don’t put vcodes in it html.json The {} of the file is covered. Just cover the comment part or write it directly under the comment.

This article introduces how to quickly create custom code templates in vscade. For more related content of creating custom code templates, please search the previous articles of developeppaer or continue to browse the related articles below. I hope you can support developeppaer more in the future!