文章已同步至掘金：https://juejin.cn/post/6844903912068104199
欢迎访问😃，有任何问题都可留言评论哦~

在平常程序编写时，一段代码或说明会重复出现，这时候就可以使用模板，有利于提高我们的工作效率

VSCode 作为一种轻量级的代码编辑器，业界内颇受欢迎；下面就介绍一下如何利用VSCode snippet 制作代码模板。

创建一个snippets

• 菜单栏选择File
• 下拉菜单中选择 Preferences
• 再选择User snippets，出现下图情况，选择对应的语言即可；如果没有你需要的语言，你需要安装对应的语言插件。

Snippets内容使用JSON格式进行定义。

比如我想新建一个 Vue 模板：则选择 vue.json (Vue) 如图：

然后输入下面的 json 代码：

{
	"vue template": {
		"prefix": "vuem",
		"body": [
			"<template>",
			" <div>",
			" ",
			" </div>",
			"</template>",
			"<script>",
			" export default {",
			"   name:'$1',",
			"   data () {",
			"     return {",
			" ",
			"     }",
			"   },",
			"   computed:{",
			" ",
			"   },",
			"   methods:{",
			" ",
			"   },",
			"   components: {",
			" ",
			"   },",
			" }",
			"</script>",
			"<style scoped>",
			" ",
			"</style>",
			""
		],
		"description": "vue template"
	},
}

保存，然后新建.vue文件，输入 vuem+tab 或 vuem+enter 即生成模板

• vue template ：当前snippet名字。
• prefix ：前缀，代码块使用快捷方式；键入前缀，按tab键，代码块就会被使用。
• body ：代码块内容；换行使用\r\n。
• description ：键入前缀，vscode 感知到前缀，显示的说明内容。
• $1,$2,$0 ：指定代码模块生成后，编辑光标出现位置; 使用Tab键进行切换(编辑光标按$1,$2,$3...$0的顺序跳转)，$0是光标最后可切换位置。

Snippet语法

Tabstops

$1，$2指定代码块生成后，光标出现的位置；不同位置的相同$1位置同时出现光标。

Placeholders

给光标出现位置加上默认值；例如，${1:another ${2:placeholder}}；$1处位置默认值是another。

Choice

光标位置设置多个值可供选择; 例如，${1|one,two,three|}；$1位置处可以选择one,two,three中一个词填充在此处。

Variables

• 常用变量
  • TM_SELECTED_TEXT 当前选中内容或空字符串
  • TM_CURRENT_LINE 当前行内容
  • TM_CURRENT_WORD 光标处字符或空字符串
  • TM_LINE_INDEX 从0开始的行号
  • TM_LINE_NUMBER 从1开始的行号
  • 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 秒数
• 变量格式化

${TM_FILENAME/(.*)\\..+$/$1/}
  |           |         |  |
  |           |         |  |-> no options
  |           |         |
  |           |         |-> references the contents of the first
  |           |             capture group
  |           |
  |           |-> regex to capture everything before
  |               the final `.suffix`
  |
  |-> resolves to the filename

一个 python snippet

"python template": {
        "prefix": "pyHeader",
        "body": [
            "#!user/bin/python"
            "# _*_ coding: utf-8 _*_"
            " "
            "# @File    :   $TM_FILENAME"
            "# @Version :   1.0"
            "# @Author  :   xxxxxxx"
            "# @Email   :   xxxxxxx"
            "# @Time    :   $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND"
            "#Description:"
            " " 

            "import datetime"
            "start_time = datetime.datetime.now()"

            "end_time = datetime.datetime.now()"
            "print(end_time-start_time)"
        ],
        "description": "my vue python template",
    }

---

^_<