Recently in the familiar with VSC to do the front-end development editor, found snippets This function is very easy to use, is automatically help you enter HTML tags, install HTML snippets plugin (0.1.0), Directly in the code input HTML5 and then hit the carriage will automatically help you put a HTML5 standard label template to fill the good, but there is a small problem is that the effect of automatic filling is this:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
</body>
</html>
Here lang=”en”, I want to modify the default to fill lang=”zh-CN”, a little toss a bit, find the configuration file of this plugin is located
C:\Users\Dexter\.vscode\extensions\abusaidm.html-snippets-0.1.0\snippets\snippets.json
Open this file and find the part that defines the html5 mapping. Modify it as follows, restart VSC, and then enter html5 to become the desired effect.
"html5": {
"prefix": "html5",
"body": [
"<!DOCTYPE html>",
"<html lang=\"$1zh-CN\">", ~~ This is originally en~~
"\t<head>",
"\t\t<title>$2</title>",
"\t\t<meta charset=\"UTF-8\">",
"\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"\t\t<link href=\"$3css/style.css\" rel=\"stylesheet\">",
"\t</head>",
"\t<body>",
"\t$4",
"\t</body>",
"</html>"
],
"description": "HTML - Defines a template for a html5 document",
"scope": "text.html"
},
Add
You can also find your own common code snippet in the html.json configuration file after you find the HTML in the file-preference-user-defined snippet. For example, the following is my modified HTML5 code template containing Vue.js reference:
{
/*
// Place your snippets for HTML 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": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
*/
"Vue": {
"prefix": "vue",
"body": [
"<!DOCTYPE html>",
"<html lang=\"zh-CN\">",
"\t<head>",
"\t\t<title>$1</title>",
"\t\t<meta charset=\"UTF-8\">",
"\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"\t\t<script src=\"https://cdn.bootcss.com/vue/2.2.2/vue.min.js\"></script>",
"\t</head>",
"\t<body>",
"\t$2",
"\t</body>",
"</html>"
],
"description": "vue - Defines a template for a vue & html5 document"
}
}
It should be noted here that the position of $1, $2 in the code is the position of the cursor after the code segment is automatically inserted, $1 is the default position, and $2 is the next position to jump to after pressing the tab key.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
