Visual Studio Code sets language-specific custom code blocks

1. Open the json file of a specific language

File (File) -> Preferences (Preferences) -> User Snippets (Configure User Snippets) -> Select the language the snippets should be displayed in. (Use vue as an example below)
Note: macOS: Code (Code) > Preferences (Preferences)

2. Add code segment
"Print to console": code block name;
"prefix": prefix, used to trigger code segment, expand and insert in the text;
"body": code block content;
"description": description;


Official example:

vue.json
{
     "Print to console": {
	 	"prefix": "log",
	 	"body": [
	 		"console.log('$1');",
	 		"$2"
	 	],
	 	"description": "Log output to console"
	 }
}

vue-example

vue.json
{
    "vue2 code": {
		"prefix": "vue2",
		"body": [
			"<template>",
			"\t<div>",
			" ",
			"\t</div>",
			"</template>",
			"<script>",
			"export default {",
			"\tname:'',",
			"\tcomponents: {",
			" ",
			"\t},",
			"\tdata() {",
			"\t\treturn {",
			" ",
			"\t\t}",
			"\t},",
			"\tcreated() {",
			"",
			"\t},",
			"\tmethods: {",
			" ",
			"\t},",
			"}",
			"</script>",
			"<style lang=\"scss\" scoped>",
			" ",
			"</style>"
		],
		"description": "vue2 basic module"
	},    
}

 3. Set multiple code blocks
to write multiple objects in the json file.

vue.json
{
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	},
	"vue2 code": {
		"prefix": "vue2",
		"body": [
			"<template>",
			"\t<div>",
			" ",
			"\t</div>",
			"</template>",
			"<script>",
			"export default {",
			"\tname:'',",
			"\tcomponents: {",
			" ",
			"\t},",
			"\tdata() {",
			"\t\treturn {",
			" ",
			"\t\t}",
			"\t},",
			"\tcreated() {",
			"",
			"\t},",
			"\tmethods: {",
			" ",
			"\t},",
			"}",
			"</script>",
			"<style lang=\"scss\" scoped>",
			" ",
			"</style>"
		],
		"description": "vue2 basic module"
	},
}

4. Use code blocks
Where you need to insert code blocks, enter the prefix (vue2) and press Enter.
example

Guess you like

Origin blog.csdn.net/m0_65894854/article/details/129945598