Windows下vscode的代码片段快照生成配置

1. 在vscode界面通过File–>preferences–>user snippet打开快照配置（中文版的设置路径：文件–>首选项–>用户片段）。
   

2. 在输入框里输入你想要的这段快照配置在哪种类型文件里生效的关键字。此处拿TypeScript类型的react文件举例说明，如下图所示：在输入框里输入react关键字选中第二项“typescriptreact.json”。
   

3. 设置自己要配置的代码片段内容，如下所示：

{
	// Place your snippets for typescriptreact 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.
	// React 箭头函数组件导出模板:
	"React Arrow Function Component Export": {
		"prefix": "rafce",
		"body": [
			"import React from \"react\"\n",
			"const $TM_FILENAME_BASE = () => {",
			"\treturn <div>$0</div>",
			"}\n",
			"export default $TM_FILENAME_BASE"
		],
		"description": "React Arrow Function Component Export"
	}
}

4. 保存后，即可在对应的.tsx为后缀的文件里使用快照，输入你在配置时"prefix"里设置的内容,此处我设置的是"prefix": “rafce”,所以从输入r开始，编辑器就会提示我之前设置的对应的快照内容，按下回车或者tap键即可。
   

注：VsCode 自定义代码片段(Snippet)中可使用的变量说明

注：这些都是变量名，不是宏，在实际使用的时要加上 $ 符TM_LINE_INDEX：行号（从零开始）；

TM_LINE_NUMBER：行号（从一开始）；

TM_FILENAME：当前文档的文件名；

TM_FILENAME_BASE：当前文档的文件名（不含后缀名）；

TM_DIRECTORY：当前文档所在目录；

TM_FILEPATH：当前文档的完整文件路径；

CLIPBOARD：当前剪贴板中内容。

CURRENT_YEAR: 当前年份；

CURRENT_YEAR_SHORT: 当前年份的后两位；

CURRENT_MONTH: 格式化为两位数字的当前月份，如 02；

CURRENT_MONTH_NAME: 当前月份的全称，如 July；

CURRENT_MONTH_NAME_SHORT: 当前月份的简称，如 Jul；

CURRENT_DATE: 当天月份第几天；

CURRENT_DAY_NAME: 当天周几，如 Monday；

CURRENT_DAY_NAME_SHORT: 当天周几的简称，如 Mon；

CURRENT_HOUR: 当前小时（24 小时制）；

CURRENT_MINUTE: 当前分钟；

CURRENT_SECOND: 当前秒数。