vscode 快速創建自定義內容的文件

背景：

用 vscode 工作中，每次創建一個新的頁面，一般都是拷貝一份現有的文件，然后刪減，留下最簡單的模板內容，太麻煩了
想着有沒有一種方式，可以快速創建一個最簡單的模板？
vscode本身就可以實現

具體步驟

1. 點擊左下角的設置

2. 點擊用戶代碼片段

3. 點擊新建全局代碼片段文件

會看到如下代碼：

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. 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": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

4. 把上面這些刪掉，換成自己的模板代碼，這里以tsx為例，代碼如下，然后保存退出就可以了

{
	"Print to console": {
		"prefix": "tsx", 
		"body": [
			"import React, { useEffect, useState } from 'react';",
			"import { Select, message } from 'antd';",
			"", // 空行
			"import { propTypes } from './type';",
			"import './index.less';",
			"",
			"const Container: React.FC<propTypes> = (props) => {",
			"",			
			"  const [name, setName] = useState<string>('');",
				"",
			"  useEffect(() => {",
			"    console.log('finish')",
			"  }, [])",
			"",
			"  return (",
			"    <div>",
			"      sssss",
			"    </div>",
			"  );",
			"};",
			"",
			"export default Container;",
			"",
		],
		"description": "tsx and react hook template",
	}
}

注意： prefix 就是代碼片段的命令，我這里就是 tsx, body就是代碼片段的內容，里面換行就是 ""， 需要空格的代碼片段里也得有空格

5. 以后新建完tsx文件，在文件里輸入tsx，如下圖所示，選中然后回車就自動生成剛才配置的模板文件了

動態效果演示如下：

想設置其他代碼片段，過程是一樣的