vscode 配置用户片段教学

在日常开发中，我们经常会遇到一些高频使用的单词或者基础代码片段，每次都手动一个字母一个字母敲，不但枯燥，还很浪费时间。 如果有一种方式，可以用一个简单的快捷指令，就自动补全一整段代码，那开发效率是不是能提升不少？

接下来，我就给大家介绍一下 VS Code 自带的一个“代码片段配置”功能，简单配置一下，就能实现一键插入常用代码，让你的敲代码体验直接起飞。

1. 点击编辑器左下角或者右下角的设置图标

2. 选择代码片段配置

3. 会出现这个弹框，选择你要配置的语言

4. 这里我选择了配置ts文件

VS Code 会自动帮你生成一个示例配置文件，内容大致如下:

{
	// Place your snippets for go 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"
	// }
}

Print to console可以理解为为这段配置起的名字，

prefix 是你触发代码配置的命令

body 是配置代码的内容，将我们经常需要写的代码放进来， 注意 这里和我们日常使用 json 文本不一样，需要将每一行 都使用"" 包裹, 使用 $1, $2 依此类推来表示我们需要手动输入的内容,比如 函数名 或者 class 名。

description 是表示这段代码的说明 可以在外面输入快捷命令的时候提示出来。

5. 这里是我配置的tsx代码片段

	"打印": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
		],
		"description": "打印"
	},
	"react模版": {
		"prefix": "react",
		"body": [
			"const $1 = () => {",
			"  return <div>$2</div>;",
			"};",
			"export default $1;",
			""
		],
		"description": "react模版"
	}
}

6.在 tsx 文件中输入 react，可以看到 VS Code 给出了我们刚才配置的代码片段提示：

回车选择后：

• 首先输入函数（组件）名字；
• 按 Tab 可以在 $1、$2 等占位符之间依次切换，比如从组件名跳到 div 内部内容位置。

到这里，一个简单的代码片段就配置并使用完成了。 通过这种方式，把自己日常开发中高频使用的模版、固定写法都配置成 snippet，以后只用记住几个短短的 prefix，就能大幅减少重复劳动，让你把精力更多放在「写逻辑」而不是「敲模板代码」上。