vscode配置自定义代码片段:让vscode具有和IDEA一样的代码段生成快捷键(sout或psvm)的配置方法为例说明/自定义html代码片段

官方文档

优先查阅文档
包含更多的信息

打开配置入口

ctrl+shift+p配置

输入preferences:configure user Snippets
(或者只输入snippet)

配置基本原理

事实上几乎所有语言的snippet套路是一样的,都是将设计好的代码模板(初步设计的代码可能就是可以运行的一段代码片段)
将其中的每一行用引号包围起来(如果语句本身含有引号,那么请使用反斜杠来转转义它),这些被包装成字符串的语句(乃至符号/空行)都将分别作为json中的body:属性的值(数组值)中的一个元素

java.json (实例1)

再输入java,点击确认,编辑java.json

• 也可以直接按路径找到java.json
• 根据文件中的注释内容给出的json说明,可以自行配置

sout/psvm配置样例

将Java.json里面的内容用如下代码覆盖(比如:添加sout,psvm的补全效果)

{
	// Place your snippets for java 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"
	// }
	"main 代码段": {
		"prefix": "psvm",
		"body": [
			"public static void main(String[] args){",
			"\t$1",
			"}"
		],
		"description": "main代码段"
	},
	"print": {
		"prefix": "sout",
		"body": [
			"System.out.println(\"$1\");"
			// "${1:}",
			// ")"
		],
		"description": "System.out.println"
	}
}

具体的代码为:(可以不必深究)

"main 代码段": {
		"prefix": "psvm",
		"body": [
			"public static void main(String[] args){",
			"\t$1",
			"}"
		],
		"description": "main代码段"
	},
	"print": {
		"prefix": "sout",
		"body": [
			"System.out.println(\"$1\");"
			// "${1:}",
			// ")"
		],
		"description": "System.out.println"
	}

效果(注意不要太着急enter/tab,不然vscode还没反应过来)

html 片段实例

{
	// 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": {
		//there ,the `print to console" will be the tip shows on the suggestion list 
		// the prefix field there:`log` is the trigger to introduce and insert the code snippet.
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	},
	"vue html snippet": {
		"prefix": "vueHtml",
		"body": [
			"<!-- import vue cdn: -->",
			"<script src=\"https://unpkg.com/vue@next\"></script>",
			"<div id=\"app\">",
			"<!-- write your vue tags or common html tages there: -->",
			"</div>",
			"<!-- write your js code: -->",
			"<script>",
			"\tVue.createApp({",
			/* define your variables (which will be bind to tags properties there:) */
			"\tdata(\t){",
			"\t\t$1",
			"\t\t/* separate your variables by comma:`,` */ ",
			"\t\t$2 ",
			"\t},",
			/* write your methods there:(including callbacks and so on) */
			"\tmethods:{",
			"\t\t$3",
			"\t\t/* separate your variables by comma:`,` */ ",
			"\t\t$4",
			"\t}",
			"}).mount(\"#app\")",
			"\t</script>",
			/* */
		],
		"description": "insert the vue basic template."
	}
}

效果