Shulou(Shulou.com)06/02 Report--

This article mainly introduces vscode how to create a custom code template, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

This article takes the creation of Vue as an example, but this Vue is created in HTML.

For beginners of Vue, we usually introduce the vue package into the .html file and then write our own vue code.

Because the template we created is under the .html file, our template has to be written in html.json.

The specific methods are as follows:

1. Find the settings-> user code snippet in Vscode, enter html in the input box, and click the first html.json:

For the first time, the first html.json may not have the .json suffix, never mind, just click html to enter.

2. Go to the html.json page, where we write our own templates

The next step is to write our template, which requires the following items:

1. Basic HTML architecture.

2. Introduce the script path of the Vue package.

3. Some basic Vue code structure.

I have prepared the template, and the template is as follows:

"Html5-Vue": {"prefix": "vue", "body": ["", "\ n", "", "\ t", "\ tDocument", "\ t", "\ n", "\ t\ n", "\ t\ tvar vm = new Vue ({", "\ t\ t\ tel:'# app',", "\ t\ t\ tdata: {}," "\ t\ t\ tmethods: {}", "\ t\ t}) ","\ t ","\ n ","]," description ":" quickly create vue templates written in html5 "}

4. Just copy the above template to html.json, of course, the path should become your own local path, and you can change the rest if you are uncomfortable.

5. After saving, we create a .html file, enter vue, and enter to automatically generate the template we need. Sample template diagram:

Necessary instructions:

In order to prevent unnecessary errors when you change the template, let me give you a brief description of what is in the template:

Don't worry about writing "Html5-Vue" at the beginning, it's just a template name.

"prefix": "what is specified here is the keyword that triggers the template, and here I specify the trigger word as vue.

Our templates are all written in "body": [].

Each line of template code should be included in double quotation marks.

If double quotes also appear in the middle of the code included in double quotes, you need to escape with the escape character\.

\ n means a line break, and\ t is a tab. these two are used for indentation of the template at generation time to make the resulting template easy to read.

The $1 that appears in the template represents the cursor, and its location is the default location of the cursor, and there can be multiple cursors: $2, 3, 4, and so on.

"description": "double quotation marks include the description of the template and the explanation of the trigger word that appears in the smart prompt after you enter the trigger word on the .html page.

Never overwrite the {} that comes with the html.json file in Vscode, just overwrite the comments, or write directly under the comments.

Thank you for reading this article carefully. I hope the article "how to create a custom code template for vscode" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.